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:

1. Add the following GraphQL attribute to the Stencil Front Matter of the product.html page:

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
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}"

2. Add the following handlebars to the product-view.html page:

{{#if gql.data.site.product}}
<b>Available to Sell:</b> {{gql.data.site.product.inventory.aggregated.availableToSell}} <br />
{{#each gql.data.site.product.variants.edges}}
    {{#with node}}
        <b>Variant SKU: </b> {{sku}} <br />
        Total Available to Sell: {{inventory.aggregated.availableToSell}} <br />                     
        {{#each inventory.byLocation.edges}}
        {{#with node}}
        {{#if isInStock}}
        {{locationEntityCode}} has {{availableToSell}} in stock <br />
        {{/if}}   
            
        {{/with}}
        {{/each}}
    {{/with}}
{{/each}}
{{/if}}