getnacelle · NWRichmond · Oct 20, 2021 · Oct 19, 2021 · Oct 19, 2021 · Oct 19, 2021
diff --git a/components/cart/Cart.vue b/components/cart/Cart.vue
@@ -1,5 +1,11 @@
 <template>
-  <div v-show="showCart" class="fixed inset-0 overflow-hidden z-20" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
+  <div
+    v-show="showCart"
+    class="fixed inset-0 overflow-hidden z-20"
+    aria-labelledby="slide-over-title"
+    role="dialog"
+    aria-modal="true"
+  >
     <div class="absolute inset-0 overflow-hidden">
       <cart-overlay />
       <cart-drawer />
@@ -8,7 +14,16 @@
 </template>
 
 <script>
-import { inject, ref, provide, watch } from "@nuxtjs/composition-api";
+import {
+  inject,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  useContext,
+  watch
+} from "@nuxtjs/composition-api";
+import { useCartProvider } from "@nacelle/vue";
 import CartOverlay from "./CartOverlay.vue";
 import CartDrawer from "./CartDrawer.vue";
 
@@ -22,24 +37,92 @@ export default {
     }
   },
   setup(props) {
+    const { cart } = useCartProvider();
     const showCart = ref(false);
     const cartOpen = inject("cartOpen");
+    const { $shopifyCheckout } = useContext();
+    const { clearCart } = useCartProvider();
+    const initialCheckoutData = {
+      id: "",
+      url: "",
+      completed: false
+    };
+    const checkoutData = reactive(initialCheckoutData);
+    const isCheckingOut = ref(false);
 
-    provide("drawer", props.content?.fields?.drawer)
-    provide("item", props.content?.fields?.item)
-    provide("total", props.content?.fields?.total)
-    provide("crosssells", props.content?.fields?.crosssells)
+    const updateCheckoutData = newData => {
+      if (newData?.id !== checkoutData.id) {
+        window.localStorage.setItem("checkoutId", newData.id);
+      }
+
+      Object.keys(newData).forEach(
+        property => (checkoutData[property] = newData[property])
+      );
+    };
+
+    onMounted(async () => {
+      let checkoutId = window.localStorage.getItem("checkoutId") || "";
+
+      if (checkoutId) {
+        await $shopifyCheckout.get({ id: checkoutId }).then(checkout => {
+          if (checkout.completed) {
+            clearCart();
+            updateCheckoutData(initialCheckoutData);
+          } else {
+            updateCheckoutData(checkout);
+          }
+        });
+      }
+    });
+
+    const processCheckout = () => {
+      isCheckingOut.value = true;
+      $shopifyCheckout
+        .process({
+          cartItems: cart.lineItems.map(cartItem => ({
+            quantity: cartItem.quantity,
+            variantId: cartItem.variant.id,
+            metafields: {
+              ...cartItem.product.metafields,
+              ...cartItem.variant.metafields
+            }
+          })),
+          id: checkoutData.id
+        })
+        .then(checkoutData => {
+          updateCheckoutData(checkoutData);
+
+          if (checkoutData.url) {
+            window.location.href = checkoutData.url;
+          }
+        })
+        .catch(err => {
+          isCheckingOut.value = false;
+
+          throw new Error(err);
+        });
+    };
 
     watch(cartOpen, value => {
-      if (value) showCart.value = value
-      else {
+      if (value) {
+        showCart.value = value;
+      } else {
         setTimeout(() => {
           showCart.value = value;
         }, 500);
       }
     });
 
+    provide("checkoutData", checkoutData);
+    provide("crosssells", props.content?.fields?.crosssells);
+    provide("drawer", props.content?.fields?.drawer);
+    provide("isCheckingOut", isCheckingOut);
+    provide("item", props.content?.fields?.item);
+    provide("processCheckout", processCheckout);
+    provide("total", props.content?.fields?.total);
+    provide("updateCheckoutData", updateCheckoutData);
+
     return { showCart };
   }
-}
+};
 </script>
diff --git a/components/cart/CartTotal.vue b/components/cart/CartTotal.vue
@@ -2,15 +2,40 @@
   <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
     <div class="flex justify-between text-base font-medium text-gray-900">
       <p>{{ content.subtotal }}</p>
-      <p><price :price="subtotal" :currencyCode="currencyCode" :locale="locale" /></p>
+      <p>
+        <price
+          :price="subtotal"
+          :currencyCode="currencyCode"
+          :locale="locale"
+        />
+      </p>
     </div>
-    <p v-if="content.message" class="mt-0.5 text-sm text-gray-500">{{ content.message }}</p>
+    <p v-if="content.message" class="mt-0.5 text-sm text-gray-500">
+      {{ content.message }}
+    </p>
     <div class="mt-6">
-      <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">{{ content.checkout }}</a>
+      <button
+        @click="processCheckout"
+        :disabled="isCheckingOut"
+        class="w-full flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 ease-in-out"
+        :class="{ 'bg-gray-600': isCheckingOut }"
+      >
+        {{ checkoutButtonText }}
+      </button>
     </div>
-    <div v-if="content.continue" class="mt-6 flex justify-center text-sm text-center text-gray-500">
+    <div
+      v-if="content.continue"
+      class="mt-6 flex justify-center text-sm text-center text-gray-500"
+    >
       <p>
-        or <button type="button" @click="setCartOpen(false)" class="text-indigo-600 font-medium hover:text-indigo-500">{{ content.continue }}<span aria-hidden="true"> &rarr;</span></button>
+        or
+        <button
+          type="button"
+          @click="setCartOpen(false)"
+          class="text-indigo-600 font-medium hover:text-indigo-500"
+        >
+          {{ content.continue }}<span aria-hidden="true"> &rarr;</span>
+        </button>
       </p>
     </div>
   </div>
@@ -27,9 +52,14 @@ export default {
     Price
   },
   setup() {
+    const { cart } = useCartProvider();
     const content = inject("total");
+    const processCheckout = inject("processCheckout");
     const setCartOpen = inject("setCartOpen");
-    const { cart } = useCartProvider();
+    const isCheckingOut = inject("isCheckingOut");
+    const checkoutButtonText = computed(() =>
+      isCheckingOut.value ? "Checking Out..." : content.checkout
+    );
     const subtotal = computed(() => {
       return cart.lineItems.reduce((sum, item) => {
         return sum + item.quantity * item.variant.price;
@@ -41,7 +71,18 @@ export default {
     const locale = computed(() => {
       return cart.lineItems[0].product.locale;
     });
-    return { content, setCartOpen, cart, subtotal, currencyCode, locale };
+
+    return {
+      cart,
+      checkoutButtonText,
+      content,
+      currencyCode,
+      isCheckingOut,
+      locale,
+      processCheckout,
+      setCartOpen,
+      subtotal
+    };
   }
-}
+};
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -23,12 +23,12 @@
 
 <script>
 import {
-  ref,
   inject,
   provide,
-  watch,
+  ref,
   useContext,
-  useFetch
+  useFetch,
+  watch
 } from "@nuxtjs/composition-api";
 
 import {
@@ -65,6 +65,7 @@ export default {
 
     const setCartOpen = val => (cartOpen.value = val);
     const setNavOpen = val => (navOpen.value = val);
+
     useFetch(async () => {
       const [header, footer, newsletter, cart, searchData] = await Promise.all([
         nacelleSdk.data.content({

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -18,7 +18,10 @@ export default {
 
   css: [],
 
-  plugins: [{ src: "~/plugins/globalSetup.js" }],
+  plugins: [
+    { src: "~/plugins/globalSetup.js" },
+    { src: "~/plugins/shopifyCheckout.js", mode: "client" }
+  ],
 
   components: true,
 
@@ -35,7 +38,7 @@ export default {
     },
     shopify: {
       storefrontCheckoutToken: process.env.SHOPIFY_STOREFRONT_TOKEN,
-      myshopifyDomain: process.env.SHOPIFY_STOREFRONT_DOMAIN,
+      myshopifyDomain: process.env.SHOPIFY_SHOP_ID,
       storefrontApiVersion: process.env.SHOPIFY_STOREFRONT_VERSION
     }
   },