QuoteWerks Support Portal

------------------------

Hi Michelle,

Try this:

Note the 'canHide' class

<tr class="row-shipping">
  <td class="col-description">
    Shipping:
  </td>
  <td class="col-amount canHide">
    1
  </td>
</tr>

This goes in your customizations.js

It basically looks for any row with 'canHide' class and then checks if the value of that cell is zero.

if it is, then it hides the entire row.

var matches = document.querySelectorAll("td.canHide");
    for(var value of matches.values()) {
        if (value.innerText == "0") {
            var Obj = value.parentNode;
            Obj.style.display='none';
        }
    }

One thing to watch out for is that I've just used '0' for now, you'll have to check what the page actually renders (use something like firebug, or if you're in Chrome press F12 and use the inspector) and then type that instead of '0'

For example, if when you have zero value in shipping amount cell the QV page shows '$0.00' then you'll have to make the Javascript look the same instead of just '0'

I've put it in to a JS Fiddle so you can play around with it too.. https://jsfiddle.net/op9wumdz/19664/

on another note, it's worth mentioning that when you're using Javascript, it's 'client side' - basically meaning all the elements of the page have been rendered by the browser.

So, things like [DH_AlternateShippingAmount:f=1] aren't 'seen' in Javascript, as the browser has rendered them and replaced them with the actual values.

Thanks Barry. I've got it working in Fiddle with:

var matches = document.querySelectorAll("td.canHide");
    for(var value of matches.values()) {
        if (value.innerText == "£0.00" || value.innerText == "€0.00" || value.innerText == "$0.00") {
            var Obj = value.parentNode;
            Obj.style.display='none';
        }
    }

 and

<tr class="row-shipping">
  <td class="col-description">
    Shipping:
  </td>
  <td class="col-amount canHide">
    $1.00
  </td>
</tr>

 But it doesn't work when I add this into the customizations.js and the QuoteValet template...

Hi Michelle,

Unfortunately i don't use the Shipping lines like that in my template, so can't check how the value is presented onscreen at the moment... 

Try using the below in the customizations.js (note the added console.log line)

var matches = document.querySelectorAll("td.canHide");
    for(var value of matches.values()) {
    		console.log(value.innerText);
        if (value.innerText == "0") {
            var Obj = value.parentNode;
            Obj.style.display='none';
        }
    } 

  Then open up your quote in the browser and take a look at the console (F12 on Chrome then there's a 'console' tab).

Make sure that value is what you're expecting to see (i.e $0.00)

Whatever the value in the console is, is what you need to be using to match in your JS.

Hi Michelle,

Just managed to grab a few minutes to look at it properly... it works for me.

One thing you'll have to check though in your HTML is that you're using [DI_AlternateShippingAmount] rather than the default [DI_ShippingAmount].

Otherwise your quote will always show the default currency, rather than changing dynamically with the Currency selector in the 'Sale Info' tab.

Hi Barry,

Thanks for your help.

I do now have it working but we had to make sure the call to the function was referenced after the shipping row was rendered on the page.

I'm not sure if there is a more elegant way to do this other than just adding the tag just before the closing body tag?

when you say 'call to function' ? do you mean the <script> tags in the html?

That's one thing as default which is kind of wrong in the QV HTML template.

JS should be called at the end of the file, so that the browser can process everything before any JS tries running.

Otherwise you have to check in your JS file that the page is ready prior to running anything.

Yes, we have now wrapped the script above into a function in the customizations.js file, and then added <script> tags to reference that function at the end of the QV template page.

Ok, so I've now found that this is working perfectly in Chrome, Firefox & Opera but it is ignored in Microsoft Edge. Any ideas where to start with this one?

Just to share, I have resolved this in a round-about way. It seems, for some reason, IE Edge didn't like matching to the currency symbols in the .js file.

So I now have, this in the HTML: (note the new hidden table cell containing DH_AlternateShippingAmount] without the f:1, which is outputted as just 0 without the currency symbol)

        <tr class="row-shipping">
            <td class="col-description">
                Shipping:
            </td>
            <td class="canHide" style="display:none">
                [DH_AlternateShippingAmount]
            </td>
            <td class="col-amount">
                [DH_AlternateShippingAmount:f=1]
            </td>
        </tr>

  And my .js is now just matching the 0:

// JavaScript Document
function hideZeroValueItems()
{
var matches = document.querySelectorAll("td.canHide");
    for(var value of matches.values()) {
    		console.log(value.innerText);
        if (value.innerText == 0) {
            var Obj = value.parentNode;
            Obj.style.display='none';
        }
    }
}

 All the browsers seem to be happy with that. I need a lie-down! :-/