Moved js to dedicated file

spolischook · Sep 11, 2024 · 180c259 · 180c259
1 parent 8aef75c
commit 180c259
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 62 deletions.
diff --git a/layouts/art-works/single.html b/layouts/art-works/single.html
@@ -71,75 +71,39 @@ <h1 class="text-4xl font-bold pb-2 text-tiger-300">{{ .Title }}</h1>
         {{.Content}}
         <section class="flex flex-col"></section>
             <h2 class="font-bold text-xl mt-3">Similar Art Works</h2>
-            <h3 class="text-gray-500 text-sm mb-5">that you might like...</h3>
+            <ul class="flex space-x-2 list-none">
+                {{ range .Params.categories }}
+                    <li>
+                        {{/*  filters on art-works/list page doesn't work yet :(  */}}
+                        {{/*  <a class="link flex space-x-1 justify-center items-center"
+                           href="{{ $.Site.BaseURL }}art-works?category={{ . | urlize }}">  */}}
+                        <div class="link flex space-x-1 justify-center items-center mb-2">
+                            <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16"
+                                 aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                      d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z">
+                                </path>
+                            </svg>
+                            <span>{{ . }}</span>
+                        </div>
+                        {{/*  </a>  */}}
+                    </li>
+                {{ end }}
+            </ul>
             <div class="flex flex-col sm:space-x-2 sm:space-y-0 space-x-0 space-y-2 sm:flex-row">
                 {{ partial "art-works/similar_in_categories.html" (dict "count" 4 "categories" .Params.categories "pages" .Site.Pages) }}
             </div>
         </section>
     </article>
 {{ end }}
 {{ define "scripts" }}
+    <script src="{{ "js/shopify.js" | relURL }}"></script>
     <script>
-        const client = ShopifyBuy.buildClient({
-            domain: '{{ .Site.Params.shopifyDomain }}',
-            storefrontAccessToken: '{{ .Site.Params.storefrontAccessToken }}'
-        });
-
-        let buyButton = document.getElementById('buy-button');
-        let buyButtonSpinner = document.getElementById('buy-button-spinner');
-        let unavailableToBuyButton = document.getElementById('unavailable-to-buy-button');
-        let buyButtonProcess = document.getElementById('buy-button-process');
-
-        // fixed page back from browser cache
-        window.addEventListener("pageshow",function(event) {
-            let historyTraversal = event.persisted ||
-                ( typeof window.performance != "undefined" &&
-                    window.performance.navigation.type === 2 );
-            if (historyTraversal) {
-                setupBuyButton();
-            }
-        });
-
-        function setupBuyButton() {
-            buyButton.classList.add('hidden');
-            buyButtonProcess.classList.add('hidden');
-            buyButtonSpinner.classList.remove('hidden');
-            unavailableToBuyButton.classList.add('hidden');
-
-            const productId = '{{ (printf "gid://shopify/Product/%d" .Params.shopifyId) | base64Encode }}';
-            client.product.fetch(productId).then((product) => {
-                let available = false;
-                buyButtonSpinner.classList.add('hidden');
-
-                if (!product) { unavailableToBuyButton.classList.remove('hidden'); return; }
-                if (!product.variants) { unavailableToBuyButton.classList.remove('hidden'); return; }
-                if (!product.variants[0].available) { unavailableToBuyButton.classList.remove('hidden'); return; }
-
-                buyButton.classList.remove('hidden');
-            });
-        }
-
-        setupBuyButton();
-
-        buyButton.addEventListener('click', function() {
-            buyButton.classList.add('hidden');
-            buyButtonProcess.classList.remove('hidden');
-            client.checkout.create().then((checkout) => {
-                const lineItemsToAdd = [
-                    {
-                        variantId: '{{ (printf "gid://shopify/ProductVariant/%d" .Params.shopifyOptionId) | base64Encode }}',
-                        {{/*variantId: '{{ (printf "gid://shopify/ProductVariant/%d" 41108734640233) | base64Encode }}',*/}}
-                        quantity: 1,
-                    }
-                ];
-
-                client.checkout.addLineItems(checkout.id, lineItemsToAdd).then((checkout) => {
-                    window.location.href = checkout.webUrl;
-                    // console.log(checkout.lineItems); // Array with one additional line item
-                }).catch((error) => {
-                    console.error(error);
-                });
-            });
-        });
+        setupShopifyBuyButton(
+            '{{ .Site.Params.shopifyDomain }}',
+            '{{ .Site.Params.storefrontAccessToken }}',
+            '{{ (printf "gid://shopify/Product/%d" .Params.shopifyId) | base64Encode }}',
+            '{{ (printf "gid://shopify/ProductVariant/%d" .Params.shopifyOptionId) | base64Encode }}'
+        );
     </script>
 {{ end }}
diff --git a/static/js/shopify.js b/static/js/shopify.js
@@ -0,0 +1,62 @@
+// assets/js/shopify.js
+
+function setupShopifyBuyButton(shopifyDomain, storefrontAccessToken, productId, productVariantId) {
+    const client = ShopifyBuy.buildClient({
+        domain: shopifyDomain,
+        storefrontAccessToken: storefrontAccessToken
+    });
+
+    let buyButton = document.getElementById('buy-button');
+    let buyButtonSpinner = document.getElementById('buy-button-spinner');
+    let unavailableToBuyButton = document.getElementById('unavailable-to-buy-button');
+    let buyButtonProcess = document.getElementById('buy-button-process');
+
+    // fixed page back from browser cache
+    window.addEventListener("pageshow", function(event) {
+        let historyTraversal = event.persisted ||
+            (typeof window.performance != "undefined" &&
+                window.performance.navigation.type === 2);
+        if (historyTraversal) {
+            setupBuyButton();
+        }
+    });
+
+    function setupBuyButton() {
+        buyButton.classList.add('hidden');
+        buyButtonProcess.classList.add('hidden');
+        buyButtonSpinner.classList.remove('hidden');
+        unavailableToBuyButton.classList.add('hidden');
+
+        client.product.fetch(productId).then((product) => {
+            buyButtonSpinner.classList.add('hidden');
+
+            if (!product || !product.variants || !product.variants[0].available) {
+                unavailableToBuyButton.classList.remove('hidden');
+                return;
+            }
+
+            buyButton.classList.remove('hidden');
+        });
+    }
+
+    setupBuyButton();
+
+    buyButton.addEventListener('click', function() {
+        buyButton.classList.add('hidden');
+        buyButtonProcess.classList.remove('hidden');
+        client.checkout.create().then((checkout) => {
+            const lineItemsToAdd = [
+                {
+                    variantId: productVariantId,
+                    quantity: 1,
+                }
+            ];
+
+            client.checkout.addLineItems(checkout.id, lineItemsToAdd).then((checkout) => {
+                window.location.href = checkout.webUrl;
+            }).catch((error) => {
+                console.error(error);
+            });
+        });
+    });
+}