Currency switcher with next.js

javascript
currencies

#1

I have a test Moltin store with GBP, EUR and USD and a few products on the store with the prices setup in these currencies.

I cannot find anywhere in docs.moltin.com that talks about switching currency. Is this an API thing or can I set something in my next app to get the correct currency.

(sorry if this is a dumb question, i’m new to react/next/moltin)


#2

Hi @wrux

When you create a product, you can add multiple prices per currency.

When you make a request to get your product, you’ll get in the response the prices array.

"price": [{
  "amount": 5891,
  "currency": "USD",
  "includes_tax": true
}]

You could on the frontend have a global currency that can control what price is displayed. You’d still have to set a default price for SSR support.


#3

Thaknks for the reply.

With regards to creating a switcher, what is the best way to do this? I don’t think I understand fully the basics of React so I think i’m missing something here.

I can set: localStorage.getItem('customerCurrency') and then change this value when the user clicks EUR/USD/GBP but I guess this isn’t the best way to do it.

Can you give some recommendations on the best way to create the switcher?

I have uploaded my code to here & there’s probably loads of stupid mistakes and bad code but i’ve only been usiing react for about 10 days now:

https://bitbucket.org/wrux/mech/src/master/


#4

Hi @wrux

You’ll want to avoid using localStorage if you wish server render your products in multiple currencies.

If you’re new to React, without going into too much detail I’d recommend that you looked at how i18n is handled with Next.js - The repo below should help…

The concept is pretty much the same but for simplicity sake in regards to currency, I’d store this in Redux and then adjust my views to display the correct price.

If you have the following global state:

{
  "selectedCurrency": "EUR"
}

You could in your view do something like…

prices.find(price => price.currency === "EUR").amount

You can see how Redux works with Next.js in the example below

I hope this helps :smile:


#5

honestly have no idea how to implement Redux into my application. The example you posted don’t include express.js so for me to implement something like that into my app isn’t possible with what I know. Also from looking on Google there really isn’t much about this.


#6

I’m not having much luck with adding redux & i can’t seem to find any decent tutorials on adding it to express/next. Do you know anywehre I can look for decent tutorials/


#7

Hi @wrux

Express.js would be used to render your Next.js application but it’s not required unless you want to change the way your URL structure works with Next.

I’d suggest taking a look at the withRedux repo.

If you’re not familiar with Redux, I’d also recommend you check out this short video course.

https://egghead.io/courses/building-react-applications-with-idiomatic-redux

I also wrote last year a tutorial which covers some basic Redux functionality (increment/decrement) numbers with a button. This may help you understand how it all connects together.

:slight_smile:


#8

@wrux

I’ve quickly created an example using ExpressJS that demonstrates how to talk to Moltin with NodeJS.


#9

Ok I think I understand more now. So I use redux instead of expressjs?


#10

@wrux Yeah.

While Redux can be used server side with ExpressJS, you’re using it in your case to manage the state inside your application.

You’ll want to dispatch an action (e.g. Change global currency, and send along a param with the currency value). Then your reducer will update the currency state, and your components will update too.

:smile:


#11

Thanks for that. I have managed to move to redux, create a currency switcher and output using the correct currency!!

I have a few questions about this:

  1. In the cart items response I don’t have price but instead just unit_price which is in the default currency. Is there a good solution fo getting all currencies for that?
  2. I pushed my code to heroku to test but now i’ve added redux I think it’s broken the startup scrips. Should "start": "next start", still be the start script? Also do I have to tell it to use _app.js somewhere?
  3. Can you recommend a good way so that the selected currency state is persistent once you have reloaded the page?

#12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.