GatsbyJS is used for JAMstack websites. You can create blogs and in this case, you can create ecommerce sites along with Shopify API.
You need to go through this to setup your Shopify account:
Ecommerce site with Gatsby and Shopify
I'm assuming that you have configured your gatsby-config.js for the gatsby-source-shopify plugin
Collections are equivalent to categories in Shopify. If you have followed the tutorial in the link I gave above, you will be able to list all products. What about displaying Collections?
So in your gatsby-node.js
const collections = await graphql(`
query {
allShopifyCollection (sort: { fields: [title] }) {
edges {
node {
id
title
handle
products {
title
images {
originalSrc
}
shopifyId
handle
description
availableForSale
priceRange {
maxVariantPrice {
amount
}
minVariantPrice {
amount
}
}
}
}
}
}
}
`)
collections.data.allShopifyCollection.edges.forEach(({ node }) => {
createPage({
path: `/collection/${node.handle}`,
component: path.resolve(`./src/components/Collection.js`),
context: {
collection: node,
productCount: node.products.length
},
})
})
We are going to create pages like /collection/men for Men collections.
context: {
collection: node,
productCount: node.products.length
},
Here we are passing node from graphql as collection variable and productCount from counting the products by node.products.length.
Now create your Collection component, could be Collection.js
const Collection = ({ pageContext }) => {
const { collection, productCount } = pageContext
....
return (
{ collection.products.map((product) => (
<div key={product.shopifyId} className="col-md-4">
<div className="card card-product-grid">
<div className="img-wrap">
<img src={product.images[0].originalSrc} alt={product.handle} />
</div>
<a href="#" className="title">{product.title}</a>
<div className="price-wrap mt-2">
<span className="price">${product.priceRange.minVariantPrice.amount}</span>
</div>
</div>
</div>
))}
)
Now you can access this collection if you have a link to it, like this:
{
allShopifyCollection.edges.map((d, i) =>
<DropdownItem key={i}>
<Link to={`/collection/${d.node.handle}`} className="nav-link">{d.node.title}</Link>
</DropdownItem>
)
}
Hope it's helpful!
Cheers,
FM
Top comments (1)
i am facing an issue while impliemnting this i am using template instead of using component and getting an error please see the sceenshot and help me to figure out this
thanks.