Jump to content
Sign in to follow this  
jasehead

Change CSS of price widget

Recommended Posts

I use a gateway plugin for pay by instalment (Oxipay, now humm). Part of this service includes a javascript widget that shows the pay by instalment amount. However, because of recent changes with the service provider, there have been some changes in the injected code. My main issue is that the text explaining the pay-by-instalment amount is now wider than the div for the product price and it won't wrap. The CSS for the span is set to "white-space:nowrap".  Is there some way that I can take control of this javascript injected style?  There are no elements identified by ID, only by class.  And in the Category page in CubeCart (content.category.php), the widget is between $product.price and $product.available, just after </h3> - so the injected code will repeat for each product listed in the category page.

Share this post


Link to post
Share on other sites

If a Foundation-based skin, there will be two places where this widget could be located: the list view and the grid view.

These are classes used by the skin's javascript to effect the change of view as controlled by the switch at the top of the list of products.

The class names don't change, so we can use them. And/Or, if the injected javascript has unique class names, we can use them instead.

CSS:

.product_list_view h3 + *, .product_grid_view h3 + * { white-space: normal; }

We have the overall div blocks that distinguish the list vs grid views. Then we look for the h3 tag. Then we find any other tag (the *) that is the very next sibling -- hopefully that other tag is present that the injected javascript wraps its content in, as opposed to just unadorned text.

It would help if there were a known tag or class in that javascript.

 

Share this post


Link to post
Share on other sites
Posted (edited)

In the category list view, this is the php code:

                  <h3>
                     {if $product.ctrl_sale}<span class="old_price">{$product.price}</span> <span class="sale_price">{$product.sale_price}</span>
                     {else}
                     {$product.price}
                     {/if}
                  </h3>
<!-- START oxipay -->
{if {$product.price|substr:1} >= 50 && $product.available > 0 && $product.ctrl_stock && ((strpos({$product.name|lower|replace:'-':''}, 'preorder') === false) && (isset($product.preorder_avail_date) && !is_null($product.preorder_avail_date) && $product.preorder_avail_date != "" && strtotime($product.preorder_avail_date) < time()))}
	{if $product.ctrl_sale}
	<script id="oxipay-price-info" src="https://widgets.oxipay.com.au/content/scripts/payments.js?productPrice={$product.sale_price|regex_replace:'/[^0-9.]+/':''}"></script>
	{else}
	<script id="oxipay-price-info" src="https://widgets.oxipay.com.au/content/scripts/payments.js?productPrice={$product.price|regex_replace:'/[^0-9.]+/':''}"></script>
	{/if}
{/if}
<!-- END oxipay -->
                  {if $product.available <= 0}
                  <div class="row collapse">

Which becomes source HTML:

                  <h3>
                     $119.95
                  </h3>
<!-- START oxipay -->
		<script id="oxipay-price-info" src="https://widgets.oxipay.com.au/content/scripts/payments.js?productPrice=119.95"></script>
<!-- END oxipay -->
                  <div class="row collapse">

Which becomes the generated HTML:

                                       <h3>
                                          $119.95
                                       </h3>
<!-- START oxipay -->
<script id="oxipay-price-info" src="https://widgets.oxipay.com.au/content/scripts/payments.js?productPrice=119.95"></script>
<a class="humm-price-info-widget" data-remodal-target="humm-price-info-modal">
            <div><img alt="Humm" class="humm-widget-logo" src="https://widgets.oxipay.com.au/content/images/logo-orange.svg"></div>
            <span class="humm-description">
                <span class="humm-main">with 5 fortnightly payments of <span class="humm-price">$23.99</span></span>
                <span class="humm-more-info">more info</span>
            </span>
        </a>
<!-- END oxipay -->
<div class="row collapse">

 

By changing "white-space:nowrap" to normal for ".humm-price-info-widget .humm-description .humm-main" it should allow the widget to wrap to the Foundation column div and resize with the browser.  I'm just having trouble finding how and when to modify the class style.

There will be similar code in the product page.

Edited by jasehead

Share this post


Link to post
Share on other sites
Posted (edited)

I guess I could try something like:

<script>
function wrapFunction() {
  var x = document.getElementsByClassName("humm-main");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.white-space = "normal";
  }
}
</script>

But where, how and when?  The widget needs to be injected and the page rendered first, right?

Unless the parent class white-space can be set to "normal" to prevent the child class from being changed to "nowrap".

Edited by jasehead

Share this post


Link to post
Share on other sites

Let's discuss where the CSS rules may be that you say are controlling the phrase contributed by the Humm javascript to be no-wrap.

How did you come to the conclusion that no-wrap is in effect?

Share this post


Link to post
Share on other sites
Posted (edited)

In Safari developer mode.  I start with the category web page by selecting the widget fortnightly payments text and right click to inspect element.  I have worked through different parts of the widget, and only the <span class="humm-main"> has any css that changes to how I want it to look, and that is by switching off "white-space:nowrap" for .humm-price-info-widget .humm-description .humm-main

I have tried some parent nodes but I can't change the text wrapping of the widget. Not seeing anything else that would change the test wrapping.

I am testing a category page with only one item though.

This is the injected CSS if you want to search for nowrap - seems to support "humm-main" as the class responsible:

.humm-more-info-widget{all:unset;display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid #a9a9a9;font-size:16px;color:#333;padding:8px 24px;overflow:hidden;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:proxima-nova,sans-serif;text-align:center;background-color:#f8faf7;position:relative}.humm-more-info-widget:hover{color:#333!important}.humm-more-info-widget .humm-inside{-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;max-width:900px;margin-left:auto;margin-right:auto}.humm-more-info-widget .humm-inside,.humm-more-info-widget .humm-inside .humm-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.humm-more-info-widget .humm-inside .humm-main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.humm-more-info-widget .humm-inside .humm-main .humm-text-area{all:unset}.humm-more-info-widget .humm-inside .humm-main .humm-text-area .humm-title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:35px;margin:26px 10px 26px 0;line-height:120%}.humm-more-info-widget .humm-inside .humm-main .humm-text-area .humm-title .humm-strong{font-weight:900}.humm-more-info-widget .humm-inside .humm-main .humm-text-area .humm-tandc{all:unset;display:block;text-align:center;font-size:10px;margin-top:-6px}.humm-more-info-widget .humm-inside .humm-logo{all:unset;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.humm-more-info-widget .humm-inside .humm-logo img{all:unset!important;height:85px!important}.humm-more-info-large-slices .humm-inside{padding-right:100px}.humm-more-info-large-slices .humm-inside img.humm-elephant{all:unset;height:160px!important;width:273px!important;margin-top:-8px;margin-bottom:-8px}.humm-more-info-large-slices .humm-inside .humm-logo{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.humm-more-info-large-slices .humm-inside .humm-logo img{all:unset;position:absolute!important;right:10px!important;bottom:10px!important;height:65px!important}@media screen and (max-width:665px){.humm-more-info-large-slices .humm-inside{padding-right:30px}.humm-more-info-large-slices .humm-inside .humm-main img.humm-elephant{margin-left:-24px!important;margin-right:-24px!important}.humm-more-info-large-slices .humm-inside .humm-main .humm-text-area .humm-title{font-size:30px}.humm-more-info-large-slices .humm-inside .humm-logo img{height:40px!important}.humm-more-info-small .humm-inside .humm-main .humm-text-area .humm-title{font-size:25px}}@media screen and (max-width:500px){.humm-more-info-large .humm-inside .humm-main .humm-text-area .humm-title{font-size:28px}.humm-more-info-large .humm-inside .humm-logo img{margin-left:-20px!important;height:70px!important}.humm-more-info-large-slices .humm-inside .humm-main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.humm-more-info-large-slices .humm-inside .humm-main img.humm-elephant{margin-left:auto!important;margin-right:auto!important}.humm-more-info-large-slices .humm-inside .humm-main .humm-text-area .humm-title{margin-top:10px;margin-bottom:32px;font-size:35px}.humm-more-info-large-slices .humm-inside .humm-logo img{height:40px!important}}.humm-more-info-small .humm-inside{max-width:1200px;padding-right:60px}.humm-more-info-small .humm-inside .humm-main .humm-text-area .humm-title{margin:0}.humm-more-info-small .humm-inside .humm-main .humm-text-area .humm-title>div{display:inline!important}.humm-more-info-small .humm-inside .humm-main .humm-text-area .humm-title .humm-strong{font-weight:900}.humm-more-info-small .humm-inside .humm-main .humm-text-area .humm-tandc{text-align:center;font-size:10px;margin-top:0}.humm-more-info-small .humm-inside .humm-logo{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;height:50px!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.humm-more-info-small .humm-inside .humm-logo img{height:50px!important;position:absolute!important;right:10px!important}.humm-more-info-mini{width:auto;max-width:430px;margin-left:auto;margin-right:auto}.humm-more-info-mini img{height:90px!important;width:100%!important}.humm-price-info-widget{all:initial;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:5px 0;font-family:proxima-nova,sans-serif;line-height:20px;color:#3d4246!important;text-decoration:none!important;border-bottom:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;overflow:hidden}.humm-price-info-widget img.humm-widget-logo{all:unset;display:inline-block;margin-right:8px;height:15px!important;float:none!important;width:auto;vertical-align:baseline}.humm-price-info-widget .humm-description{display:inline-block;font-size:16px;font-weight:300;vertical-align:baseline}.humm-price-info-widget .humm-description .humm-main{margin-right:6px;white-space:nowrap}.humm-price-info-widget .humm-description .humm-main .humm-price{font-weight:600;font-size:16px!important;display:inline-block;vertical-align:baseline}.humm-price-info-widget .humm-description .humm-more-info{display:inline-block;margin-top:-3px;text-decoration:underline;font-size:.7em;vertical-align:middle;white-space:nowrap;line-height:1.23}.remodal-close{color:#666}.remodal-close:hover{color:#333}#humm-banner-top,#humm-more-info-general{display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;border:1px solid #a9a9a9;font-size:16px;background:#fff;color:#333;padding:12px;overflow:hidden;text-decoration:none;box-sizing:border-box}#humm-banner-top .logo,#humm-more-info-general .logo{display:flex;flex:1 0 280px;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;border-right:1px solid #333}#humm-banner-top .logo img,#humm-more-info-general .logo img{max-width:180px}#humm-banner-top .title,#humm-more-info-general .title{display:flex;flex:2 1 auto;font-family:proxima-nova,sans-serif;font-weight:700;justify-content:center;flex-wrap:wrap;align-items:center;text-align:center;margin:0 0 0 20px;font-size:1.56em;line-height:135%}#humm-banner-top .title div,#humm-more-info-general .title div{display:inline-block;vertical-align:middle}#humm-banner-top .title #narrow-screen,#humm-more-info-general .title #narrow-screen{display:none}#humm-banner-top .title .light,#humm-more-info-general .title .light{font-family:proxima-nova,sans-serif}#humm-banner-top .orange-area,#humm-more-info-general .orange-area{display:flex;flex:1 0 256px;flex-direction:column;align-items:center;justify-content:center;width:176px;margin:0 auto}#humm-banner-top{max-width:1147px;margin-left:auto;margin-right:auto}#humm-banner-top .logo{flex:1 1 250px}#humm-banner-top .logo img{max-width:160px}#humm-banner-top .orange-area{flex:1 1 200px;width:176px}@media screen and (max-width:1100px){#humm-banner-top{font-size:12px}#humm-banner-top .orange-area{flex:1 1 200px;width:176px}}@media screen and (max-width:760px){#humm-banner-top .logo{flex:1 1 150px}#humm-banner-top .logo img{max-width:110px;margin-right:12px}#humm-banner-top .orange-area{display:none}}@media screen and (max-width:625px){#humm-banner-top{font-size:10.5px}#humm-banner-top .title{margin-left:8px}}@media screen and (min-width:596px)and (max-width:1196px){#humm-more-info-general{padding:32px}#humm-more-info-general .logo{width:50%;flex:1 1 auto}#humm-more-info-general .logo img{max-width:350px;margin-right:32px}#humm-more-info-general .placeholder{width:8%;flex:1 1 auto}#humm-more-info-general .title{display:block;width:42%;flex:1 1 auto;margin-left:0;text-align:left;font-size:30px}#humm-more-info-general .title div{display:block;white-space:nowrap}#humm-more-info-general .title #narrow-screen{display:block;margin-top:.5em}#humm-more-info-general #wide-screen{display:none}}@media screen and (max-width:595px){#humm-more-info-general{padding:32px;flex-direction:column;text-align:center;max-width:595px;min-width:300px;margin-left:auto;margin-right:auto}#humm-more-info-general #wide-screen{display:none}#humm-more-info-general #narrow-screen{display:block!important}#humm-more-info-general .logo{flex:0 0 auto;width:100%;padding:30px 0 50px;border-right:none;border-bottom:1px solid #333}#humm-more-info-general .logo img{width:90%;max-width:390px}#humm-more-info-general .title{display:block;font-size:32px;margin:3rem -15px 0}#humm-more-info-general .title div{display:block;margin:0 auto}#humm-more-info-general .title #narrow-screen{margin-top:1em;margin-bottom:.65em}}.more-info-btn{font-size:16px;font-family:proxima-nova,sans-serif;font-weight:700;color:#fff;background:#ff6c00;padding:0 2em;border-radius:15px;line-height:225%;display:inline-block;overflow:hidden;vertical-align:bottom}.remodal{background:transparent;padding:0;max-width:780px}#humm-modal-iframe,#humm-price-info-modal,#humm-price-info-more-modal{width:100%;height:500px;max-height:84vh;border:none}@media(max-width:500px){#humm-modal-iframe,#humm-price-info-modal,#humm-price-info-more-modal{height:84vh}}#humm-more-info-modal{width:100%;height:760px;max-height:84vh;border:none}@media(max-width:500px){#humm-more-info-modal{height:84vh}}a[data-remodal-target]{cursor:pointer}.humm-nowrap,.nowrap{white-space:nowrap}.humm-inline-block,.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}

The style sheet gets injected into the <head> before the meta classes.

Edited by jasehead

Share this post


Link to post
Share on other sites

Try this. Just before the </head> tag, add a <style> tag and put a CSS rule that says:

* { white-space:nowrap!important; }

The asterisk means everything and the !important overrules any other CSS rule that may have a higher specificity. Luckily, none of the humm rules use !important.

Share this post


Link to post
Share on other sites
Posted (edited)

I think you meant:

* { white-space:normal!important; }

So I tried this before the </head> tag in main.php, which did the trick:

<style>.humm-main { white-space:normal!important; }</style>

Thanks for your help! Problem solved.

Edited by jasehead

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...