Jump to content

Change CSS of price widget


jasehead

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.

Link to comment
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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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".

Link to comment
Share on other sites

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.

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...