Implementing multicurrency on manifesto

Ask us anything How do I?
1

Hey folks, I’ve managed to get everything in place to ship internationally, and I’d like to be able to use multicurrency for my website for GBP, Euro, USD, CAD, and AUD.

Ideally I’d like the currency automatically selected based on where the user is located, but having a way for users to select currency would also be a good idea

Any chance it’s possible to bind multiple price fields for currencies from airtable to the snipcart button?

How would I create the drop down for the currencies?

Should I follow the snipcart guide in regards to setting multicurrency in the header?

1 Like
2

Additionally, is there a way to display content based on where a user is located?

3

So I’ve managed to get multicurrency working as it should, the only thing I can’t figure out is how to dynamically change the price on products based on the selected currency. If anyone can help out with this I’d be very happy!

4

Hey Alexander :wave:

It’s not possible to display different data according to a user location at the moment. Feel free to add the feature here: https://feedback.weweb.io/

5

I’ll check that with @Kevin and come back to you!

1 Like
6

Hi Alexander @manifesto !

Yes, unfortunately we don’t offer the possibility to have conditional on location yet.

About the multi-currency I’m curious how you managed to implement it!

I’ll see how we can make the currency display dynamic. I’m very busy this week, so I’ll come back to you early next week!

7

No worries!

It was pretty straightforward in the end. I followed Snipcarts video on adding multicurrency which meant removing the reference to currency in the div, adding a currency selector drop-down and adding the following script:

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

To get the prices working I checked your github files for your Snipcart plugin to make sure the price field was a string instead of number and then changed my airtable to a concatenate formula taking the different currency prices from other fields
CONCATENATE('{"gbp": ',{Small Price (GBP)},', ', '"usd": ',{Price (USD)},', ', '"cad": ',{Price (CAD)},', ', '"eur": ',{Price (EUR)},', ', '"aud": ',{Price (AUD)},'}')
and returning a string like this: {“gbp”: 7.4, “usd”: 11.1, “cad”: 14.4, “eur”: 10.4, “aud”: 15.5}
to reference in the price field and which is readable by Snipcart.

I figure the easiest way to make the display prices change according to the selected currency is to have different divs with the prices taken from airtable all set to hidden and add to the Snipcart script to show and hide the divs according to the selected currency from the drop down… Charles from Snipcart also suggested this could be used to get the currently selected currency on their forum const currency = Snipcart.store.getState().cart.currency; but my Javascript knowledge isn’t strong enough to figure out how to put it together, but I’m guessing that would be a similar script, but without needing to reference the drop down select.

If it can be done in a way where any divs with a class of “currency-usd” would show when USD (for example) is selected then I can also display country specific info to users beyond just the correct price.

I’m also trying to figure out if I can work Geotargetly into it somehow so I can have the correct currency displayed based in the users IP location automatically.

1 Like
8

Done!

This in the head code:

<style>
      .price-gbp {
        display: none;
      }
      .price-eur {
        display: none;
      }
      .price-usd {
        display: none;
      }
      .price-aud {
        display: none;
      }
      .price-cad {
        display: none;
      }
</style>

Divs with any currency specific content are classed with “class1 class2-currency” or “price price-gbp” for example. This includes shipping info or prices, and means if I have a product I don’t sell to other countries I can simply class it’s buy button accordingly.

Then this in the body of the site:

<script>
    document.addEventListener("snipcart.ready", () => {
      const currencyPicker = document.getElementById("currency-picker");
      Snipcart.store.subscribe(() => {
        const state = Snipcart.store.getState();

        const currency = Snipcart.store.getState().session.settings.currency;
        currencyPicker.value = currency;

        document.querySelectorAll(`.price`).forEach((p) => {
          if (p.classList.contains(`price-${currency}`)) {
            p.style.display = "block";
          } else {
            p.style.display = "none";
          }
        });
      });

      currencyPicker.addEventListener("change", (ev) => {
        const val = ev.target.value;
        Snipcart.api.session.setCurrency(val);
      });
    });
  </script>
1 Like
9

Hi Alexander @manifesto !

It’s really impressive how well you did!
Thanks for your explanations :grin:
I’m working on some things that would make it easier to manage all this, without the need of scripts.

I’ll let you know asap

10

Awesome! I look forward to it!

11

Hi @manifesto !

Sorry I didn’t let you know sooner!
As you know we will release new webapp features at the end of September.

With these new features, it will be possible to make the conditional display you are looking for. This will be better than a temporary specific element!

1 Like