fix-product-price-update (#79)

SallaApp · Oct 2, 2022 · 613dff3 · 613dff3
1 parent e9c5241
commit 613dff3
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 33 deletions.
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/public/filepond.css b/public/filepond.css
@@ -24,7 +24,7 @@
 
 .filepond--drop-label label{cursor:default;font-size:.875em;font-weight:400;text-align:center;line-height:1.5}
 
-.filepond--label-action{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;-webkit-text-decoration-color:#a7a4a4;text-decoration-color:#a7a4a4;cursor:pointer}
+.filepond--label-action{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-color:#a7a4a4;cursor:pointer}
 
 .filepond--root[data-disabled] .filepond--drop-label label{opacity:.5}
 
@@ -112,29 +112,23 @@
 
 [data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}
 
-[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg{-webkit-animation:fall .5s linear .125s both;animation:fall .5s linear .125s both}
+[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg{animation:fall .5s linear .125s both}
 
 [data-filepond-item-state=processing-complete] .filepond--file-status-sub{opacity:.5}
 
 [data-filepond-item-state=processing-complete] .filepond--file-info-sub,[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub{opacity:0}
 
 [data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub{opacity:.5}
 
-[data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel{-webkit-animation:shake .65s linear both;animation:shake .65s linear both}
+[data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel{animation:shake .65s linear both}
 
-[data-filepond-item-state*=busy] .filepond--progress-indicator svg{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
-
-@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+[data-filepond-item-state*=busy] .filepond--progress-indicator svg{animation:spin 1s linear infinite}
 
 @keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
 
-@-webkit-keyframes shake{10%,90%{transform:translateX(-.0625em)}20%,80%{transform:translateX(.125em)}30%,50%,70%{transform:translateX(-.25em)}40%,60%{transform:translateX(.25em)}}
-
 @keyframes shake{10%,90%{transform:translateX(-.0625em)}20%,80%{transform:translateX(.125em)}30%,50%,70%{transform:translateX(-.25em)}40%,60%{transform:translateX(.25em)}}
 
-@-webkit-keyframes fall{0%{opacity:0;transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
-
-@keyframes fall{0%{opacity:0;transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
+@keyframes fall{0%{opacity:0;transform:scale(.5);animation-timing-function:ease-out}70%{opacity:1;transform:scale(1.1);animation-timing-function:ease-in-out}to{transform:scale(1);animation-timing-function:ease-out}}
 
 .filepond--hopper[data-hopper-state=drag-over]>*{pointer-events:none}
 
@@ -156,11 +150,11 @@
 
 .filepond--item>.filepond--file-wrapper,.filepond--item>.filepond--panel{transition:opacity .15s ease-out}
 
-.filepond--item[data-drag-state]{cursor:-webkit-grab;cursor:grab}
+.filepond--item[data-drag-state]{cursor:grab}
 
 .filepond--item[data-drag-state]>.filepond--panel{transition:box-shadow .125s ease-in-out;box-shadow:0 0 0 transparent}
 
-.filepond--item[data-drag-state=drag]{cursor:-webkit-grabbing;cursor:grabbing}
+.filepond--item[data-drag-state=drag]{cursor:grabbing}
 
 .filepond--item[data-drag-state=drag]>.filepond--panel{box-shadow:0 .125em .3125em rgba(0,0,0,.325)}
 

diff --git a/public/flatpickr.css b/public/flatpickr.css
diff --git a/public/home.js b/public/home.js
diff --git a/public/loyalty.js b/public/loyalty.js
diff --git a/public/pages.js b/public/pages.js
diff --git a/public/product.js b/public/product.js
diff --git a/src/assets/js/app-helpers.js b/src/assets/js/app-helpers.js
@@ -37,6 +37,9 @@ export default class AppHelpers {
     if (typeof selector == 'object') {
       return selector;
     }
+    if (selector === '.total-price' || selector === '.before-price') {
+      return document.querySelectorAll(selector);
+    }
     return document.querySelector(selector);
   }
 

diff --git a/src/assets/js/product.js b/src/assets/js/product.js
@@ -12,25 +12,30 @@ class Product extends BasePage {
         new ProductOptions();
 
         app.watchElements({
-            totalPrice : '#total-price',
-            beforePrice: '#before-price',
+            totalPrice : '.total-price',
+            beforePrice: '.before-price',
         });
     }
 
     registerEvents() {
         salla.product.event.onPriceUpdated((res) => {
 
-            app.totalPrice.innerText = salla.money(res.data.price);
+            app.totalPrice.forEach(el => el.innerText = salla.money(res.data.price));
+            // app.totalPrice.innerText = salla.money(res.data.price);
 
-            app.anime('#total-price', {scale: [0.88, 1]});
+            app.anime('.total-price', {scale: [0.88, 1]});
 
             if (res.data.has_sale_price) {
-                app.beforePrice.style.display = 'inline';
-                app.beforePrice.innerText = salla.money(res.data.regular_price);
+                app.beforePrice.forEach(el => {
+                        el.style.display = 'inline'
+                        el.innerText = salla.money(res.data.regular_price)
+                    });
+                // app.beforePrice.style.display = 'inline';
+                // app.beforePrice.innerText = salla.money(res.data.regular_price);
                 return;
             }
-
-            app.beforePrice && (app.beforePrice.style.display = 'none')
+            app.beforePrice.length && app.beforePrice.forEach(el => el.style.display = 'none');
+            // app.beforePrice && (app.beforePrice.style.display = 'none')
         });
 
         app.onClick('#btn-show-more', e => app.all('#more-content', div => {

diff --git a/src/views/pages/product/single.twig b/src/views/pages/product/single.twig
@@ -187,11 +187,11 @@
                 <salla-rating-stars value="{{ product.rating ? product.rating : -1 }}"></salla-rating-stars>
 
                 <div class="mb-2 space-s-1">
-                    <h4 class="{{ product.is_on_sale ? 'text-red-400' : '' }} font-bold text-xl inline-block">
+                    <h4  class="total-price {{ product.is_on_sale ? 'text-red-400' : '' }} font-bold text-xl inline-block">
                         {{ product.price|money }}
                     </h4>
                     {% if product.is_on_sale %}
-                        <span class="text-gray-400 line-through">
+                        <span class="before-price text-gray-400 line-through">
                             {{ product.regular_price|money }}
                         </span>
                     {% endif %}
@@ -292,11 +292,11 @@
                                 </b>
                             </label>
                             <div class="space-s-1">
-                                <h4 id="total-price" class="{{ product.is_on_sale ? 'text-red-400' : '' }} font-bold text-xl inline-block">
+                                <h4  class="total-price {{ product.is_on_sale ? 'text-red-400' : '' }} font-bold text-xl inline-block">
                                     {{ product.price|money }}
                                 </h4>
                                 {% if product.is_on_sale %}
-                                    <span id="before-price" class="text-gray-400 line-through">
+                                    <span class="before-price text-gray-400 line-through">
                                         {{ product.regular_price|money }}
                                     </span>
                                 {% endif %}