Merge pull request #10 from FosterCommerce/fix-reactive-line-totals

fixes reactivity for line item total
FosterCommerce · Aug 16, 2024 · 6c942a0 · 6c942a0
2 parents 94d2faf + 3e68f70
commit 6c942a0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 37 deletions.
diff --git a/src/templates/_components/app/line-item-cart.twig b/src/templates/_components/app/line-item-cart.twig
@@ -2,6 +2,7 @@
 {% set maxQty = lineItem.purchasable.maxQty %}
 {% set stock = lineItem.purchasable.stock %}
 {% set unlimitedStock = lineItem.purchasable.hasUnlimitedStock ? 1 : 0 %}
+{% set lineSubtotal = lineItem.subtotalAsCurrency() %}
 
 
 {% set imageUrl = null %}
@@ -20,7 +21,7 @@
 {% endif %}
 
 <article
-	v-scope="LineItem({ id: {{ lineItem.id }}, qty: {{ lineItem.qty }}, min: {{ minQty ?? 0 }}, max: {{ maxQty ?? 0 }}, stock: {{ stock }}, unlimitedStock: {{ unlimitedStock }}, showErrorMaxMessage: false, showErrorMinMessage: false, showErrorStockMessage: false })"
+	v-scope="LineItem({ id: {{ lineItem.id }}, qty: {{ lineItem.qty }}, min: {{ minQty ?? 0 }}, max: {{ maxQty ?? 0 }}, stock: {{ stock }}, unlimitedStock: {{ unlimitedStock }}, lineSubtotal: '{{ lineSubtotal }}', showErrorMaxMessage: false, showErrorMinMessage: false, showErrorStockMessage: false })"
 	class="flex justify-start items-stretch gap-5 p-5 bg-gray-200 rounded-xl"
 >
 
@@ -103,20 +104,20 @@
           <button type="submit" class="js-hide text-sm underline text-gray-500 hover:no-underline hover:text-gray-700">Update</button>
 
           <div class="relative w-full w-full">
-            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorMinMessage">{{ 'You must purchase at least {qty} of this item' | t('foster-checkout', params = { qty: minQty }) }}</p>
+            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorMinMessage" v-cloak>{{ 'You must purchase at least {qty} of this item' | t('foster-checkout', params = { qty: minQty }) }}</p>
 
-            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorMaxMessage">{{ 'You may only purchase {qty} of this item' | t('foster-checkout', params = { qty: maxQty}) }}</p>
+            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorMaxMessage" v-cloak>{{ 'You may only purchase {qty} of this item' | t('foster-checkout', params = { qty: maxQty}) }}</p>
 
-            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorStockMessage">{{ 'Only {qty} in stock' | t('foster-checkout', params = { qty: stock }) }}</p>
+            <p class="text-red-700 text-sm text-right absolute top-[100%] w-full" v-if="showErrorStockMessage" v-cloak>{{ 'Only {qty} in stock' | t('foster-checkout', params = { qty: stock }) }}</p>
           </div>
         </form>
 
 				<div class="mt-3 md:mt-0">
 					{% if lineItem.onSale or lineItem.discount or lineItem.purchasable.onPromotion %}
             <h4 class="font-semibold">{{ (lineItem.purchasable.promotionalPrice * lineItem.qty)|commerceCurrency(cart.paymentCurrency) }}</h4>
-						<h5 class="mt-1 text-sm text-gray-600 line-through">{{ lineItem.subtotalAsCurrency() }}</h5>
+						<h5 class="mt-1 text-sm text-gray-600 line-through"><span v-text="lineSubtotal">{{ lineItem.subtotalAsCurrency() }}</span></h5>
           {% else %}
-            <h4 class="font-semibold">{{ lineItem.totalAsCurrency() }}</h4>
+            <h4 class="font-semibold"><span v-text="lineSubtotal">{{ lineItem.subtotalAsCurrency() }}</span></h4>
 					{% endif %}
 				</div>
 

diff --git a/src/web/assets/checkout/dist/.DS_Store b/src/web/assets/checkout/dist/.DS_Store
diff --git a/src/web/assets/checkout/dist/js/app.js b/src/web/assets/checkout/dist/js/app.js
@@ -42,6 +42,7 @@ const LineItem = (props) => {
     min: props.min,
     max: props.max,
     stock: props.stock,
+    lineSubtotal: props.lineSubtotal,
     unlimitedStock: props.unlimitedStock,
     showErrorMaxMessage: props.showErrorMaxMessage,
     showErrorMinMessage: props.showErrorMinMessage,
@@ -71,7 +72,7 @@ const LineItem = (props) => {
       this.showErrorMinMessage = false;
       this.showErrorStockMessage = false;
     },
-    updateQty() {
+    async updateQty() {
       if(this.unlimitedStock === 0 && this.qty > this.stock) {
         this.qty = this.stock;
         this.showErrorStockMessage = true;
@@ -83,18 +84,46 @@ const LineItem = (props) => {
         this.showErrorMaxMessage = true;
       } else {
         props.qty = this.qty;
-        UpdateQty(props);
+        // UpdateQty(props);
+
+        const form = document.querySelector(`#lineItemQty-${props.id}`);
+        const formData = new FormData(form)
+        formData.set(`lineItems[${props.id}][qty]`, props.qty);
+
+        await fetch('/actions/commerce/cart/update-cart', {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          },
+          body: formData,
+        })
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return response.json();
+          })
+          .then(data => {
+            let item = data.cart.lineItems.filter((lineItem) => lineItem.id === props.id)
+            console.log(item);
+            this.lineSubtotal = item[0].subtotalAsCurrency;
+            this.line
+          })
+          .catch(error => {
+            console.error('Error:', error);
+          });
       }
     }
   }
 };
 
-const UpdateQty =  (props) => {
-  const form = document.querySelector(`#lineItemQty-${props.id}`);
-  const formData = new FormData(form)
-  formData.set(`lineItems[${props.id}][qty]`, props.qty);
-  UpdateCart(formData);
-}
+// const UpdateQty =  (props) => {
+//   const form = document.querySelector(`#lineItemQty-${props.id}`);
+//   const formData = new FormData(form)
+//   formData.set(`lineItems[${props.id}][qty]`, props.qty);
+//   UpdateCart(formData);
+// }
 
 const RemoveLineItem = (props) => {
   const form = document.querySelector(`#lineItemQty-${props.id}`);
@@ -107,29 +136,6 @@ const RemoveLineItem = (props) => {
 }
 
 
-const UpdateCart = async (formData) => {
-  await fetch('/actions/commerce/cart/update-cart', {
-    method: 'POST',
-    headers: {
-      'Accept': 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
-    },
-    body: formData,
-  })
-    .then(response => {
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      return response.json();
-    })
-    .then(data => {
-      console.log(data)
-    })
-    .catch(error => {
-      console.error('Error:', error);
-    });
-}
-
 const FocusModal = (props) => {
   return {
     isOpen: props.isOpen,