Configuration parameter

binderFormatters

A configuration parameter which lets you define custom formatters to use with the data-ajax-cart-bind attribute.

Code example

For example, if you use the option_selection.js Shopify asset and its Shopify.formatMoney function, you can specify your own formatter for money related values. Use the conf method of the liquidAjaxCart object to do this:

liquidAjaxCart.conf('binderFormatters', {
  'my_formatter': value => {
    // Don't change anything if the value is not a number
    if (typeof value !== 'number' && !(value instanceof Number)) {
      return value;
    }

    // Apply formatMoney function if it exists
    if (window.Shopify?.formatMoney) {
      return Shopify.formatMoney(value);
    }

    // Fallback to the "100 USD" format if there is no Shopify.formatMoney
    return `${ value.toFixed(2) } ${ window.liquidAjaxCart.cart.currency }`;
  }
});

Applying the filter:

<span data-ajax-cart-bind="total_price | my_formatter">
  {{ cart.total_price | money_with_currency }}
</span>