What is Shopify PWA Connector? Benefits, Installation, and Configuration!

Vue Storefront, the world’s fastest-growing open-source eCommerce frontend, is coded in modern JavaScript framework Vue.js. The idea of having Vue Storefront is to support the modular method of constructing eCommerce frontends. Industry uses Vue as a PWA frontend for Magento, Shopify, BigCommerce, WooCommerce, and other platforms.

Built to work with headless architecture and being a backend-agnostic platform, the eCommerce storefront seamlessly connects with any eCommerce platform through GraphQL & REST API. 

The project “Vue Storefront” itself is just a set of independent NPM packages. That said, it provides a variety of essential eCommerce/CMS/app functionalities in several combinations.

If you are looking to develop your Vue Storefront eCommerce store, pick the package which matches the requirements of your business project.

As being standalone packages of Vue Storefront, it allows us to use them in any Vue.js environment. Hence, merchants are not bound to use Nuxt. Merchant / Developer can use Vue Storefront packages with Vue CLI or even within custom build Vue.js codebase.

Shopify PWA connector

What is it?

Shopify PWA connecter is a ready-to-use connector, or simply the bridge, which allows developers to connect Shopify backend with Vue Storefront on the go.

The connector will help develop the PWA frontend using Vue Storefront and backend using Shopify eCommerce. The store administrators can manage the catalog data, customers, orders, and CMS pages from the Shopify backend.

The connection between Shopify and Vue Storefront is established using Shopify’s Storefront API. The given API is only accessed through GraphQL. GraphQL teaches a way to talk to API and helps load data from the server to the client’s computer.

Developers need to understand the crux of GraphQL before dealing with APIs. We encourage them to visit the GraphQL guide before proceeding further.

The Storefront API provides unauthorized access to customers, checkouts, product collections, and other store resources. They are collectively used to build customer-centric experiences on the Vue Storefront storefronts.

How does it work?

To start working with Vue Storefront for Shopify, begin with installing two core packages: Shopify JS Buy SDK and Shopify Composition Functions. The packages integrate Shopify PWA instances with Vue Storefront.

It uses the official Shopify client library to prepare and execute GraphQL queries and fetch information from the Shopify store. The domain name and API token are mandatory to make API calls.

Benefits

  • No limitations in theming and customization
  • Open Source with MIT license
  • Exciting developer experience
  • Focus on performance
  • Mobile-first approach
  • Offline mode

Features

  • Out-of-the-box Server Side Rendering (for SEO)
  • Blazing fast (90+ Lighthouse score for every page)
  • Progressive Web App
  • Massive flexibility in changing third-party services

Technology stack

  • Vue.js
  • Nuxt.js
  • CSS
  • Storefront UI
  • TypeScript

How does the Shopify connector work?

Architecture

Workflow

The Storefront API provides customer-facing access to a shop's data. The data hands over the power to manage the customer's cart, access the product view at the storefront and create checkouts.

Developers and management teams leverage the power to weave customer-facing shopping experiences.

The Storefront API is composed of the following data:

  • Customers- Personal information of Shopify customers such as shipping address and display name
  • Nodes- Set of Shopify Storefront API root nodes, including Checkouts, Collections, Orders, Payments, etc. See a complete list of nodes here.
  • Shops- Shop information such as billing address, currency code, and domain

As the Storefront API is GraphQL-based, pass GraphQL queries to fetch any data representation. Also, mutate GraphQL to modify data.

How to use the Shopify connector?

Getting started

As mentioned— to start working with Vue Storefront for Shopify, we need to have two core packages installed:

Shopify JS Buy SDK: 

The JS Buy is a lightweight library that allows you to build eCommerce into any website. It's based on Shopify's Storefront API and comes with lots of facilities. It enables users to retrieve products and catalogs from your shop, & most importantly, it helps add products to the cart and checkouts.

Using the Storefront API, you can:

  • Fetch data about a single product or a collection of products to display on any website or touchpoint.
  • Create unique checkout experiences with full control over the shopping cart.
  • Create new customers or modify existing ones, including address information.
  • Let customers select unique product options.

Shopify Composition Functions:

It's a set of declarative composition API functions that lets you interact with eCommerce logic in your Vue application. The API function enriches additional functionalities like Vue reactivity, SSR support, client-side request caching, etc. to name a few. It is the main integration package and uses an API client under the hood.

Prerequisite

Before initiating the installation and configuration process— you need two domains or one domain with one subdomain.

  • Two domains: In this case, you need two domain names, i.e., domain1.com and domain2.com. Setup Vue-Storefront on the primary domain and Shopify on the secondary domain. The primary domain is reserved for the frontend website and secondary domain for Shopify backend.
  • One domain & One sub-domain: In this case, you have to set up Vue-Storefront on the domain and Shopify backend on sub-domain, i.e., domain.com will render the front end website and api.domain.com for Shopify backend.

Installation

Clone the repository of Vue Storefront and switch to “the next” branch

git clone https://github.com/DivanteLtd/vue-storefront.git
cd vue-storefront/
git fetch && git checkout next

Install dependencies:

yarn install

Build core packages:

yarn build:core

Build Shopify package:

yarn build:sp

Then run the app

yarn dev:sp

Obtain Shopify API token

Generate credentials in the Partner dashboard

To generate private API credentials in the Partner dashboard:

  1. Log in to the Partner dashboard.
  2. Click Development stores.
  3. Click the name of the store you want to build for.
  4. From your Shopify admin, go to Apps.
  5. Click Manage private apps.
  6. Click Create a new private app.
  7. Enter the private app name and developer email.
  8. Give full access for Storefront API
  9. Click Save.

After you click Save, you'll see the storefront access token.

Generate credentials in the Shopify admin

To generate private API credentials for the Shopify admin:

  1. From your Shopify admin, go to Apps.
  2. Click Manage private apps.
  3. Click Create a new private app.
  4. Enter the private app name and developer email.
  5. Give full access for Storefront API
  6. Click Save.

After you click Save, you'll see the storefront access token.

Configuration

After getting a storefront access token, set a token in the Shopify package. Create a “.env” file at “packages/shopify/theme/” and set Shopify domain name and access token. Add the following content in the .env file.

SHOPIFY_STORE_URL=example.myshopify.com
SHOPIFY_STORE_TOKEN=28d86b7cb13a0b128fb61e48c6358845

Go to the “packages/shopify/api-client/src/”  and edit “index.ts” file and set the value of “domain” and “storefrontAccessToken”

defaultSettings: {
    domain: 'example.myshopify.com',
    storefrontAccessToken: '28d86b7cb13a0b128fb61e48c6358845'
}

Rate Limits

The Shopify’s Storefront API uses the leaky bucket algorithm to serve and manage the rate limit for API calls.

It limits customer interaction (unique IP addresses) time with the app to 60 seconds, rather than the ID of the shop. So, there won’t be any bottleneck due to a sudden spike in website traffic.

For example, Suppose an API call request takes 0.5 seconds. And each call costs a minimum of 0.5 seconds. In a particular case, the store can handle a maximum of 120 parallel requests.

Examples

Fetching Product:

First, obtain the object of Shopify JS SDK client.

import Client from 'shopify-buy';

// Initializing a client to return content in the store's primary language
const client = Client.buildClient({
    domain: 'example.myshopify.com',
    storefrontAccessToken: '28d86b7cb13a0b128fb61e48c6358845'
});

API Client: Use the product’s fetchAll method to access all records.

import { _shopifyClient } from '../../index';

async function fetchByHandle(options): Promise<Product[]> {
 const products = await _shopifyClient.product
   .fetchByHandle(options.slug)
   .then((products) => {
     return products;
   });
 return products;
}

export default fetchByHandle;

Theme: Here is the sample code on how to use product API and utilise product information in components.

import { useProduct } from '@vue-storefront/shopify';
import { onSSR } from '@vue-storefront/core';

export default {
 ...
 setup(props, context) {
  
   const { slug } = context.root.$route.params;

   const { products, search } = useProduct('products');
   const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: context.root.$route.query })[0]);
  
   onSSR(async () => {
     await search({ slug });
   });

   return {
     product
   };
 },
 ...
};

Fetching CMS page

Now, let’s try to implement something interesting. Let’s fetch CMS page data from Shopify. Click on the query root API to know more about the query parameters and response fields. The syntax information will help you prepare the GraphQL queries. Here is the GraphQL query to fetch a CMS page information:

query {
  pages(first: 1, query: "handle:'return-policy'") {
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
    edges {
      cursor
      node {
        id
        title
        body
        handle
      }
    }
  }
}

Now, convert this GraphQL query into a Shopify client object.

import {_shopifyCustomClient} from '../../index';

const pagesQuery = _shopifyCustomClient.graphQLClient.query((root) => {
	root.addConnection('pages', {args: {first: 1, query: "handle:'return-policy'"}}, (page) => {
		page.add('title');
		page.add('body');
		page.add('handle');
	});
});

And fetch the CMS page data.

const page = await _shopifyCustomClient
        .graphQLClient
        .send(pagesQuery)
        .then(({model, data}) => {
            return data.pages.edges[0].node;
        });

return page;

Take a look into the full source code:

import {_shopifyCustomClient} from '../../index';
import { Content } from "../../types";

async function fetchByHandle(options): Promise<Content> {

    const pagesQuery = _shopifyCustomClient.graphQLClient.query((root) => {
        root.addConnection('pages', {args: {first: 1, query: "handle:'"+options.slugs"'"}}, (page) => {
            page.add('title');
            page.add('body');
            page.add('handle');
        });
    });

    const page = await _shopifyCustomClient
        .graphQLClient
        .send(pagesQuery)
        .then(({model, data}) => {
            return data.pages.edges[0].node;
        });

    return page;
}

export default fetchByHandle;

Custom Module: To develop your custom module, you’ve to add api-client, composable, and use them in theme.

Api-client: (Location: packages/shopify/api-client/src/api/) Create a folder, name it based on your module, and implement all your API calls.

Composable: (Location: packages/shopify/composables/src/composables/) Create a folder and name it with prefix “use” keyword and add a getter file with postfix like “Getters.ts” in “getters” folder. Implement your composable methods inside your folder.

Hope you got a better understanding of the topic and learned what is Shopify Connector and how does it work. Later you learned how are the benefits, installation guide, configuration, and everything else. If you have any query or suggestion, feel free to use the comment box, I will be more than happy to reply you back.

Thanks : )

  • Share :