Gatsby JS & Shopify: Gatsby ecommerce sites [Gatsby 2022]

Description

In this course, you will :

• Learn Gatsby
• Learn how to use Shopify
• GraphQL is used to query Shopify data from Gatsby.
• Using Gatsby and GraphQL, create a fully functional e-commerce site.
• To style our site, we will use React styled components.
• Creating a responsive e-commerce layout that is mobile-first.
• Create a dynamic cart and inventory check for our products.

Syllabus :

1. Introduction & Setup

• Gatsby & Shopify Overview
• Set up Gatsby project
• Gatsby project starter files walkthrough
• Set up Shopify & importing example products
• Disable Shopify real-life payments + enable bogus payments
• Collections in Shopify
• Set up API keys in Shopify & connect to Gatsby
• Query Shopify data using GraphiQL

 

2. Building the product pages

• Query Shopify data from Gatsby & generate pages from product data
• Start building the product template
• Querying for a specific Product using page queries
• Introduction to styled components

 

3. Building the image gallery

• Introduction to images in Gatsby
• Creating the ImageGallery component
• Creating and rendering the ImageThumbnail components
• Implementing active thumbnail feature

 

4. Dynamically querying data

• Introduction to CartContext and calling the shopify API dynamically
• Rendering the product variants
• Rendering the variant price
• Implementing routing for variants
• Change the image thumbnail on variant selection
• Hide variants if only 1 variant

 

5. Building the cart functionality

• Creating the ProductQuantityAdder component
• Add logic to the ProductQuantityAdder
• Creating the Header component
• Implement the add to cart functionality
• Display the number of items and total price in header

 

6. Building the 'Your Cart' page

• Link to the cart page
• Creating the page and rendering our cart items
• Styling the cart items
• Adding the quantity adjuster buttons
• Adding the delete button

 

7. Building the homepage

• Adding collections data
• Querying collections from homepage
• Rendering collections grid
• Styling the collections tiles
• Styling the sale tile
• Rendering the featured products
• Styling the featured products grid
• Finishing the product tiles

 

8. Building the all products page

• Creating the all-products page and rendering the filters
• Styling the filters and creating the Checkbox component
• Creating the Category filter checkbox functionality
• Implement select / deselect multiple category filters
• Rendering products

 

9. Creating the search functionality

• Creating the search component
• Implementing the search filter via URL
• Add the search filter logic for the products

 

10. Finishing touches

• Implementing the checkout
• Add "shop now" buttons to the homepage collection tiles
• Add a homepage logo link
• SEO

 

11. Deploy live site on Netlify

• Deploy to netlify
• Automatic re-build whenever shopify content changes
• Extending auto rebuild - intro to faunadb
• Netlify functions

Show more