Multi-Currency?

Support
#1

Hi

I’m trying to set up the multi-currency toggle, but can’t seem to get it to work… Here’s what I have.

In my header I’ve got this select

<select id="currency">
  <option value="gbp">GBP</option>
  <option value="usd">USD</option>
  <option value="eur">EUR</option>
</select>

I’ve found the demo website and lifted this code, I’ve added this to the footer.

<script>
    Snipcart.subscribe('cart.ready', function() {
      $('#currency').val(Snipcart.api.getCurrentCurrency());
    });
    
    Snipcart.subscribe('currency.changed', function (currency) {
      $('#currency').val(currency);
    });
    
    $(function() {
      $('#currency').change(function () {
        Snipcart.api.setCurrency($(this).val());
      });
    });
  </script>

I’ve made sure I’ve added the extra currencies to the Snipcart dashboard, saved changes.

My HTML for the snipcart-total-price span is blank

<button class="snipcart-checkout">
    <span class="btn-flex">
      <span class="icon left">{{ partial:_global/icons/shop-cart }}</span>
        <span class="btn-txt snipcart-total-price"></span>
      <span class="icon right"><span class="snipcart-items-count">0</span></span>
    </span> 
  </button>

The cart works, but the I can’t get the currency to update?

What am I doing wrong?

#2

Ok, I’ve managed to get this work…

Here’s my toggle

<select id="currencies">
  <option value="gbp">GBP</option>
  <option value="usd">USD</option>
  <option value="eur">EUR</option>
</select>

My button has these values

data-item-price='{"usd": 20.00, "gbp": 30.00, "eur": 25.00}'

I had to pause the YouTube video in the docs and write this script out by hand? It’d be very useful if this was in the docs so it could be easily copy and pasted.

<script>

    document.addEventListener('snipcart.ready', () => {
        const select = document.getElementById('currencies');

        select.addEventListener('change', () => {
            Snipcart.api.session.setCurrency(select.value);
        });

        Snipcart.store.subscribe(updateSelectedCurrency);
    });

    function updateSelectedCurrency() {
        const state = Snipcart.store.getState();
        const currency = state.cart.currency;

        document.getElementById('currencies').value = currency;

    }
    
  </script>

Hope this helps someone else.

2 Likes
#3

The tutorial did not have values within their select menu resulting in it not being populated correctly. Thank you for sharing this, it would have taken me a while to consider that.

I cannot get mine working when navigating between pages though. The currency defaults to the main currency, any ideas?