Instructions

The storefront-product directory holds the frontend (product page) which displays the data.

The ProductContext component fetches the BigCommerce and WordPress data from the storefront API aggregation service, which is doing the stitching, and makes it available globally to the other components that need to render their specific information from it.

Running the app for local development

1. Create the following .env.local files:

   VITE_UNIFIED_BASE_URL=the graphql endpoint of the storefront aggregation service wether you have it running locally or somewhere accessible

   The app on Vercel is using this one: https://ecomm-api-aggregation-poc-uim5o2scja-nw.a.run.app/graphql

2. To run the frontend (product page)

   cd storefront-product

   npm run dev

Example

Demo tips

The application is deployed here. If you open the Network tab in Chrome Dev Tools and reload the page you will see a request to graphql. Click on this and go to the Preview tab to open up the unified response.

You can open a few tabs alongside the app to show the different parts we are bringing together with this concept.

1. Open the ACM admin in WordPress to show the content model

2. Open the WPGraphQL IDE and paste the below query (then hit play) to show a request for just the WordPress product content

query productById {
  product(id: "862", idType: DATABASE_ID) {
    sku
    name
    description
    image {
      mediaItemUrl
    }
    video
    technicalDetails
  }
}

3. Open the BigCommerce Storefront API playground (scroll to bottom to find the link), navigate to the tab for Single Product and paste the below query (then hit play) to show a request for just the BigCommerce product data

 query productById {
   site {
     product(entityId: 86) {
        sku
        availabilityV2 {
          status
         }
         prices {
           basePrice {
            value
           }
           salePrice {
            value
           }
         }
     }
  }
 }

4. Open the unified query that this application uses, to show the above 2 queries as one.

5. An example unified response can also be shown which is located here or in the Network tab in Chrome Dev Tools as mentioned previously.