Instructions

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

The ProductContext component fetches the Shopify and WordPress data from the aggregation service built with Wundergraph, which is doing the stitching by slug ( WordPress ) and handle ( Shopify ), 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

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 ACF Dashboard in WordPress to show the ACF product model and the various fields that belong to it. The product itself that is served by the unified API can be found here

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

query GetProduct {
  product(id: "radiowave-shirt", idType: SLUG) {
    title
    slug
    productFields {
      title
      technicalDetails
      description
      video
      image {
        node {
          mediaItemUrl
        }
      }
    }
  }
}

3. Open the Shopify Storefront API playground and paste the below query (then hit play) to show a request for just the Shopify product data which matches the slug of the WordPress ACF product seen in step 1.

{
  product(handle: "radiowave-shirt") {
    collections(first: 100) {
      nodes {
        handle
        title
      }
    }
    variants(first: 100) {
      nodes {
        id
        sku
        quantityAvailable
        image {
          url
        }
        selectedOptions {
          name
          value
        }
        price {
          amount
          currencyCode
        }
        compareAtPrice {
          amount
          currencyCode
        }
      }
    }
  }
}

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

Further information

The codebase for the Wundergraph server i.e the storefront aggregation service that this application uses is located here