Adding Buy Online, Pick up in Store Features to the Storefront
You can enhance the storefront browsing experience by letting shoppers see and select a Pickup fulfillment method.
The biggest benefit is that shoppers can see product inventory availability by location. This helps inform their shopping decisions.
Adding inventory data experiences can be achieved by customizing a store's theme to query the GraphQL Storefront API and display the appropriate components for availability.
The Query Locations with the GraphQL Storefront API and Query Inventory with the GraphQL Storefront API pages contain info about what has been added to the API to support Buy Online, Pick up in Store features.
The following example shows how you can show inventory for the base product and its variants using Stencil:
- Add the following GraphQL attribute to the Stencil Front Matter of the
product.htmlpage:
gql: "query($productId: Int!) {
site {
product(entityId: $productId) {
name
inventory {
aggregated {
availableToSell
}
}
variants {
edges {
node {
sku
inventory {
aggregated {
availableToSell
}
byLocation {
edges {
node {
locationEntityCode
availableToSell
isInStock
}
}
}
}
}
}
}
}
}
}"- Add the following handlebars to the
product-view.htmlpage:
{{#if gql.data.site.product}}
<b>Available to Sell:</b> {{gql.data.site.product.inventory.aggregated.availableToSell}} <br></br>
{{#each gql.data.site.product.variants.edges}}
{{#with node}}
<b>Variant SKU: </b> {{sku}} <br></br>
Total Available to Sell: {{inventory.aggregated.availableToSell}} <br></br>
{{#each inventory.byLocation.edges}}
{{#with node}}
{{#if isInStock}}
{{locationEntityCode}} has {{availableToSell}} in stock <br></br>
{{/if}}
{{/with}}
{{/each}}
{{/with}}
{{/each}}
{{/if}}Did you find what you were looking for?