Products
13 |
13 |
19 |
28 |
37 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/navigation.jsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery, Link } from "gatsby"
2 | import * as React from "react"
3 | import slugify from "@sindresorhus/slugify"
4 | import { navStyle, navLink, activeLink } from "./navigation.module.css"
5 |
6 | export function Navigation({ className }) {
7 | const {
8 | allShopifyProduct: { productTypes },
9 | } = useStaticQuery(graphql`
10 | {
11 | allShopifyProduct {
12 | productTypes: distinct(field: { productType: SELECT })
13 | }
14 | }
15 | `)
16 |
17 | return (
18 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/footer.module.css:
--------------------------------------------------------------------------------
1 | .footerStyle {
2 | padding: var(--space-2xl) var(--space-xl);
3 | gap: var(--space-xl);
4 | display: grid;
5 | grid-template-columns: 1fr;
6 | text-align: center;
7 | color: var(--text-color-secondary);
8 | margin-top: var(--space-3xl);
9 | }
10 |
11 | .logos {
12 | display: flex;
13 | gap: var(--space-md);
14 | justify-content: center;
15 | padding-bottom: var(--space-lg);
16 | }
17 |
18 | .blurb {
19 | font-size: var(--text-sm);
20 | }
21 |
22 | .copyright {
23 | color: var(--text-color-secondary);
24 | font-size: var(--text-xs);
25 | }
26 |
27 | .footerNavList {
28 | display: flex;
29 | flex-direction: column;
30 | font-size: var(--text-md);
31 | }
32 |
33 | .footerNavListItem {
34 | align-items: center;
35 | display: flex;
36 | flex-direction: column;
37 | flex: 0 0 100%;
38 | white-space: nowrap;
39 | }
40 |
41 | .links ul {
42 | flex-direction: column;
43 | font-size: var(--text-md);
44 | }
45 |
46 | .links li {
47 | flex-direction: column;
48 | align-items: center;
49 | }
50 |
51 | .links a {
52 | padding: var(--space-md);
53 | }
54 |
--------------------------------------------------------------------------------
/src/icons/filter.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | function FilterIcon(props) {
4 | return (
5 |
19 | )
20 | }
21 |
22 | export default FilterIcon
23 |
--------------------------------------------------------------------------------
/src/components/filters.module.css:
--------------------------------------------------------------------------------
1 | .priceFilter {
2 | display: grid;
3 | }
4 |
5 | .priceFilterStyle {
6 | display: flex;
7 | }
8 |
9 | .priceFilterStyle label {
10 | cursor: pointer;
11 | margin-top: 2px;
12 | }
13 |
14 | .priceFilterStyle .summary {
15 | cursor: pointer;
16 | font-weight: var(--bold);
17 | text-transform: uppercase;
18 | display: flex;
19 | align-items: center;
20 | justify-content: space-between;
21 | padding-bottom: var(--space-md);
22 | font-size: var(--text-xs);
23 | letter-spacing: var(--tracked);
24 | }
25 |
26 | .priceFilterStyle summary::marker {
27 | color: transparent;
28 | display: none;
29 | }
30 |
31 | .priceFilterStyle summary::-webkit-details-marker {
32 | display: none; /* hide the summary arrow on safari */
33 | }
34 |
35 | .priceFilterStyle summary {
36 | list-style: none;
37 | }
38 |
39 | /* "Price" reset button */
40 | .clearButton {
41 | color: var(--text-color-secondary);
42 | font-size: var(--text-sm);
43 | line-height: var(--solid);
44 | }
45 |
46 | .priceFields {
47 | display: grid;
48 | align-items: center;
49 | justify-content: stretch;
50 | gap: var(--space-sm);
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/toast.module.css:
--------------------------------------------------------------------------------
1 | .toastWrapper {
2 | background-color: var(--primary);
3 | color: var(--text-color-inverted);
4 | width: max-content;
5 | position: absolute;
6 | right: var(--space-xl);
7 | bottom: 0;
8 | padding: var(--space-md) var(--space-lg);
9 | font-size: var(--text-xs);
10 | font-weight: var(--semibold);
11 | border-radius: var(--radius-rounded);
12 | display: flex;
13 | flex-direction: row;
14 | align-items: center;
15 | gap: var(--space-sm);
16 | min-width: 100px;
17 | justify-content: center;
18 | z-index: 10;
19 | white-space: nowrap;
20 | }
21 |
22 | @keyframes showing {
23 | 0% {
24 | transform: translateX(200px);
25 | opacity: 0;
26 | }
27 | 50% {
28 | transform: translateX(0);
29 | opacity: 1;
30 | }
31 | 100% {
32 | transform: translateX(0);
33 | opacity: 1;
34 | }
35 | }
36 |
37 | @keyframes hiding {
38 | 50% {
39 | transform: translateX(200px);
40 | opacity: 0;
41 | }
42 | 100% {
43 | transform: translateX(200px);
44 | opacity: 0;
45 | }
46 | }
47 |
48 | .hiding {
49 | animation: hiding 1s ease;
50 | }
51 |
52 | .showing {
53 | animation: showing 1s ease-out;
54 | }
55 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config()
2 |
3 | module.exports = {
4 | siteMetadata: {
5 | siteTitle: "gatsby-starter-shopify",
6 | siteTitleDefault: "gatsby-starter-shopify by @GatsbyJS",
7 | siteUrl: "https://shopify-demo.gatsbyjs.com",
8 | siteDescription:
9 | "A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart.",
10 | siteImage: "/default-og-image.jpg",
11 | twitter: "@gatsbyjs",
12 | },
13 | flags: {
14 | FAST_DEV: true,
15 | },
16 | plugins: [
17 | {
18 | resolve: "gatsby-source-shopify",
19 | options: {
20 | password: process.env.SHOPIFY_SHOP_PASSWORD,
21 | storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
22 | shopifyConnections: ["collections"],
23 | },
24 | },
25 | "gatsby-plugin-image",
26 | "gatsby-plugin-sharp",
27 | "gatsby-transformer-sharp",
28 | "gatsby-plugin-sitemap",
29 | "gatsby-plugin-gatsby-cloud",
30 | // Add your Google Analytics ID to the .env file to enable
31 | // Otherwise, this plugin can be removed
32 | process.env.GOOGLE_ANALYTICS_ID && {
33 | resolve: "gatsby-plugin-google-analytics",
34 | options: {
35 | trackingId: process.env.GOOGLE_ANALYTICS_ID,
36 | },
37 | },
38 | ].filter(Boolean),
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/products/vendor/{ShopifyProduct.vendor}.jsx.example:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { graphql } from "gatsby"
3 | import { Layout } from "../../../components/layout"
4 | import { ProductListing } from "../../../components/product-listing"
5 | import { Seo } from "../../../components/seo"
6 | import slugify from "@sindresorhus/slugify"
7 | import { MoreButton } from "../../../components/more-button"
8 | import { title } from "../index.module.css"
9 |
10 | export default function Products({
11 | data: { products },
12 | pageContext: { vendor },
13 | }) {
14 | return (
15 | {vendor}
17 |{productType}
17 |
40 | {name && (
41 |
42 |
51 | )}
52 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/pages/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { graphql } from "gatsby"
3 | import { Layout } from "../components/layout"
4 | import { ProductListing } from "../components/product-listing"
5 | import { Seo } from "../components/seo"
6 | import {
7 | container,
8 | intro,
9 | callOut,
10 | callToAction,
11 | deployButton,
12 | } from "./index.module.css"
13 |
14 | export const query = graphql`
15 | query {
16 | shopifyCollection(handle: { eq: "frontpage" }) {
17 | products {
18 | ...ProductCard
19 | }
20 | }
21 | }
22 | `
23 | function Hero (props) {
24 | return (
25 |
42 |
43 | {name}{" "}
44 | {selectedItems.length ? (
45 |
48 | ) : undefined}
49 |
50 |
51 | )}
52 |
53 | {items.map((item) => (
54 |
67 | ))}
68 |
69 |
26 |
48 | )
49 | }
50 |
51 | export default function IndexPage({ data }) {
52 | return (
53 | Welcome to the GatsbyJS + Shopify Demo Store.
27 | {!!process.env.GATSBY_DEMO_STORE && ( 28 | <> 29 |30 | It's a proof-of-concept in a box, with 10k products and 30k variants 31 | to help you get to proof-of-concept as soon as right now. 32 |
33 |
34 | Hook it up to your own Shopify store data and start customizing in
35 | minutes by deploying it to Gatsby Cloud for free. Grab your Shopify
36 | store credentials and
37 |
38 | 
43 |
44 |
28 |
29 |
30 |
38 |
39 | {!didJustAddToCart ? (
40 | "Updating…"
41 | ) : (
42 | <>
43 | Added to cart{" "}
44 |
63 |
64 | )}
65 |
66 |
67 | )
68 | }
69 |
--------------------------------------------------------------------------------
/src/components/check-filter.module.css:
--------------------------------------------------------------------------------
1 | .filter {
2 | display: flex;
3 | }
4 |
5 | .filter label {
6 | cursor: pointer;
7 | margin-top: 6px;
8 | color: var(--text-color-secondary);
9 | display: flex;
10 | align-items: baseline;
11 | line-height: var(--loose);
12 | font-size: var(--text-lg);
13 | }
14 |
15 | .filter label:hover {
16 | color: var(--input-ui-active);
17 | }
18 |
19 | .filter label.selectedLabel {
20 | font-weight: var(--semibold);
21 | color: var(--text-color);
22 | }
23 |
24 | .filter summary {
25 | font-weight: var(--bold);
26 | text-transform: uppercase;
27 | cursor: pointer;
28 | font-size: var(--text-xs);
29 | letter-spacing: var(--tracked);
30 | padding-bottom: var(--space-md);
31 | list-style: none;
32 | }
33 |
34 | .filter summary::marker {
35 | display: none;
36 | color: transparent;
37 | }
38 |
39 | .filter summary::-webkit-details-marker {
40 | display: none; /* hide the summary arrow on safari */
41 | }
42 |
43 | .summary {
44 | display: flex;
45 | align-items: center;
46 | justify-content: space-between;
47 | }
48 |
49 | .filter-options {
50 | max-height: 200px;
51 | overflow-y: auto;
52 | }
53 |
54 | .clearButton {
55 | color: var(--text-color-secondary);
56 | font-size: var(--text-sm);
57 | line-height: var(--solid);
58 | }
59 |
60 | .checkbox {
61 | display: inline-flex;
62 | align-items: center;
63 | justify-content: center;
64 | appearance: none;
65 | border: 1px var(--text-color-secondary) solid;
66 | width: var(--space-xl);
67 | height: var(--space-xl);
68 | border-radius: var(--radius-sm);
69 | margin-right: var(--space-md);
70 | }
71 |
72 | @media (min-width: 640px) {
73 | .filter label {
74 | line-height: var(--dense);
75 | max-width: 240px;
76 | }
77 |
78 | .checkbox {
79 | width: var(--space-lg);
80 | height: var(--space-lg);
81 | }
82 | }
83 |
84 | @media (min-width: 1024px) {
85 | .filter label {
86 | font-size: var(--text-md);
87 | }
88 | }
89 |
90 | .checkbox:checked {
91 | border-color: var(--primary);
92 | background-color: var(--primary);
93 | }
94 |
95 | .checkbox::before {
96 | line-height: 0;
97 | font-size: var(--text-sm);
98 | font-weight: var(--bold);
99 | color: var(--text-color-inverted);
100 | content: "\2713";
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/numeric-input.module.css:
--------------------------------------------------------------------------------
1 | .wrap {
2 | display: inline-grid;
3 | grid-template-columns: 1fr min-content;
4 | grid-template-areas: "input increment" "input decrement";
5 | background-color: var(--input-background);
6 | border-radius: var(--radius-md);
7 | height: var(--size-input);
8 | overflow: hidden;
9 | }
10 |
11 | .wrap button span {
12 | display: none;
13 | }
14 |
15 | .input {
16 | grid-area: input;
17 | background: none;
18 | border: none;
19 | padding: var(--space-sm) var(--space-lg);
20 | align-self: stretch;
21 | width: 6ch;
22 | border-style: solid;
23 | border-color: var(--input-border);
24 | border-width: 0 1px 0 0;
25 | font-weight: var(--medium);
26 | color: var(--input-text);
27 | }
28 |
29 | .input:disabled {
30 | color: var(--input-text-disabled);
31 | }
32 |
33 | .wrap button {
34 | background: none;
35 | border: none;
36 | padding: 0 var(--space-sm);
37 | display: grid;
38 | place-items: center;
39 | color: var(--input-ui);
40 | }
41 |
42 | .wrap button:hover {
43 | background-color: var(--input-background-hover);
44 | color: var(--input-ui-active);
45 | }
46 |
47 | .wrap button:disabled:hover,
48 | .wrap button:disabled {
49 | background: none;
50 | color: var(--input-text-disabled);
51 | }
52 |
53 | .wrap button.increment {
54 | grid-area: increment;
55 | border-bottom: 1px var(--input-border) solid;
56 | }
57 |
58 | .decrement {
59 | grid-area: decrement;
60 | }
61 |
62 | /* On mobile, make the buttons easier to press */
63 | @media (pointer: coarse) {
64 | .wrap {
65 | grid-template-columns: var(--size-input) 1fr var(--size-input);
66 | grid-template-areas: "decrement input increment";
67 | color: var(--input-color);
68 | }
69 |
70 | .input {
71 | text-align: center;
72 | border-width: 0 1px;
73 | }
74 |
75 | .wrap button {
76 | padding: 0 var(--space-md);
77 | font-size: var(--text-lg);
78 | font-weight: var(--bold);
79 | }
80 |
81 | .wrap button span {
82 | display: inline;
83 | }
84 |
85 | .wrap button svg {
86 | display: none;
87 | }
88 |
89 | .wrap button.increment {
90 | border: none;
91 | }
92 |
93 | .wrap button:active {
94 | background-color: var(--input-background-hover);
95 | color: var(--input-ui-active);
96 | }
97 |
98 | .wrap button:hover {
99 | background-color: inherit;
100 | color: inherit;
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/src/components/seo.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { useStaticQuery, graphql } from "gatsby"
3 | import { useLocation } from "@reach/router"
4 |
5 | export function Seo({
6 | title = "",
7 | description = "",
8 | pathname = "",
9 | image = "",
10 | children = null,
11 | }) {
12 | const location = useLocation()
13 | const {
14 | site: { siteMetadata },
15 | } = useStaticQuery(graphql`
16 | query {
17 | site {
18 | siteMetadata {
19 | siteTitle
20 | siteTitleDefault
21 | siteUrl
22 | siteDescription
23 | siteImage
24 | twitter
25 | }
26 | }
27 | }
28 | `)
29 |
30 | const {
31 | siteTitle,
32 | siteTitleDefault,
33 | siteUrl,
34 | siteDescription,
35 | siteImage,
36 | twitter,
37 | } = siteMetadata
38 |
39 | const seo = {
40 | title: title || siteTitleDefault,
41 | description: description || siteDescription,
42 | url: pathname ? `${siteUrl}${pathname}` : location.href,
43 | image: `${siteUrl}${image || siteImage}`,
44 | }
45 |
46 | return (
47 | <>
48 | 41 |
42 |
43 |
61 |
81 |
43 |
44 | Price
45 | {(filters.maxPrice || filters.minPrice) && (
46 |
58 | )}
59 |
60 |
61 |
62 |
67 | updateNumeric("minPrice", event.currentTarget.value)
68 | }
69 | />{" "}
70 | –{" "}
71 |
76 | updateNumeric("maxPrice", event.currentTarget.value)
77 | }
78 | />
79 |
80 | 82 |
89 |
58 |
64 | ) : (
65 |
66 | )
67 | }
68 |
69 |
75 |
76 | )
77 | }
78 |
79 | export const query = graphql`
80 | fragment ProductCard on ShopifyProduct {
81 | id
82 | title
83 | slug: gatsbyPath(
84 | filePath: "/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}"
85 | )
86 | images {
87 | id
88 | altText
89 | gatsbyImageData(aspectRatio: 1, width: 640)
90 | }
91 | priceRangeV2 {
92 | minVariantPrice {
93 | amount
94 | currencyCode
95 | }
96 | }
97 | vendor
98 | }
99 | `
100 |
--------------------------------------------------------------------------------
/src/styles/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* tokens */
3 | /* font-family */
4 | --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
5 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
6 |
7 | /* palette */
8 | --black-fade-5: rgba(0, 0, 0, 0.05);
9 | --black-fade-40: rgba(0, 0, 0, 0.4);
10 | --grey-90: #232129;
11 | --grey-50: #78757a;
12 | --green-80: #088413;
13 | --green-50-rgb: 55, 182, 53;
14 | --white: #ffffff;
15 |
16 | /* radii */
17 | --radius-sm: 4px;
18 | --radius-md: 8px;
19 | --radius-rounded: 999px;
20 |
21 | /* spacing */
22 | --space-sm: 4px;
23 | --space-md: 8px;
24 | --space-lg: 16px;
25 | --space-xl: 20px;
26 | --space-2xl: 24px;
27 | --space-3xl: 48px;
28 |
29 | /* line-height */
30 | --solid: 1;
31 | --dense: 1.25;
32 | --default: 1.5;
33 | --loose: 2;
34 |
35 | /* letter-spacing */
36 | --tracked: 0.075em;
37 | --tight: -0.015em;
38 |
39 | /* font-weight */
40 | --body: 400;
41 | --medium: 500;
42 | --semibold: 600;
43 | --bold: 700;
44 |
45 | /* font-size */
46 | --text-xs: 12px;
47 | --text-sm: 14px;
48 | --text-md: 16px;
49 | --text-lg: 18px;
50 | --text-xl: 20px;
51 | --text-2xl: 24px;
52 | --text-3xl: 32px;
53 |
54 | /* role-based tokens */
55 |
56 | /* colors */
57 | --primary: var(--green-80);
58 | --background: var(--white);
59 | --border: var(--black-fade-5);
60 |
61 | /* transitions */
62 | --transition: box-shadow 0.125s ease-in;
63 |
64 | /* shadows */
65 | --shadow: 0 4px 12px rgba(var(--green-50-rgb), 0.5);
66 |
67 | /* text */
68 | /* color */
69 | --text-color: var(--grey-90);
70 | --text-color-secondary: var(--grey-50);
71 | --text-color-inverted: var(--white);
72 | /* size */
73 | --text-display: var(--text-2xl);
74 | --text-prose: var(--text-md);
75 |
76 | /* input */
77 | --input-background: var(--black-fade-5);
78 | --input-background-hover: var(--black-fade-5);
79 | --input-border: var(--black-fade-5);
80 | --input-text: var(--text-color);
81 | --input-text-disabled: var(--black-fade-40);
82 | --input-ui: var(--text-color-secondary);
83 | --input-ui-active: (--text-color);
84 |
85 | /* size */
86 | --size-input: var(--space-3xl);
87 | --size-gap: 12px;
88 | --size-gutter-raw: var(--space-2xl);
89 | --size-gutter: calc(var(--size-gutter-raw) - 12px);
90 |
91 | /* product */
92 | --product-grid: 1fr;
93 | }
94 |
95 | /* role-based token adjustments per breakpoint */
96 | @media (min-width: 640px) {
97 | :root {
98 | --product-grid: 1fr 1fr;
99 | }
100 | }
101 |
102 | @media (min-width: 1024px) {
103 | :root {
104 | --text-display: var(--text-3xl);
105 | --text-prose: var(--text-lg);
106 | --product-grid: repeat(3, 1fr);
107 | --size-gutter-raw: var(--space-3xl);
108 | --size-gap: var(--space-2xl);
109 | }
110 | }
111 |
112 | @media (min-width: 1280px) {
113 | :root {
114 | --product-grid: repeat(4, 1fr);
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/static/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
48 |
--------------------------------------------------------------------------------
/src/components/line-item.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import debounce from "lodash.debounce"
3 | import { StoreContext } from "../context/store-context"
4 | import { formatPrice } from "../utils/format-price"
5 | import { GatsbyImage } from "gatsby-plugin-image"
6 | import { getShopifyImage } from "gatsby-source-shopify"
7 | import DeleteIcon from "../icons/delete"
8 | import { NumericInput } from "./numeric-input"
9 | import {
10 | title,
11 | remove,
12 | variant,
13 | totals,
14 | priceColumn,
15 | } from "./line-item.module.css"
16 |
17 | export function LineItem({ item }) {
18 | const {
19 | removeLineItem,
20 | checkout,
21 | updateLineItem,
22 | loading,
23 | } = React.useContext(StoreContext)
24 | const [quantity, setQuantity] = React.useState(item.quantity)
25 |
26 | const variantImage = {
27 | ...item.variant.image,
28 | originalSrc: item.variant.image.src,
29 | }
30 | const price = formatPrice(
31 | item.variant.priceV2.currencyCode,
32 | Number(item.variant.priceV2.amount)
33 | )
34 |
35 | const subtotal = formatPrice(
36 | item.variant.priceV2.currencyCode,
37 | Number(item.variant.priceV2.amount) * quantity
38 | )
39 |
40 | const handleRemove = () => {
41 | removeLineItem(checkout.id, item.id)
42 | }
43 |
44 | const uli = debounce(
45 | (value) => updateLineItem(checkout.id, item.id, value),
46 | 300
47 | )
48 | // eslint-disable-next-line
49 | const debouncedUli = React.useCallback((value) => uli(value), [])
50 |
51 | const handleQuantityChange = (value) => {
52 | if (value !== "" && Number(value) < 1) {
53 | return
54 | }
55 | setQuantity(value)
56 | if (Number(value) >= 1) {
57 | debouncedUli(value)
58 | }
59 | }
60 |
61 | function doIncrement() {
62 | handleQuantityChange(Number(quantity || 0) + 1)
63 | }
64 |
65 | function doDecrement() {
66 | handleQuantityChange(Number(quantity || 0) - 1)
67 | }
68 |
69 | const image = React.useMemo(
70 | () =>
71 | getShopifyImage({
72 | image: variantImage,
73 | layout: "constrained",
74 | crop: "contain",
75 | width: 160,
76 | height: 160,
77 | }),
78 | // eslint-disable-next-line react-hooks/exhaustive-deps
79 | [variantImage.src]
80 | )
81 |
82 | return (
83 | {vendor}
70 | 71 | {title} 72 |
73 |{price}
74 | {item.title}
95 |
96 | {item.variant.title === "Default Title" ? "" : item.variant.title}
97 |
98 |
99 |
102 |
103 |
36 | {emptyCart ? (
37 |
51 |
52 |
110 |
117 |
118 | )}
119 |
120 |
38 |
47 | ) : (
48 | <>
49 | Your cart is empty
39 |40 | Looks like you haven’t found anything yet. We understand that 41 | sometimes it’s hard to choose — maybe this helps: 42 |
43 | 44 | View trending products 45 | 46 |Your cart
50 || Image | 54 |Product | 55 |Price | 56 |Qty. | 57 |Total | 58 |
|---|---|---|---|---|
| 67 | | 68 | | 69 | | Subtotal | 70 |71 | {formatPrice( 72 | checkout.subtotalPriceV2.currencyCode, 73 | checkout.subtotalPriceV2.amount 74 | )} 75 | | 76 |
| 79 | | 80 | | 81 | | Taxes | 82 |83 | {formatPrice( 84 | checkout.totalTaxV2.currencyCode, 85 | checkout.totalTaxV2.amount 86 | )} 87 | | 88 |
| 91 | | 92 | | 93 | | Shipping | 94 |Calculated at checkout | 95 |
| 98 | | 99 | | 100 | | Total Price | 101 |102 | {formatPrice( 103 | checkout.totalPriceV2.currencyCode, 104 | checkout.totalPriceV2.amount 105 | )} 106 | | 107 |
2 |
3 | 
4 |
5 |
7 | Gatsby Starter Shopify 8 |
9 | 10 | Kick off your next [Shopify](https://www.shopify.com/) project with this boilerplate. This starter creates a store with a custom landing page, individual filtered views for each product, detailed product pages, advanced instant search and a shopping cart. All styled with CSS Modules. 11 | 12 | Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/): 13 | 14 | [](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-shopify)
15 |
16 | Check out the [demo site](https://shopify-demo.gatsbyjs.com) showcasing a proof-of-concept with 10k products and 30k variants.
17 |
18 | ## 🚀 Quick start
19 |
20 | 1. **Create a Gatsby site.**
21 |
22 | Use the Gatsby CLI to create a new site, specifying the Shopify starter.
23 |
24 | ```shell
25 | # create a new Gatsby site using the Shopify starter
26 | npx gatsby new my-shopify-store https://github.com/gatsbyjs/gatsby-starter-shopify
27 | ```
28 |
29 | 2. **Link to your store**
30 |
31 | Follow these instructions here to [link your Shopify store](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-shopify#readme). Create a `.env` file with your Shopify store URL, password, and Storefront access token, using the `.env.example` file as an example. If you want to try with a development store, see [the sample data and instructions here](example/).
32 |
33 | 3. **Start developing.**
34 |
35 | Navigate into your new site’s directory and start it up.
36 |
37 | ```shell
38 | cd my-shopify-starter/
39 | npm start
40 | ```
41 |
42 | 4. **Open the source code and start editing!**
43 |
44 | Your site is now running at `http://localhost:8000`!
45 |
46 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._
47 |
48 | Open the `my-shopify-starter` directory in your code editor of choice and edit `src/pages/index.jsx`. Save your changes and the browser will update in real time!
49 |
50 | ## 🧐 What's inside?
51 |
52 | A quick look at the top-level files and directories you'll see in this project.
53 |
54 | .
55 | ├── example
56 | ├── src
57 | ├── static
58 | ├── .env.example
59 | ├── gatsby-browser.js
60 | ├── gatsby-config.js
61 | └── gatsby-node.js
62 |
63 | 1. **`/example`**: This directory includes a CSV file containing sample data to import into a development store. There are also instructions on generating your own sample data, and a link to a dataset with 30,000 SKUs.
64 |
65 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
66 |
67 | 3. **`/static`**: Every file in this directory will be copied over to the `public` folder during the build. Learn more about [using the `static` folder](https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/). In this project it holds the `og:image` and favicons.
68 |
69 | 4. **`/.env.example`**: Duplicate this file, rename it to `.env`, and fill out the keys. You'll need to define those environment variables to get the source plugin, cart and search working.
70 |
71 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. In this project it wraps the whole application with the context provider of the store/shopping cart.
72 |
73 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
74 |
75 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. In this project it adds a custom Babel plugin to Gatsby.
76 |
77 | ### Detailed look into `src`
78 |
79 | The whole logic for how the site looks and behaves is inside `src`.
80 |
81 | .
82 | ├── components
83 | ├── context
84 | ├── icons
85 | ├── images
86 | ├── pages
87 | ├── styles
88 | └── utils
89 |
90 | 1. **`/components`**: Contains the React components used for building out the pages.
91 |
92 | 2. **`/context`**: Contains the store context (e.g. adding/deleting/updating items in shopping cart, accessing Shopify), and the urql context used for search using Shopify's Storefront API.
93 |
94 | 3. **`/icons`**: Contains all custom SVG icons and the logo.
95 |
96 | 4. **`/pages`**: Contains the homepage and all automatically generated pages for each product category and individual product pages. The [File System Route API](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/) is used to create those pages from your Shopify data.
97 |
98 | 5. **`/styles`**: Contains globals styles. These are `variables.css`, used to define shared CSS custom properties, `reset.css`, which contains a CSS reset based on Chakra, and `global.css`, which includes a tiny set of global styles.
99 |
100 | 6. **`/utils`**: Utility functions, e.g. formatting the price correctly, plus custom hooks used for handling search and pagination.
101 |
102 | ### 🎨 Styling
103 |
104 | The site uses [CSS Modules](https://github.com/css-modules/css-modules) for styling, which allows you to use regular CSS, scoped to the individual component. Theme values such as fonts, colors and spacing are set in `src/styles/variables.css`.
105 |
106 | ### SSR Search Page
107 |
108 | The `/search` page uses server-side rendering to show a list of products based on filters and search terms in the URL query parameters.
109 |
110 |
111 | ## 🎓 Learning Gatsby
112 |
113 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
114 |
115 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
116 |
117 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
118 |
119 | ## 💫 Deploy
120 |
121 | [Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/cloud/)
122 |
123 | Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.
124 |
--------------------------------------------------------------------------------
/src/pages/search-page.module.css:
--------------------------------------------------------------------------------
1 | .visually-hidden {
2 | border: 0;
3 | clip: rect(0, 0, 0, 0);
4 | height: 1px;
5 | margin: -1px;
6 | overflow: hidden;
7 | padding: 0;
8 | position: absolute;
9 | width: 1px;
10 | }
11 |
12 | .main {
13 | display: grid;
14 | grid-template-columns: 1fr;
15 | grid-template-rows: min-content 1fr;
16 | grid-template-areas:
17 | "search"
18 | "results"
19 | "filters";
20 | }
21 |
22 | .filterStyle {
23 | grid-area: filters;
24 | /* Visually hidden */
25 | width: 0;
26 | height: 0;
27 | overflow: hidden;
28 | }
29 |
30 | .filterStyle.modalOpen {
31 | display: grid;
32 | grid-template-rows: min-content 1fr;
33 | position: fixed;
34 | top: 0;
35 | left: 0;
36 | right: 0;
37 | bottom: 0;
38 | height: 100vh;
39 | width: 100vw;
40 | z-index: 10;
41 | background-color: var(--background);
42 | overscroll-behavior: contain;
43 | }
44 |
45 | .filterWrap {
46 | overflow-y: auto;
47 | padding: 0 var(--size-gutter-raw);
48 | }
49 |
50 | @media (min-width: 1024px) {
51 | .filterWrap {
52 | padding: 0;
53 | padding-right: var(--space-xl);
54 | }
55 | }
56 |
57 | .filterStyle details {
58 | margin-bottom: var(--space-2xl);
59 | }
60 |
61 | .filterStyle * + details {
62 | margin-top: var(--space-2xl);
63 | }
64 |
65 | .filterStyle hr {
66 | border-color: var(--border);
67 | }
68 |
69 | .filterTitle {
70 | padding: var(--size-gap) var(--size-gap) var(--size-gap) var(--space-2xl);
71 | display: grid;
72 | align-items: center;
73 | grid-template-columns: auto min-content;
74 | color: var(--text-color-secondary);
75 | }
76 |
77 | .filterTitle button {
78 | display: grid;
79 | place-items: center;
80 | width: var(--size-input);
81 | height: var(--size-input);
82 | position: relative;
83 | }
84 |
85 | .filterTitle h2 {
86 | font-size: var(--text-display);
87 | font-weight: var(--bold);
88 | }
89 |
90 | .results {
91 | grid-area: results;
92 | padding: 0 var(--space-2xl);
93 | }
94 |
95 | .results ul {
96 | flex-direction: column;
97 | }
98 |
99 | .search {
100 | position: relative;
101 | grid-area: search;
102 | height: min-content;
103 | display: grid;
104 | grid-template-columns: auto max-content max-content;
105 | align-items: center;
106 | padding: var(--space-md) var(--space-md) var(--space-md)
107 | var(--size-gutter-raw);
108 | }
109 |
110 | .search input {
111 | font-size: var(--text-md);
112 | font-weight: var(--medium);
113 | grid-area: input;
114 | padding-left: var(--space-md);
115 | height: var(--size-input);
116 | background: none;
117 | }
118 |
119 | .searchForm {
120 | display: grid;
121 | grid-template-columns: 1fr max-content;
122 | grid-template-areas: "input clear";
123 | align-items: center;
124 | background-color: var(--input-background);
125 | border-radius: var(--radius-md);
126 | height: var(--size-input);
127 | padding: 0 var(--space-md);
128 | }
129 |
130 | .searchIcon {
131 | display: none;
132 | grid-area: icon;
133 | color: var(--text-color-secondary);
134 | }
135 |
136 | .clearSearch {
137 | grid-area: clear;
138 | border-radius: var(--radius-rounded);
139 | color: var(--input-ui);
140 | padding: var(--space-sm);
141 | display: grid;
142 | place-items: center;
143 | }
144 |
145 | .clearSearch:hover {
146 | background-color: var(--input-background-hover);
147 | color: var(--input-ui-active);
148 | }
149 |
150 | .filterButton {
151 | color: var(--text-color-secondary);
152 | display: grid;
153 | place-items: center;
154 | width: var(--size-input);
155 | height: var(--size-input);
156 | }
157 |
158 | .filterButton.activeFilters {
159 | color: var(--primary);
160 | }
161 |
162 | .filterButton:hover {
163 | color: var(--text-color-primary);
164 | }
165 |
166 | .sortSelector {
167 | display: grid;
168 | place-items: center;
169 | font-weight: var(--semibold);
170 | }
171 |
172 | .sortSelector label {
173 | grid-area: 1/1;
174 | cursor: pointer;
175 | }
176 |
177 | .sortSelector:hover .sortIcon {
178 | color: var(--text-color-primary);
179 | }
180 |
181 | .sortSelector select {
182 | padding-left: var(--space-lg);
183 | opacity: 0;
184 | width: var(--size-input);
185 | height: var(--size-input);
186 | cursor: pointer;
187 | font-weight: var(--semibold);
188 | appearance: none;
189 | background: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='black'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E")
190 | no-repeat center right;
191 | }
192 |
193 | .sortSelector label span {
194 | position: absolute;
195 | width: 0;
196 | height: 0;
197 | overflow: hidden;
198 | }
199 |
200 | .sortIcon {
201 | grid-area: 1/1;
202 | color: var(--text-color-secondary);
203 | }
204 |
205 | .productList {
206 | display: grid;
207 | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
208 | grid-gap: var(--space-lg);
209 | padding-top: var(--space-2xl);
210 | padding-right: var(--size-gutter-raw);
211 | }
212 |
213 | @media (min-width: 1024px) {
214 | .filterTitle {
215 | display: none;
216 | }
217 |
218 | .filterButton {
219 | display: none;
220 | }
221 |
222 | .filterStyle.modalOpen {
223 | position: fixed;
224 | }
225 |
226 | .filterStyle {
227 | padding-left: var(--size-gutter-raw);
228 | padding-right: var(--space-2xl);
229 | padding-top: 0;
230 | padding-bottom: 0;
231 | /* Visually hidden */
232 | width: auto;
233 | height: auto;
234 | }
235 |
236 | .sortIcon {
237 | display: none;
238 | }
239 |
240 | .searchIcon {
241 | display: inline;
242 | }
243 |
244 | .searchForm {
245 | grid-template-columns: 30px 1fr max-content;
246 | grid-template-areas: "icon input clear";
247 | }
248 |
249 | .search input {
250 | padding-left: 0;
251 | }
252 |
253 | .main {
254 | grid-template-columns: max-content 1fr;
255 | grid-template-areas:
256 | "search search"
257 | "filters results";
258 | }
259 |
260 | .sortSelector {
261 | padding-left: var(--space-lg);
262 | padding-right: var(--size-gutter);
263 | justify-content: flex-end;
264 | }
265 |
266 | .sortSelector select {
267 | width: auto;
268 | padding-right: var(--space-xl);
269 | opacity: 1;
270 | }
271 |
272 | .sortSelector label span {
273 | position: initial;
274 | width: auto;
275 | height: auto;
276 | }
277 | }
278 |
279 | @media (min-width: 1280px) {
280 | .main {
281 | grid-template-areas:
282 | "filters search"
283 | "filters results";
284 | padding-top: var(--space-2xl);
285 | }
286 |
287 | .search {
288 | grid-gap: var(--space-2xl);
289 | padding: 0;
290 | }
291 |
292 | .results {
293 | padding: 0;
294 | }
295 |
296 | .sortSelector {
297 | padding-left: 0;
298 | }
299 | }
300 |
301 | .productListItem {
302 | display: flex;
303 | justify-content: center;
304 | width: 100%;
305 | }
306 |
307 | .priceFilter {
308 | display: grid;
309 | }
310 |
311 | .pagination {
312 | display: flex;
313 | flex-direction: row;
314 | justify-content: center;
315 | margin-top: var(--size-gutter-raw);
316 | gap: var(--space-md);
317 | }
318 |
319 | .paginationButton {
320 | width: var(--size-input);
321 | height: var(--size-input);
322 | font-size: var(--text-md);
323 | border-radius: var(--radius-md);
324 | display: grid;
325 | place-items: center;
326 | }
327 |
328 | .paginationButton:hover {
329 | background-color: var(--black-fade-5);
330 | }
331 |
332 | .paginationButton:disabled {
333 | cursor: default;
334 | opacity: 0.5;
335 | }
336 |
337 | .paginationButton:disabled:hover {
338 | background-color: inherit;
339 | }
340 |
341 | .priceFilterStyle {
342 | display: flex;
343 | }
344 |
345 | .priceFilterStyle label {
346 | cursor: pointer;
347 | margin-top: 2px;
348 | }
349 |
350 | .priceFilterStyle summary {
351 | cursor: pointer;
352 | font-weight: var(--bold);
353 | text-transform: uppercase;
354 | display: flex;
355 | align-items: center;
356 | justify-content: space-between;
357 | padding-bottom: var(--space-md);
358 | font-size: var(--text-xs);
359 | letter-spacing: var(--tracked);
360 | }
361 |
362 | .priceFields {
363 | display: flex;
364 | flex-direction: row;
365 | justify-content: space-between;
366 | align-items: center;
367 | gap: var(--space-sm);
368 | }
369 |
370 | .priceFields input {
371 | max-width: 96px;
372 | }
373 |
374 | .progressStyle {
375 | font-size: var(--text-md);
376 | color: var(--text-color-secondary);
377 | display: flex;
378 | flex-direction: row;
379 | align-items: center;
380 | gap: var(--size-gap);
381 | padding: var(--space-xl) 0;
382 | }
383 |
384 | .resultsStyle {
385 | font-size: var(--text-md);
386 | color: var(--text-color);
387 | padding: var(--space-xl) 0;
388 | }
389 |
390 | .resultsStyle span {
391 | font-weight: var(--bold);
392 | }
393 |
394 | .emptyState {
395 | width: 100%;
396 | padding: var(--space-xl);
397 | align-items: center;
398 | text-align: center;
399 | color: var(--grey-50);
400 | font-weight: var(--bold);
401 | }
402 |
--------------------------------------------------------------------------------
/src/pages/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { graphql, Link } from "gatsby"
3 | import { Layout } from "../../../components/layout"
4 | import isEqual from "lodash.isequal"
5 | import { GatsbyImage, getSrc } from "gatsby-plugin-image"
6 | import { StoreContext } from "../../../context/store-context"
7 | import { AddToCart } from "../../../components/add-to-cart"
8 | import { NumericInput } from "../../../components/numeric-input"
9 | import { formatPrice } from "../../../utils/format-price"
10 | import { Seo } from "../../../components/seo"
11 | import { CgChevronRight as ChevronIcon } from "react-icons/cg"
12 | import {
13 | productBox,
14 | container,
15 | header,
16 | productImageWrapper,
17 | productImageList,
18 | productImageListItem,
19 | scrollForMore,
20 | noImagePreview,
21 | optionsWrapper,
22 | priceValue,
23 | selectVariant,
24 | labelFont,
25 | breadcrumb,
26 | tagList,
27 | addToCartStyle,
28 | metaSection,
29 | productDescription,
30 | } from "./product-page.module.css"
31 |
32 | export default function Product({ data: { product, suggestions } }) {
33 | const {
34 | options,
35 | variants,
36 | variants: [initialVariant],
37 | priceRangeV2,
38 | title,
39 | description,
40 | images,
41 | } = product
42 | const { client } = React.useContext(StoreContext)
43 |
44 | const [variant, setVariant] = React.useState({ ...initialVariant })
45 | const [quantity, setQuantity] = React.useState(1)
46 |
47 | const productVariant =
48 | client.product.helpers.variantForOptions(product, variant) || variant
49 |
50 | const [available, setAvailable] = React.useState(
51 | productVariant.availableForSale
52 | )
53 |
54 | const checkAvailablity = React.useCallback(
55 | (productId) => {
56 | client.product.fetch(productId).then((fetchedProduct) => {
57 | const result =
58 | fetchedProduct?.variants.filter(
59 | (variant) => variant.id === productVariant.storefrontId
60 | ) ?? []
61 |
62 | if (result.length > 0) {
63 | setAvailable(result[0].available)
64 | }
65 | })
66 | },
67 | [productVariant.storefrontId, client.product]
68 | )
69 |
70 | const handleOptionChange = (index, event) => {
71 | const value = event.target.value
72 |
73 | if (value === "") {
74 | return
75 | }
76 |
77 | const currentOptions = [...variant.selectedOptions]
78 |
79 | currentOptions[index] = {
80 | ...currentOptions[index],
81 | value,
82 | }
83 |
84 | const selectedVariant = variants.find((variant) => {
85 | return isEqual(currentOptions, variant.selectedOptions)
86 | })
87 |
88 | setVariant({ ...selectedVariant })
89 | }
90 |
91 | React.useEffect(() => {
92 | checkAvailablity(product.storefrontId)
93 | }, [productVariant.storefrontId, checkAvailablity, product.storefrontId])
94 |
95 | const price = formatPrice(
96 | priceRangeV2.minVariantPrice.currencyCode,
97 | variant.price
98 | )
99 |
100 | const hasVariants = variants.length > 1
101 | const hasImages = images.length > 0
102 | const hasMultipleImages = true || images.length > 1
103 |
104 | return (
105 |
107 |
205 |
108 | {hasImages && (
109 |
204 |
110 |
142 | )}
143 | {!hasImages && (
144 | No Preview image
145 | )}
146 |
115 |
135 | {hasMultipleImages && (
136 | -
116 | {images.map((image, index) => (
117 |
-
121 |
131 |
132 | ))}
133 |
137 | scroll for more{" "}
138 |
139 |
140 | )}
141 |
147 |
203 |
148 | {product.productType}
149 |
151 | {title}
152 |{description}
153 |154 | {price} 155 |
156 | 174 |
175 | setQuantity((q) => Math.min(q + 1, 20))}
178 | onDecrement={() => setQuantity((q) => Math.max(1, q - 1))}
179 | onChange={(event) => setQuantity(event.currentTarget.value)}
180 | value={quantity}
181 | min="1"
182 | max="20"
183 | />
184 |
190 |
191 | Type
192 |
193 | {product.productType}
194 |
195 | Tags
196 |
197 | {product.tags.map((tag) => (
198 | {tag}
199 | ))}
200 |
201 |
202 | Search Results
157 |
158 |
191 |
208 |
213 | {isFetching ? (
214 |
262 |
263 |
159 |
190 |
173 |
187 |
189 |
192 |
197 | Filter
193 | 196 |
198 |
207 |
215 |
220 | Search results{" "} 221 | {filters.term && ( 222 | <> 223 | for "{filters.term}" 224 | 225 | )} 226 |
227 | )} 228 | {!isFetching && ( 229 |-
230 | {products.map(({ node }, index) => (
231 |
-
232 |
246 |
247 | ))}
248 |
No results found
252 | )}
253 | {hasPreviousPage || hasNextPage ? (
254 |