Fixed variants pdp (#83)

* Added country support

* Extended connector

* Removed yarn.lock

* feat(release 1.0.1): make the connector compitible with shopify template latest release

Updated Shopify connector for improvements

* fix(usecart/index.ts): fixed per page cookie creation

fixed cart bug

* fix(updated connector version to 1.0.2): updated connector version to 1.0.2

Updated connector version to 1.0.2

* fix(fixed cart reset on successful checkour): fixed cart reset bug

On successful order placement cart was not resetting

#63

packages/api-client/src/api/addToCart/index.ts

@@ -2,13 +2,14 @@
 import { CustomQuery } from '@vue-storefront/core';
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default async function addToCart(context, params, _customQuery?: CustomQuery) {
-  const { currentCart, product, quantity } = params;
+  const { currentCart, product, quantity, customQuery } = params;
   // Existing Checkout ID
   const checkoutID = currentCart.id;
   // Items to be add to cart
   const lineItemsToAdd = [{
     variantId: product.variantBySelectedOptions && product.variantBySelectedOptions !== null ? product.variantBySelectedOptions.id : product.variantId,
-    quantity
+    quantity,
+    customAttributes: customQuery
   }];
   // Add an item to the checkout
   return await context.client.checkout.addLineItems(checkoutID, lineItemsToAdd).then((checkout) => checkout);

packages/composables/src/getters/cartGetters.ts

@@ -71,7 +71,7 @@ export const getcheckoutURL = (cart: Cart): string => {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const getCartTotalItems = (cart: Cart): number => {
-  if (cart) {
+  if (cart && cart.lineItems && cart.lineItems.length > 0) {
     return cart.lineItems.reduce((n, { quantity }) => n + quantity, 0);
   }
   return 0;

packages/composables/src/getters/productGetters.ts

@@ -75,7 +75,7 @@ export const getProductFiltered = (products, filters: ProductVariantFilters | an
     return [];
   }
   products = Array.isArray(products) ? products : [products];
-  return enhanceProduct(products);
+  return Object.keys(products).length > 0 ? enhanceProduct(products) : [];
 };
 export const getFilteredSingle = (product) => {
   if (!product) {

packages/composables/src/helpers/internals/enhanceProduct.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const enhanceProduct = (productResponse: Array<any>) => {
+  if (Object.keys(productResponse).length === 0) return;
   const enhancedProductResponse = productResponse.map((product) => ({
     ...product,
     name: product.variantBySelectedOptions && product.variantBySelectedOptions !== null ? product.variantBySelectedOptions.title : product.title,

packages/theme/components/CartSidebar.vue

@@ -208,7 +208,7 @@ import {
   SfNotification,
   SfLoader
 } from '@storefront-ui/vue';
-import { computed } from '@vue/composition-api';
+import { computed, onBeforeMount } from '@vue/composition-api';
 import { useCart, useUser, cartGetters } from '@vue-storefront/shopify';
 import { onSSR } from '@vue-storefront/core';
 import { useUiState, useUiNotification } from '~/composables';
@@ -313,6 +313,43 @@ export default {
         window.location.replace(checkoutUrl);
       }, 400);
     }
+  },
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  setup(props, {root}) {
+    const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
+    const { cart, removeItem, updateItemQty, load: loadCart } = useCart();
+    const { isAuthenticated } = useUser();
+    const { send: sendNotification, notifications } = useUiNotification();
+    const products = computed(() => cartGetters.getItems(cart.value));
+    const totals = computed(() => cartGetters.getTotals(cart.value));
+    const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
+    const checkoutURL = computed(() => cartGetters.getcheckoutURL(cart.value));
+
+    onSSR(async () => {
+      await loadCart();
+    });
+    onBeforeMount(async () => {
+        await loadCart().then(() => {
+          if (cart && cart.value.orderStatusUrl !== null) {
+            root.$cookies.remove(`${root.$config.appKey}_cart_id`); 
+          }
+        });
+    });
+
+    return {
+      isAuthenticated,
+      products,
+      removeItem,
+      updateItemQty,
+      isCartSidebarOpen,
+      toggleCartSidebar,
+      totals,
+      totalItems,
+      cartGetters,
+      checkoutURL,
+      sendNotification,
+      notifications
+    };
   }
 };
 </script>

packages/theme/helpers/afterloadforci.js

@@ -0,0 +1,13 @@
+// callback - the function to run after onLoad
+// delay - wait X milliseconds after onLoad
+export const afterLoad = (callback, delay = 10) => {
+  // missed the load event, run now
+  if (document.readyState === 'complete') {
+    setTimeout(() => callback(), delay);
+  } else {
+    // eslint-disable-next-line func-names
+    window.addEventListener('load', () => {
+      setTimeout(() => callback(), delay);
+    });
+  }
+};

packages/theme/integrations/refresh-caching.client.js

@@ -0,0 +1,22 @@
+export default async({ $cookies, $config }) => {
+  if ('serviceWorker' in navigator) {
+    if ($config.appVersion !== $cookies.get('AppVer')) {
+      await navigator.serviceWorker.getRegistrations().then((registrations) => {
+        for (const registration of registrations) {
+          registration.unregister();
+        }
+      }).catch((err) => {
+        console.log('Service Worker registration failed: ', err);
+      });
+      caches.keys().then(cacheNames => {
+        cacheNames.forEach(cacheName => {
+          caches.delete(cacheName);
+        });
+      }).then(() => {
+        $cookies.set('AppVer', $config.appVersion, { maxAge: 60 * 60 * 24 * 365 });
+        // register service worker
+        navigator.serviceWorker.register('/sw.js');
+      });
+    }
+  }
+}

packages/theme/middleware.config.js

@@ -4,8 +4,8 @@ module.exports = {
       location: '@vue-storefront/shopify-api/server',
       configuration: {
         api: {
-          domain: process.env.SHOPIFY_DOMAIN,
-          storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_TOKEN
+          domain: 'vsf-next-pwa.myshopify.com',
+          storefrontAccessToken: '03f21475b97c18fa05c0ab452c368af4'
         },
         currency: 'USD',
         country: 'US'

packages/theme/modules/integrations.js

@@ -0,0 +1,21 @@
+import { resolve, join } from 'path';
+import { readdirSync, statSync } from 'fs';
+
+// eslint-disable-next-line func-names
+export default function () {
+  this.nuxt.hook('build:before', () => {
+    const folder = resolve(__dirname, '../integrations');
+    const files = readdirSync(folder);
+
+    files.forEach((file) => {
+      const filename = resolve(folder, file);
+      const stat = statSync(filename);
+
+      if (stat.isFile()) {
+        const { dst } = this.addTemplate(filename);
+        this.options.plugins.push(join(this.options.buildDir, dst));
+      }
+    });
+  });
+}
+

packages/theme/nuxt.config.js

@@ -7,8 +7,16 @@ export default {
     host: '0.0.0.0'
   },
   publicRuntimeConfig: {
-    appKey: 'vsf2Connector' + Date.now()
+    appKey: 'vsf2spcon',
+    appVersion: Date.now()
   },
+  privateRuntimeConfig: {
+    storeURL: process.env.SHOPIFY_DOMAIN,
+    storeToken: process.env.SHOPIFY_STOREFRONT_TOKEN
+  },
+  serverMiddleware: [
+    { path: '/custom', handler: '~/server-middleware/custom-features.js' }
+  ],
   head: {
     title: 'Shopify | Vue Storefront Next',
     meta: [
@@ -166,7 +174,10 @@ export default {
           lastCommit: process.env.LAST_COMMIT || ''
         })
       })
-    ]
+    ],
+    extractCSS: {
+      ignoreOrder: true
+    }
   },
   router: {
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -233,7 +244,7 @@ export default {
       description:
         'This is the Shopify PWA app for VSF Next - Developed by Aureate labs',
       themeColor: '#5ece7b',
-      ogHost: 'shopify-pwa-beta.aureatelabs.com'
+      ogHost: 'shopify-pwa.aureatelabs.com'
     },
     icon: {
       iconSrc: 'src/static/android-icon-512x512.png'
@@ -269,8 +280,8 @@ export default {
         }
       ],
       preCaching: [
-        '//shopify-pwa-beta.aureatelabs.com/c/**',
-        '//shopify-pwa-beta.aureatelabs.com/'
+        '//shopify-pwa.aureatelabs.com/c/**',
+        '//shopify-pwa.aureatelabs.com/'
       ]
     }
   }

packages/theme/pages/Product.vue

@@ -163,7 +163,7 @@
               <SfButton
                 class="sf-add-to-cart__button"
                 :disabled="loading"
-                @click="addingToCart({ product, quantity: parseInt(qty) })"
+                @click="addingToCart({ product, quantity: parseInt(qty), customQuery: [{key: 'CustomAttrKey', value: 'CustomAttrValue'}]})"
               >
                 Add to Bag
               </SfButton>

packages/theme/server-middleware/custom-features.js

@@ -0,0 +1,20 @@
+const bodyParser = require('body-parser');
+const app = require('express')();
+const axios = require('axios');
+module.exports = {
+  path: '/',
+  handler: app
+};
+app.use(bodyParser.json());
+
+app.get('/cart.js', (req, res) => {
+  const options = {
+    method: 'GET',
+    url: `https://${process.env.SHOPIFY_DOMAIN}` + req.originalUrl
+  };
+  axios.request(options).then((response) => {
+    res.status(200).send(response.data);
+  }).catch((error) => {
+    console.error(error);
+  });
+});