mattt.pw

Being able to develop a full ecommerce site from scratch is something I would like to add to my skillset as soon as possible, and rather than dive straight in, I thought it best to start off with a more simple solution. This project uses a React storefront attached to Shopify, where we use Shopify both as a CMS and to manage the payment process.

I quite like the idea of using Shopify to handle the backend of an online store. Doing it this way we get the best of both worlds - we can build a lightening quick frontend exactly how we want it, while using Shopify's obvious expertise in handling the our inventory, variants and prices, and to also managing the payment process.

The project structure itself is simple enough. We have two pages, home and products, a cart and navbar component and our App component. We then use a shopContext.js file to manage our context and house all our functions. We then use the ShopProvider context as a wrapper to our app. Atomize design system is used to give us a 'tray-style' cart, plus it was a good chance to check-out a new React design system.

function App() {
    return (
        <ShopProvider>
            <StyletronProvider value={engine} debug={debug} debugAfterHydration>
                <Router>
                    <Navbar/>
                    <Cart />
                    <Switch>
                        <Route path="/product/:id">
                            <Product/>
                        </Route>
                        <Route path="/">
                            <Home/>
                        </Route>
                    </Switch>
                </Router>
            </StyletronProvider>
        </ShopProvider>
    );
}

For the cart we simply map through the checkout.lineItems provided to use by Shopify, and then link to the checkout URL to allow the user to finalise their purchase

 <Anchor href={checkout.webUrl} target="_blank">Checkout</Anchor>