Merge pull request #16 from GatsbyStorefront/v4

4.0.0-beta4

Author: paveli

.gitignore

@@ -10,3 +10,4 @@ public/
 yarn.lock
 .env
 yarn-error.log
+~*

.npmignore

@@ -1,4 +1,5 @@
 public
 .cache
 node_modules
-yarn-error.log
+yarn-error.log
+~*

README.md

@@ -24,7 +24,6 @@ And if you like Gatsby Storefront **please give us a star on GitHub** ⭐ 👍 
   - [Create `.env` file](#create-env-file)
   - [Enable theme](#enable-theme)
   - [Shopify content requirement](#shopify-content-requirement)
-  - [A setup for Shopify Lite plan](#a-setup-for-shopify-lite-plan)
   - [Starter](#starter)
 - [Configuration](#configuration)
   - [Configuration file](#configuration-file)
@@ -90,10 +89,17 @@ npm install @gatsbystorefront/gatsby-theme-storefront-shopify
 Create `.env` file in your store's root directory with your Shopify storename (**storename**.myshopify.com) and [access token](https://help.shopify.com/en/api/getting-started/authentication/private-authentication#generate-credentials-from-the-shopify-admin) (your token must have full permissions on Storefront API).
 
 ```
-GATSBY_SHOP_NAME=your_shopify_store_name
+GATSBY_SHOPIFY_SHOP_NAME=your_shopify_store_name
 GATSBY_SHOPIFY_ACCESS_TOKEN=your_shopify_access_token
 ```
 
+In case you are using Gatsby Storefront API to enable connections with external data sources (Contentful, Yotpo), please add additional configuration variables to your `.env` file:
+
+```
+GATSBYSTOREFRONT_API_URL=your_api_url.gatsbystorefront.com
+GATSBYSTOREFRONT_ACCESS_TOKEN=your_gatsbystorefrontApi_access_token
+```
+
 ### Enable theme
 
 Enable `gatsbystorefront/gatsby-theme-storefront-shopify` plugin in your `gatsby-config.js`:
@@ -107,17 +113,24 @@ module.exports = {
     {
       resolve: '@gatsbystorefront/gatsby-theme-storefront-shopify',
       options: {
-        shopName: process.env.GATSBY_SHOP_NAME,
-        accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
+        shopify: {
+          shopName: process.env.GATSBY_SHOPIFY_SHOP_NAME,
+          accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
+        },
+        gatsbyStorefrontApi: {
+          apiUrl: process.env.GATSBYSTOREFRONT_API_URL,
+          accessToken: process.env.GATSBYSTOREFRONT_ACCESS_TOKEN,
+        },
+        useGatsbyStorefrontApi: false, // Set to 'true' in case you are using Gatsby Storefront API to enable connections with external data sources
         basePath: '/',
-        shopifyLite: false, // default 'false'
-        enableWebp: true, // default 'true'
-        imageQuality: '95', // default '95', better to decrease but always check your result images quality
-        gatsbyImageProps: { // See: https://www.gatsbyjs.com/plugins/gatsby-image/#gatsby-image-props
-          loading: 'eager', // Using 'eager' currently improves Lighthouse 6 metrics. See: https://github.com/gatsbyjs/gatsby/issues/24332#issuecomment-650760081
-          fadeIn: false,
-          durationFadeIn: 500,
-        }
+        productImagesCarouselProps: {
+          // See: https://github.com/express-labs/pure-react-carousel#carouselprovider-
+          naturalSlideWidth: 500,
+          naturalSlideHeight: 500,
+        },
+        product: {
+          maxDescriptionSectionsNumber: 10,
+        },
         manifest: { // web app manifest options to be passed to 'gatsby-plugin-manifest' installed inside theme
           name: 'Gatsby Storefront Demo Store',
           short_name: 'Gatsby Storefront',
@@ -147,11 +160,7 @@ module.exports = {
 
 ### Shopify content requirement
 
-Please make sure that your Shopify web store has at least one [Collection](https://help.shopify.com/en/manual/products/collections), one [Product](https://help.shopify.com/en/manual/products/add-update-products) (associated with Collection), [Blog post](https://help.shopify.com/en/manual/sell-online/online-store/blogs/writing-blogs), [Page](https://help.shopify.com/en/manual/sell-online/online-store/pages) and [store Policies](https://help.shopify.com/en/manual/checkout-settings/refund-privacy-tos) added before runing your Gatsby Storefront, as it is neccesary for correct API exposure.
-
-### A setup for Shopify Lite plan
-
-If you are using Shopify Lite plan. Please set `shopifyLite` property to `true` in `@gatsbystorefront/gatsby-theme-storefront-shopify` plugin `options` in `gatsby-config.js`. This will disable generation of pages for Blog and Pages as they are not avalible in "Lite" plan.
+Please make sure that your Shopify web store has at least one [Collection](https://help.shopify.com/en/manual/products/collections), one [Product](https://help.shopify.com/en/manual/products/add-update-products) (associated with Collection) and [store Policies](https://help.shopify.com/en/manual/checkout-settings/refund-privacy-tos) added before runing your Gatsby Storefront, as it is neccesary for correct API exposure.
 
 ### Starter
 

gatsby-config.js

@@ -1,17 +1,31 @@
-module.exports = ({
-  shopName,
-  accessToken,
-  shopifyLite = false,
-  imageQuality = '95',
+const path = require('path');
+
+const config = ({
+  shopify = {},
+  gatsbyStorefrontApi = {},
+  useGatsbyStorefrontApi = false,
   manifest = {},
-  gatsbyImageProps = {},
-}) => ({
-  plugins: [
+  productImagesCarouselProps = {},
+  reviews = {},
+}) => {
+  const plugins = [
     {
-      resolve: 'gatsby-source-shopify',
+      resolve: '@gatsbystorefront/gatsby-source-shopify',
       options: {
-        shopName,
-        accessToken,
+        shopName:
+          useGatsbyStorefrontApi &&
+          gatsbyStorefrontApi.hasOwnProperty('apiUrl') &&
+          gatsbyStorefrontApi.apiUrl
+            ? gatsbyStorefrontApi.apiUrl
+            : shopify.shopName,
+        accessToken:
+          useGatsbyStorefrontApi &&
+          gatsbyStorefrontApi.hasOwnProperty('accessToken') &&
+          gatsbyStorefrontApi.accessToken
+            ? gatsbyStorefrontApi.accessToken
+            : shopify.accessToken,
+        useGatsbyStorefrontApi,
+        includeCollections: ['shop'],
       },
     },
     {
@@ -30,14 +44,7 @@ module.exports = ({
       },
     },
     'gatsby-plugin-react-helmet',
-    {
-      resolve: `gatsby-plugin-sharp`,
-      options: {
-        useMozJpeg: false,
-        stripMetadata: true,
-        defaultQuality: imageQuality,
-      },
-    },
+    'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-theme-ui',
     'gatsby-plugin-sitemap',
@@ -93,8 +100,9 @@ module.exports = ({
       },
     },
     'gatsby-plugin-loadable-components-ssr',
-  ],
-  siteMetadata: {
+  ];
+
+  const siteMetadata = {
     siteUrl: 'https://demo.gatsbystorefront.com',
     gatsbyStorefrontConfig: {
       storeName: 'Gatsby Storefront',
@@ -112,8 +120,10 @@ module.exports = ({
       // For available socia share buttons see: https://github.com/nygardk/react-share
       shareButtons: [],
       googleAnalyticsId: 'UA-141525658-3',
-      isShopifyLite: shopifyLite,
-      gatsbyImageProps: { ...gatsbyImageProps },
+      productImagesCarouselProps: { ...productImagesCarouselProps },
+      reviewsNumberPerPage: reviews.hasOwnProperty('reviewsNumberPerPage')
+        ? reviews.reviewsNumberPerPage
+        : 10,
       //
       // Main page types: "carousel", "collection", "product"
       //
@@ -126,5 +136,12 @@ module.exports = ({
       productsPerCollectionPage: '9',
       articlesPerBlogPage: '6',
     },
-  },
-});
+  };
+
+  return {
+    plugins,
+    siteMetadata,
+  };
+};
+
+module.exports = config;