feat: enable Shopify checkout from cart

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>

components/cart/CartCrossSells.vue

@@ -5,26 +5,44 @@
     </h2>
     <ul>
       <li v-for="item in activeCrossSells" :key="item.id" class="py-6 flex">
-        <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
-          <nuxt-img :src="item.variants[0].featuredMedia.src" :alt="item.variants[0].featuredMedia.alt" class="w-full h-full object-center object-cover" />
+        <div
+          class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden"
+        >
+          <nuxt-img
+            :src="item.variants[0].featuredMedia.src"
+            :alt="item.variants[0].featuredMedia.alt"
+            class="w-full h-full object-center object-cover"
+          />
         </div>
 
         <div class="ml-4 flex-1 flex flex-col">
           <div>
-            <div class="flex justify-between text-base font-medium text-gray-900">
+            <div
+              class="flex justify-between text-base font-medium text-gray-900"
+            >
               <h3>
                 <nuxt-link :to="`/products/${item.handle}`">
                   {{ item.title }}
                 </nuxt-link>
               </h3>
               <p class="ml-4">
-                <price :price="item.variants[0].price" :currencyCode="item.priceRange.currencyCode" :locale="item.locale" />
+                <price
+                  :price="item.variants[0].price"
+                  :currencyCode="item.priceRange.currencyCode"
+                  :locale="item.locale"
+                />
               </p>
             </div>
           </div>
           <div class="flex-1 flex items-end text-sm">
             <div class="flex w-full">
-              <button type="button" @click="addProduct(item)" class="relative flex bg-gray-100 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-gray-900 hover:bg-gray-200 w-full">{{ content.add }}<span class="sr-only">, {{ item.title }}</span></button>
+              <button
+                type="button"
+                @click="addProduct(item)"
+                class="relative flex bg-gray-100 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-gray-900 hover:bg-gray-200 w-full"
+              >
+                {{ content.add }}<span class="sr-only">, {{ item.title }}</span>
+              </button>
             </div>
           </div>
         </div>
@@ -48,17 +66,25 @@ export default {
     const { cart, addItem } = useCartProvider();
     const crossSells = ref([]);
     const content = inject("crosssells");
+    const isCheckingOut = inject("isCheckingOut");
 
-    const addProduct = (product) => {
-      addItem({ product, variant: product.variants[0], quantity: 1 });
+    const addProduct = product => {
+      if (!isCheckingOut.value) {
+        addItem({ product, variant: product.variants[0], quantity: 1 });
+      }
     };
 
     const activeCrossSells = computed(() => {
-      return crossSells.value.filter((crossSell) => {
-        return crossSell.availableForSale && !cart.lineItems.some((lineItem) => {
-          return lineItem.product.id === crossSell.id;
+      return crossSells.value
+        .filter(crossSell => {
+          return (
+            crossSell.availableForSale &&
+            !cart.lineItems.some(lineItem => {
+              return lineItem.product.id === crossSell.id;
+            })
+          );
         })
-      }).slice(0, 3);
+        .slice(0, 3);
     });
 
     useFetch(async () => {
@@ -69,5 +95,5 @@ export default {
 
     return { content, addProduct, crossSells, activeCrossSells };
   }
-}
+};
 </script>

components/cart/CartDrawer.vue

@@ -1,19 +1,41 @@
 <template>
   <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
     <transition name="slide">
-      <div v-show="cartOpen" class="w-screen max-w-md transform transition ease-in-out duration-500">
+      <div
+        v-show="cartOpen"
+        class="w-screen max-w-md transform transition ease-in-out duration-500"
+      >
         <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
           <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
-
             <div class="flex items-start justify-between">
-              <h2 class="text-lg font-medium text-gray-900" id="slide-over-title">
+              <h2
+                class="text-lg font-medium text-gray-900"
+                id="slide-over-title"
+              >
                 {{ content.heading }}
               </h2>
               <div class="ml-3 h-7 flex items-center">
-                <button type="button" @click="setCartOpen(false)" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
+                <button
+                  v-show="!isCheckingOut"
+                  type="button"
+                  @click="setCartOpen(false)"
+                  class="-m-2 p-2 text-gray-400 hover:text-gray-500"
+                >
                   <span class="sr-only">Close panel</span>
-                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <svg
+                    class="h-6 w-6"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
                   </svg>
                 </button>
               </div>
@@ -23,10 +45,16 @@
               <div class="flow-root">
                 <div v-if="cart.lineItems.length">
                   <ul role="list" class="-my-6 divide-y divide-gray-200">
-                    <cart-item v-for="item in cart.lineItems" :key="item.id" :item="item" />
+                    <cart-item
+                      v-for="item in cart.lineItems"
+                      :key="item.id"
+                      :item="item"
+                    />
                   </ul>
                 </div>
-                <p v-else class="text-gray-400 text-center">{{ content.empty }}</p>
+                <p v-else class="text-gray-400 text-center">
+                  {{ content.empty }}
+                </p>
                 <cart-cross-sells />
               </div>
             </div>
@@ -56,10 +84,12 @@ export default {
     const { cart } = useCartProvider();
     const cartOpen = inject("cartOpen");
     const setCartOpen = inject("setCartOpen");
-    const content = inject("drawer")
-    return { content, cart, cartOpen, setCartOpen };
+    const content = inject("drawer");
+    const isCheckingOut = inject("isCheckingOut");
+
+    return { content, cart, cartOpen, isCheckingOut, setCartOpen };
   }
-}
+};
 </script>
 
 <style scoped>

components/cart/CartItem.vue

@@ -1,7 +1,13 @@
 <template>
   <li class="py-6 flex">
-    <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
-      <nuxt-img :src="item.variant.featuredMedia.src" :alt="item.variant.featuredMedia.alt" class="w-full h-full object-center object-cover" />
+    <div
+      class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden"
+    >
+      <nuxt-img
+        :src="item.variant.featuredMedia.src"
+        :alt="item.variant.featuredMedia.alt"
+        class="w-full h-full object-center object-cover"
+      />
     </div>
 
     <div class="ml-4 flex-1 flex flex-col">
@@ -13,20 +19,34 @@
             </nuxt-link>
           </h3>
           <p class="ml-4">
-            <price :price="item.variant.price" :currencyCode="item.product.priceRange.currencyCode" :locale="item.product.locale" />
+            <price
+              :price="item.variant.price"
+              :currencyCode="item.product.priceRange.currencyCode"
+              :locale="item.product.locale"
+            />
           </p>
         </div>
-        <p v-if="item.variant.title && item.variant.title.toLowerCase() !== 'default title'" class="mt-1 text-sm text-gray-500">
+        <p
+          v-if="
+            item.variant.title &&
+              item.variant.title.toLowerCase() !== 'default title'
+          "
+          class="mt-1 text-sm text-gray-500"
+        >
           {{ item.variant.title }}
         </p>
       </div>
       <div class="flex-1 flex items-end justify-between text-sm">
-        <p class="text-gray-500">
-          {{ content.quantity }} {{ item.quantity }}
-        </p>
+        <p class="text-gray-500">{{ content.quantity }} {{ item.quantity }}</p>
 
         <div class="flex">
-          <button type="button" @click="removeItem(item.id)" class="font-medium text-indigo-600 hover:text-indigo-500">{{ content.remove }}</button>
+          <button
+            type="button"
+            @click="removeItemFromCart(item.id)"
+            class="font-medium text-indigo-600 hover:text-indigo-500"
+          >
+            {{ content.remove }}
+          </button>
         </div>
       </div>
     </div>
@@ -51,8 +71,16 @@ export default {
   },
   setup() {
     const { removeItem } = useCartProvider();
-    const content = inject("item")
-    return { content, removeItem };
+    const content = inject("item");
+    const isCheckingOut = inject("isCheckingOut");
+
+    const removeItemFromCart = cartItemId => {
+      if (!isCheckingOut.value) {
+        removeItem(cartItemId);
+      }
+    };
+
+    return { content, removeItemFromCart, isCheckingOut };
   }
-}
+};
 </script>