Update toolkit from Keystone 2.0.0

Author: thomaskimura

package-lock.json

@@ -1,11 +1,10 @@
 {
   "name": "keystone",
-  "type": "commonjs",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "scripts": {
     "dev": "npm-run-all --parallel vite_dev shopify_dev",
-    "pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",
-    "shopify_dev": "shopify theme dev --store brickspacetestingstore.myshopify.com",
+    "pull": "shopify theme pull --nodelete --store high-variant-combined-testing-store.myshopify.com",
+    "shopify_dev": "shopify theme dev --store high-variant-combined-testing-store.myshopify.com",
     "vite_dev": "vite dev",
     "test": "vitest",
     "coverage": "vitest run --coverage",
@@ -31,18 +30,18 @@
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.13",
-    "vite": "^4.2.0",
-    "vite-plugin-shopify": "^2.0.2",
+    "vite": "^5.0.0",
+    "vite-plugin-shopify": "^3.1.0",
     "vitest": "^0.29.7"
   },
   "dependencies": {
-    "@alpinejs/focus": "^3.12.0",
-    "@alpinejs/intersect": "^3.12.0",
-    "@alpinejs/persist": "^3.12.0",
-    "alpinejs": "^3.12.0",
-    "instant.page": "5.1.1"
+    "@alpinejs/focus": "^3.14.9",
+    "@alpinejs/intersect": "^3.14.9",
+    "@alpinejs/persist": "^3.14.9",
+    "alpinejs": "^3.14.9",
+    "instant.page": "5.2.0"
   },
   "config": {
-    "store": "brickspacetestingstore.myshopify.com"
+    "store": "high-variant-combined-testing-store.myshopify.com"
   }
 }

package.json

@@ -51,7 +51,7 @@ html {
 
 /* - strikethrough */
 .strikethrough {
-  @apply line-through decoration-[#00000050] decoration-2;
+  @apply !line-through decoration-[#00000050] decoration-2;
 }
 
 /* - reset line-height */

src/entrypoints/styles.css

@@ -28,9 +28,8 @@ export const cart = {
     try {
       const response = await fetch(`${window.Shopify.routes.root}cart.js`, {
         method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        credentials: "same-origin",
+        cache: "no-store",
       });
 
       if (!response.ok) {
@@ -39,14 +38,13 @@ export const cart = {
 
       const data = await response.json();
 
-      // Shopify properties
-      this.cart.items = data.items;
+      // Shopify properties - ensure complete replacement for reactivity
+      this.cart.items = [...data.items];
       this.cart.item_count = data.item_count;
       this.cart.total_price = data.total_price;
       this.cart.original_total_price = data.original_total_price;
       this.cart.total_discount = data.total_discount;
-      this.cart.cart_level_discount_applications =
-        data.cart_level_discount_applications;
+      this.cart.cart_level_discount_applications = data.cart_level_discount_applications;
 
       // Progress bar calculation
       let calcTotal;
@@ -77,6 +75,16 @@ export const cart = {
       // Optimize upsell handling - batch DOM operations
       this.handleUpsells();
 
+      // Ensure quantity inputs reflect authoritative cart quantities after DOM updates
+      // Small timeout allows Alpine to re-render before syncing inputs
+      setTimeout(() => {
+        try {
+          this.resetQuantityInputs();
+        } catch (e) {
+          // no-op
+        }
+      }, 10);
+
       // Set cart behavior based on screen width
       let cart_behavior;
       if (window.innerWidth < 768) {
@@ -237,7 +245,15 @@ export const cart = {
       else {
         this.error_message = data.description;
         this.error_alert = true;
-        this.cart_loading = false;
+
+        // When there's a stock limitation error, Shopify still updates the cart
+        // with the available quantity, so we need to refresh the cart data
+        this.updateCart(false, false);
+
+        // Force update of quantity input fields to reflect actual cart quantities
+        setTimeout(() => {
+          this.resetQuantityInputs();
+        }, 200);
       }
     } catch (error: any) {
       console.error("Error:", error);
@@ -326,7 +342,15 @@ export const cart = {
         else {
           this.error_message = data.description;
           this.error_alert = true;
-          this.cart_loading = false;
+
+          // Update cart to reflect the actual quantities that were added
+          // This ensures the UI shows the correct quantities after a stock limitation error
+          this.updateCart(false, false);
+
+          // Force update of quantity input fields to reflect actual cart quantities
+          setTimeout(() => {
+            this.resetQuantityInputs();
+          }, 200);
         }
       })
       .catch((error) => {
@@ -453,7 +477,15 @@ export const cart = {
       else {
         this.error_message = data.description;
         this.error_alert = true;
-        this.cart_loading = false;
+
+        // Update cart to reflect the actual quantities that were added
+        // This ensures the UI shows the correct quantities after a stock limitation error
+        this.updateCart(false, false);
+
+        // Force update of quantity input fields to reflect actual cart quantities
+        setTimeout(() => {
+          this.resetQuantityInputs();
+        }, 200);
       }
     } catch (error) {
       console.error("Error:", error);
@@ -508,7 +540,15 @@ export const cart = {
         else {
           this.error_message = data.description;
           this.error_alert = true;
-          this.cart_loading = false;
+
+          // Update cart to reflect the actual quantities that were added
+          // This ensures the UI shows the correct quantities after a stock limitation error
+          this.updateCart(false, false);
+
+          // Force update of quantity input fields to reflect actual cart quantities
+          setTimeout(() => {
+            this.resetQuantityInputs();
+          }, 200);
         }
       })
       .catch((error) => {
@@ -683,4 +723,32 @@ export const cart = {
     this._memoizedSummary = null;
     this._memoizedGroupedItems = null;
   },
+
+  // Reset quantity input fields to match actual cart quantities
+  // This is used when cart quantities are corrected due to stock limitations
+  resetQuantityInputs() {
+    // Find all quantity input fields and update them to match cart data
+    const quantityInputs = document.querySelectorAll('input[type="number"][x-model*="quantity"]');
+    quantityInputs.forEach((element: Element) => {
+      const input = element as HTMLInputElement;
+      // Get the cart item key from the input name or other attributes
+      const name = input.getAttribute('name') || input.getAttribute(':name') || '';
+      if (name.includes('cart-')) {
+        // Extract key from name like 'cart-12345:abcdef-quantity'
+        const keyMatch = name.match(/cart-([^-]+)-quantity/);
+        if (keyMatch) {
+          const key = keyMatch[1];
+          // Find the corresponding cart item
+          const cartItem = this.cart.items.find((item: any) => item.key.toString() === key);
+          if (cartItem && input.value !== cartItem.quantity.toString()) {
+            // Update the input value to match the actual cart quantity
+            input.value = cartItem.quantity.toString();
+            // Trigger input event to update Alpine.js binding
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+          }
+        }
+      }
+    });
+  },
+  
 };

src/ts/cart/cart.ts

@@ -55,35 +55,19 @@ export const collections = {
   },
 
   // Check if next page is avaible and inject more products
-  async fetchAndRenderNextPage() {
+  async fetchAndRenderTableRows(product_handle: string, total_pages: number, current_page: number, section_id: string, inject_before: string) {
+    
     // Show loading
     this.pagination_loading = true;
 
-    // Get filter data
-    const filter = document.getElementById(
-      "js-desktopFilter",
-    ) as HTMLFormElement;
-
     // Get pagination count
-    const pageUrl = `&page=${this.pagination_current_page + 1}`;
-
-    // Get search parameter
-    const searchUrl = new URL(location.href).searchParams.get("q")
-      ? `&q=${new URL(location.href).searchParams.get("q")}`
-      : "";
+    const pageUrl = `&page=${current_page}`;
 
     // Build fetch url
-    let fetchUrl = `${window.location.pathname}?section_id=${this.pagination_section}${pageUrl}${searchUrl}`;
-
-    // If filter exists, add filter data to fetch url
-    if (filter) {
-      const filterData = new FormData(filter);
-      const filterUrl = this.buildUrlFilter(filterData);
-      fetchUrl += filterUrl;
-    }
+    let fetchUrl = `${window.Shopify.routes.root}products/${product_handle}?section_id=${section_id}${pageUrl}`;
 
     // Check if new page is available
-    if (this.pagination_current_page < this.pagination_total_pages) {
+    if (current_page <= total_pages) {
       // Get data from Shopify
       try {
         const response = await fetch(fetchUrl);
@@ -94,24 +78,27 @@ export const collections = {
         tempElement.innerHTML = data;
 
         // Find the results within the fetched data
-        const fetchedElement = tempElement.querySelector("#js-results");
+        const fetchedElement = tempElement.querySelector(".js-results");
 
         // If results are found, append its innerHTML to the existing element on the page
         if (fetchedElement) {
-          const resultsElement = document.getElementById("js-results");
-          if (resultsElement) {
-            resultsElement.insertAdjacentHTML(
+          const injectSpot = document.querySelector(inject_before);
+          if (injectSpot) {
+            injectSpot.insertAdjacentHTML(
               "beforeend",
               fetchedElement.innerHTML,
             );
           }
         }
 
-        // Update next page url
-        this.pagination_current_page += 1;
+        if (current_page >= total_pages) {
+          this.pagination_load_more_button = false;
+        }
 
         // Reset loading
         this.loadImages();
+
+        // Reset loading
         this.pagination_loading = false;
       } catch (error) {
         console.error("Error:", error);
@@ -124,6 +111,100 @@ export const collections = {
       this.pagination_loading = false;
     }
   },
+  
+  // Check if next page is avaible and inject more products
+  async fetchAndRenderPage (direction: "next" | "previous") {
+  // Prevent browser from scrolling down
+  history.scrollRestoration = "manual";
+
+  // Show loading
+  this.pagination_loading = true;
+
+  // Update URL to show updated page number
+  if (direction === "next") {
+    let url = new URL(window.location.href);
+    url.searchParams.set("page", this.pagination_current_page + 1);
+    window.history.pushState({}, "", url.toString());
+  }
+
+  // Get filter data
+  const filter = document.getElementById("js-desktopFilter") as HTMLFormElement;
+
+  // Get pagination count
+  const pageUrl = `&page=${direction === "next" ? this.pagination_current_page + 1 : this.pagination_current_page - 1}`;
+
+  // Get search parameter
+  const searchUrl = new URL(location.href).searchParams.get("q") ? `&q=${new URL(location.href).searchParams.get("q")}` : '';
+
+  // Build fetch url
+  let fetchUrl = `${window.location.pathname}?section_id=${this.pagination_section}${pageUrl}${searchUrl}`;
+
+  // If filter exists, add filter data to fetch url
+  if (filter) {
+    const filterData = new FormData(filter);
+    const filterUrl = this.buildUrlFilter(filterData);
+    fetchUrl += filterUrl;
+  }
+  
+  // Check if new page is available
+  if (this.pagination_current_page < this.pagination_total_pages ||
+    direction === "previous") {
+
+    // Get data from Shopify
+    try {
+      const response = await fetch(fetchUrl);
+      const data = await response.text();
+
+      // Create a new HTML element and set its innerHTML to the fetched data
+      const tempElement = document.createElement("div");
+      tempElement.innerHTML = data;
+
+      // Find the results within the fetched data
+      const fetchedElement = tempElement.querySelector("#js-results");
+
+      // If results are found, append its innerHTML to the existing element on the page
+      if (fetchedElement) {
+        const resultsElement = document.getElementById("js-results");
+        if (resultsElement) {
+          if (direction === "next") {
+            resultsElement.insertAdjacentHTML(
+              "beforeend",
+              fetchedElement.innerHTML,
+            );
+          } else {
+            resultsElement.insertAdjacentHTML(
+              "afterbegin",
+              fetchedElement.innerHTML,
+            );
+          }
+        }
+      }
+
+      // Update next page url
+       // Update next page url
+       if (direction === "next") {
+        this.pagination_current_page += 1;
+        this.pagination_pages_loaded += 1;
+      } else {
+        this.pagination_current_page -= 1;
+      }
+      
+      // Reset loading
+      // this.loadImages();
+      this.pagination_loading = false;
+    } 
+
+    catch (error) {
+      console.error("Error:", error);
+      this.pagination_loading = false;
+    }
+  } 
+  
+  // If last page, stop loading
+  else {
+    this.pagination_loading = false;
+  }
+  },
 
   // Load quick add with section render
   async fetchAndRenderQuickGallery(product_handle: string) {

src/ts/collections/collections.ts

@@ -50,6 +50,7 @@ export const globals = {
   error_message: app.error_message,                        // {string} Error message
 
   // Pagination
+  pagination_pages_loaded: app.pagination_pages_loaded,    // {number} To track number of pages loaded
   pagination_loading: app.pagination_loading,              // {boolean} To show loading state in pagination
   pagination_total_pages: app.pagination_total_pages,      // {number} Total number of pages for the current collection
   pagination_current_page: app.pagination_current_page,    // {number} Current page number in pagination

src/ts/globals/globals.ts

@@ -30,6 +30,7 @@ export interface AppInterface {
   cart_drawer_style: string;
   error_alert: boolean;
   error_message: string;
+  pagination_pages_loaded: number;
   pagination_loading: boolean;
   pagination_total_pages: number;
   pagination_current_page: number;