@gammastream/scully-plugin-shopify

scully-plugin-shopify

This route plugin for Scully fetches collection and product ids/handles from Shopify for pre-rendering routes within an Angular application. It includes two plugins, one for fetch collections and another for fetching products.

Installation

To install this library with npm run:

$ npm install @gammastream/scully-plugin-shopify --save-dev

Usage

• Create a .env file in the root of your project. (Make sure this is ignored by git)
• Include your Shopify domain and access token.

SHOPIFY_DOMAIN=xample-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=djskjck3jskjdkjskjdkjf

• Import and configure the plugin as required. (See example below)
• Refer to the Shopify Buy SDK for query options.

import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import { getShopifyCollectionsPlugin , getShopifyProductsPlugin} from './dist/scully-plugin-shopify';
import * as dotenv from 'dotenv';
dotenv.config();

const shopifyConfig = {
    domain: process.env.SHOPIFY_DOMAIN,
    storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
};
const ShopifyCollectionsPlugin = getShopifyCollectionsPlugin();
setPluginConfig(ShopifyCollectionsPlugin, shopifyConfig);
const ShopifyProductsPlugin = getShopifyProductsPlugin();
setPluginConfig(ShopifyProductsPlugin, shopifyConfig);

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'scully-plugins',
  outDir: './dist/static',
  routes: {
    '/shopify-collections/:collectionHandle': {
        type: ShopifyCollectionsPlugin,
        query: {},
        collectionHandle: {
            property: 'handle'
        }
    },
    '/shopify-collections/:collectionHandle/:id': {
        type: ShopifyCollectionsPlugin,
        query: {
            first: 10
        },
        collectionHandle: {
            property: 'handle'
        },
        id: {
            property: 'id'
        }
    },
    '/shopify-product/:productHandle': {
        type: ShopifyProductsPlugin,
        query: {},
        productHandle: {
            property: 'handle'
        }
    }
  }
};

Build app and run scully like normal.

npm run build
npm run scully

Questions or Issues

If you have any issues you can raise them here or contact me at: GammaStream