Write a small app that renders a product image along with a sidebar with alternative images for that product. Clicking a product image on the side should change the main image. You can find this pattern on our website product page https://en.fromrachel.com/products/scalloped-over-the-knee-tights. An array of images url to render was added to /task1/index.js
To help you out the project scalfholding with bundling, babel (ES6-ES7) and hot module reloading was already done to get started just run in /task1
npm install
To view your app run
npm run start
From Rachel has multiple subdomains for its localized stores. The subdomains are
en.fromrachel.com
en-ca.fromrachel.com
en-us.fromrachel.com
fr.fromrachel.com
fr-ca.fromrachel.com
fr-fr.fromrachel.com
However, Shopify does not provide methods to control the route and or redirect users dynamically to different urls at the server level. How will we make sure that a visitor going to fromrachel.com
will be redirected to the right localized subdomain?
We can setup a proxy in front of Shopify to be able to manipulate the request before it reaches the Shopify servers.
To do this, we use Cloudflare Worker. Workers are built using the web workers specifications and run on Cloudflare servers instead of the browser. They can be used to process any incoming requests. We’ll use them to direct our traffic to the right subdomain.
Write a simple Cloudflare Worker that will redirect traffic on fromrachel.com
to the appropriate country AND language (locale) for this specific user. For example, if you visit fromrachel.com
while in Canada and your browser is in English I should be redirect to en-ca.fromrachel.com
. However, if you visit from the US but your language is French, I should then be redirected to fr.fromrachel.com
. Request path and search params should also be preserved with the redirect. If you request fromrachel.com/pages/subscribe?coupon=test
from Canada in english you should be redirected to en-ca.fromrachel.com/pages/subscribe?coupon=test
- Your file should be copy pastable in the Worker Preview page here: https://cloudflareworkers.com/
- You should output a single javascript file, either by working off a single file or bundling your files.
- You can write your code in any flavor or super set of Javascript you would like.
Tip:
- Using https://cloudflareworkers.com/
testing
tab you can set manual / mock request headers. That will be very helpful to test your solution. - There could be multiple possible eligible subdomains for a given user, your solution should pick the best one.
In the questions.md
answer the following questions
You will be evaluated on:
- The quality of your solution/code
- Your understanding of the different tools & systems at play
- Your usage of best practices
- The quality of your answers
If you have any questions, I’ll be available for the duration of your test.
Good luck!