Faster store

gatsby-browser.js

@@ -1,2 +1,5 @@
 import '@fontsource/montserrat';
 import '@fontsource/montserrat/700.css';
+import CombinedProvider from './src/context/CombinedProvider';
+
+export const wrapRootElement = CombinedProvider;

gatsby-config.js

@@ -18,6 +18,13 @@ module.exports = {
                 environment: process.env.CONTENTFUL_ENV,
             },
         },
+        {
+            resolve: 'gatsby-source-shopify',
+            options: {
+                storeUrl: process.env.SHOPIFY_STORE_NAME,
+                password: process.env.SHOPIFY_ADMIN_ACCESS_TOKEN,
+            },
+        },
         'gatsby-plugin-postcss',
         'gatsby-plugin-sass',
         'gatsby-plugin-image',

gatsby-node.js

@@ -1,4 +1,5 @@
 const fetch = require('node-fetch');
+const path = require('path');
 
 // Create source nodes
 exports.sourceNodes = async ({
@@ -93,6 +94,26 @@ exports.createPages = async ({ actions, graphql }) => {
                     }
                 }
             }
+            allShopifyProduct {
+                edges {
+                    node {
+                        title
+                        handle
+                        variants {
+                            shopifyId
+                            image {
+                                src
+                            }
+                        }
+                        priceRangeV2 {
+                            maxVariantPrice {
+                                amount
+                            }
+                        }
+                        description
+                    }
+                }
+            }
         }
     `);
 
@@ -117,6 +138,7 @@ exports.createPages = async ({ actions, graphql }) => {
 
     data.allContentfulHomePage.edges.forEach((edge) => {
         const { slug } = edge.node;
+        console.log('here is the slug', slug);
         actions.createPage({
             path: slug,
             context: {
@@ -169,4 +191,16 @@ exports.createPages = async ({ actions, graphql }) => {
             component: require.resolve('./src/templates/pokemon.js'),
         });
     });
+
+    // Iterate over all products and create a new page using a template
+    // The product "handle" is generated automatically by Shopify
+    data.allShopifyProduct.edges.forEach(({ node }) => {
+        actions.createPage({
+            path: `/products/${node.handle}`,
+            component: path.resolve(`./src/templates/product.js`),
+            context: {
+                product: node,
+            },
+        });
+    });
 };

gatsby-ssr.js

@@ -0,0 +1,2 @@
+import CombinedProvider from './src/context/CombinedProvider';
+export const wrapRootElement = CombinedProvider;

package.json

@@ -43,8 +43,10 @@
         "gatsby-plugin-sharp": "^4.9.1",
         "gatsby-source-contentful": "^7.7.2",
         "gatsby-source-filesystem": "^4.9.1",
+        "gatsby-source-shopify": "^7.13.0",
         "gatsby-transformer-sharp": "^4.9.0",
         "husky": "^8.0.1",
+        "isomorphic-fetch": "^3.0.0",
         "node-fetch": "^2.6.7",
         "postcss": "^8.4.12",
         "prop-types": "^15.8.1",
@@ -53,6 +55,8 @@
         "react-dom": "^17.0.1",
         "react-helmet": "^6.1.0",
         "sass": "^1.49.9",
+        "shopify-buy": "^2.17.1",
+        "styled-components": "^5.3.6",
         "tailwindcss": "^3.0.23",
         "yup": "^0.32.11"
     },

src/components/PrimaryButton.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+const PrimaryButton = ({ text, onClick, disabled = false }) => {
+    return (
+        <ButtonWrapper onClick={onClick} disabled={disabled}>
+            <Title>{text}</Title>
+        </ButtonWrapper>
+    );
+};
+
+export default PrimaryButton;
+
+const ButtonWrapper = styled.button`
+    background: #014c40;
+    border: none;
+    border-radius: 30px;
+    height: 40px;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20px;
+    cursor: pointer;
+    :hover {
+        transform: scale(1.2);
+        transition: 0.2s;
+    }
+    :disabled {
+        background: rgba(1, 76, 64, 0.5);
+        transform: none;
+        cursor: not-allowed;
+    }
+`;
+
+const Title = styled.p`
+    margin: 0;
+    font-weight: 600;
+    font-size: 12px;
+    color: #ffffff;
+`;

src/components/ProductCard.js

@@ -0,0 +1,100 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+import { navigate } from 'gatsby-link';
+import useStore from '../context/StoreContext';
+
+const ProductCard = ({ product }) => {
+    const { addVariantToCart } = useStore();
+    return (
+        <Wrapper>
+            <AddButton onClick={() => addVariantToCart(product, 1)}>
+                <p>+</p>
+            </AddButton>
+            <ContentWrapper onClick={() => navigate(`${product.handle}`)}>
+                <Image src={product.variants[0].image.src} />
+                <TextWrapper>
+                    <Title>{product.title}</Title>
+                    <Price>
+                        {product.priceRangeV2.maxVariantPrice.amount}$
+                    </Price>
+                </TextWrapper>
+            </ContentWrapper>
+        </Wrapper>
+    );
+};
+
+export default ProductCard;
+
+const Wrapper = styled.div`
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    width: 200px;
+    border-radius: 20px;
+
+    gap: 10px;
+    cursor: pointer;
+    position: relative;
+    box-shadow: 0px 20px 40px rgba(52, 53, 99, 0.2),
+        0px 1px 3px rgba(0, 0, 0, 0.05);
+`;
+
+const ContentWrapper = styled.div``;
+
+const Image = styled.img`
+    width: 200px;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 20px;
+    margin: 0;
+`;
+
+const TextWrapper = styled.div`
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    border-radius: 0 0 20px 20px;
+    background: rgba(255, 255, 255, 0.2);
+    width: 200px;
+    padding: 10px 0;
+    backdrop-filter: blur(40px);
+`;
+
+const Title = styled.p`
+    font-weight: 600;
+    text-align: center;
+    margin: 0;
+    color: #014c40;
+`;
+
+const Price = styled.p`
+    font-weight: normal;
+    text-align: center;
+    margin: 0;
+`;
+
+const AddButton = styled.div`
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: #014c40;
+    padding: 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :hover {
+        transform: scale(1.2);
+        transition: 0.2s;
+    }
+
+    p {
+        margin: 0;
+        color: white;
+        font-weight: bold;
+    }
+`;

src/components/ProductRow.js

@@ -0,0 +1,56 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+const ProductRow = ({ item }) => {
+    const { product, quantity } = item;
+
+    return (
+        <Wrapper>
+            <ProductWrapper>
+                <Image src={product.images[0]?.src} alt={product.title} />
+                <Subtitle>{product.title}</Subtitle>
+            </ProductWrapper>
+            <Subtitle>{quantity}</Subtitle>
+            <DeleteButton onClick={() => console.log('Remove item')}>
+                Remove
+            </DeleteButton>
+        </Wrapper>
+    );
+};
+
+export default ProductRow;
+
+const Wrapper = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 330px);
+    gap: 20px;
+    align-items: center;
+    width: 330px;
+`;
+
+const ProductWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 80px auto;
+    gap: 20px;
+    align-items: center;
+    width: 330px;
+`;
+
+const Image = styled.img`
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 20px;
+`;
+
+const Subtitle = styled.p`
+    font-weight: bold;
+    font-size: 14px;
+`;
+
+const DeleteButton = styled.p`
+    color: #a61b2b;
+    font-size: 14px;
+    cursor: pointer;
+`;

src/context/CombinedProvider.js

@@ -0,0 +1,10 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { StoreProvider } from './StoreContext';
+
+const CombinedProvider = ({ element }) => {
+    return <StoreProvider>{element}</StoreProvider>;
+};
+
+export default CombinedProvider;