Dynamic Notice

Adds a possibility to display some data like regular and non option variables values as well as perform virtually any operations with these data by using JS code.


To display data use these tags: {{{ and }}}.


Width: {{{data.uni_cpo_width}}} cm

or with special helpers (more info below):

Width: {{{data.asNumber(uni_cpo_width, 3)}}} cm

data JS object contains all the data available, so you have to put it before the actual name of a variable. Just like in the example above. If some variable simply does not exist (for instance, you made a typo) or just does not available at the moment (for instance, some NOV is not available before AJAX request for price calculation has been made), then nothing will be displayed. There will not be any errors too.

To use JS expressions put them in these tags: {# and #}.

{# if (typeof data.uni_cpo_width !=== 'undefined' && data.uni_cpo_width > 100) { print 'The width is too big!'; } #}

Helper methods

We have added some useful helper methods for the data object variables. Using these helpers you can easily format the output as you wish it. These methods are:

  • checkExistance - to be used in JS code; return true or false depending on whether a variable exists or not;

  • getLabel - outputs option's label

  • getSuboptionLabel - outputs suboption's label

  • asPrice - outputs a numeric value formatted as price (two signs after the dot)

  • asNumber - it has a second argument for precision (the number of signs after the dot); outputs a numeric value formatted according to the precison given


  1. In Dynamic Notice you can display any regular or non option variable (please, note that NOVs are available only after the AJAX request for price calculation has been made)

  2. Also these variables:

    • price - a nicely formatted calculated product price;

    • raw_price - price to be used in JS expressions;

    • price_suffix - a nicely formatted price with taxes;

    • raw_price_tax_rev - price with taxes to be used in JS expressions;

    • currency - currency symbol;

    • currency_code - currency code;

    • raw_price_discounted - raw price discounted (cart discounts, if any);

    • price_discounted - price discounted (cart discounts, if any);

    • quantity - value from WC quantity field OR custom option that is used as the product qty field;

    • total - a nicely formatted total;

    • total_discounted - a nicely formatted total that is using price discounted

    • raw_total - total value to be used in JS expressions;

    • raw_total_tax_rev - total with taxes to be used in JS expressions;

    • total_suffix - a nicely formatted total with taxes;

Some more use cases

If you have your own qty Option and would like to calculate total based on this Option's value:

{{{ parseFloat(data.uni_cpo_qty*data.raw_price).toFixed(2) }}}

This piece of code uses two JS functions: parseFloat() and toFixed(). You have to be familiar with JS and their functions prior using them in Dynamic Notice.

Another example. Basically, it does the same, but allows to bind our total value to JS variable and then re use it everywhere. This is our variable creation:

{# var myTotal = parseFloat(data.uni_cpo_qty*data.raw_price); #}

Now let's use it this and there:

{{{ myTotal.toFixed(2) }}} or {{{ myTotal.toFixed(0) }}} (this code makes a whole number)

Another example: outputting some option's numeric value in the same way as the price (the old way):

{{{ parseFloat(data.raw_price).toFixed(2) }}}

The same in the new way - with helper methods:

{{{ data.asPrice('raw_price') }}}

Displaying the chosen suboption's label

{{{ data.getSuboptionLabel('uni_cpo_measurement_unit') }}}

It wasn't possible to do before as variable 'data.uni_cpo_measurement_unit' holds suboptions slug which might be just 'm'. At teh same time this suboption's label might be 'Metres' and this is what you are trying to display.

One more example: displaying some numeric values with three signs after the dot:

{{{ data.asNumber('uni_cpo_sqm', 3) }}}

Last updated