refactor: show toast when add to cart is pressed

_dev/js/components/block-cart.js

@@ -24,32 +24,68 @@
  */
 import prestashop from 'prestashop';
 import $ from 'jquery';
+import 'jquery-toast-plugin';
+import 'jquery-toast-plugin/dist/jquery.toast.min.css';
 
-$(function() {
+$(() => {
   prestashop.blockcart = prestashop.blockcart || {};
-  prestashop.on('updateCart', function(event) {
-      var refreshURL = $('.blockcart').data('refresh-url');
-      var requestData = {};
-      if (event && event.reason && typeof event.resp !== 'undefined' && !event.resp.hasError) {
-          requestData = {
-              id_customization: event.reason.idCustomization,
-              id_product_attribute: event.reason.idProductAttribute,
-              id_product: event.reason.idProduct,
-              action: event.reason.linkAction
-          }
-      }
-      if (event && event.resp && event.resp.hasError) {
-          prestashop.emit('showErrorNextToAddtoCartButton', {
-              errorMessage: event.resp.errors.join('<br/>')
-          })
-      }
-      $.post(refreshURL, requestData).then(function(resp) {
+  const showModal = prestashop.blockcart.showModal
+    || function (modal) {
+      const $body = $('body');
+      $body.append(modal);
+      $('#blockcart-modal').modal();
+      console.log('called');
+      $body.one('click', '#blockcart-modal', (event) => {
+        if (event.target.id === 'blockcart-modal') {
+          $.modal.close();
+        }
+      });
+    };
+  prestashop.on('updateCart', (event) => {
+    const refreshURL = $('.blockcart').data('refresh-url');
+    let requestData = {};
+
+    if (
+      event
+      && event.reason
+      && typeof event.resp !== 'undefined'
+      && !event.resp.hasError
+    ) {
+      requestData = {
+        id_customization: event.reason.idCustomization,
+        id_product_attribute: event.reason.idProductAttribute,
+        id_product: event.reason.idProduct,
+        action: event.reason.linkAction,
+      };
+    }
+    if (event && event.resp && event.resp.hasError) {
+      prestashop.emit('showErrorNextToAddtoCartButton', {
+        errorMessage: event.resp.errors.join('<br/>'),
+      });
+    }
+    $.post(refreshURL, requestData)
+      .then((resp) => {
         $('.blockcart').replaceWith($(resp.preview).find('.blockcart'));
-      }).fail(function(resp) {
-          prestashop.emit('handleError', {
-              eventType: 'updateShoppingCart',
-              resp: resp
-          })
+        if (resp.modal) {
+          $.toast({
+            heading: 'Added to Cart',
+            text: 'You can checkout or continue shopping.',
+            position: {
+              top: '100px',
+              right: '20px',
+            },
+            bgColor: '#ffffff',
+            textColor: '#111827',
+            loaderBg: '#172554',
+            class: 'rounded-none border border-gray-200',
+          });
+        }
       })
-  })
-})
+      .fail((resp) => {
+        prestashop.emit('handleError', {
+          eventType: 'updateShoppingCart',
+          resp,
+        });
+      });
+  });
+});

assets/css/theme.css

@@ -871,11 +871,6 @@ select {
   margin-bottom: 0.5rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -989,6 +984,10 @@ select {
   aspect-ratio: 342/513;
 }
 
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -1081,6 +1080,10 @@ select {
   width: 2rem;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
 .w-\[160px\] {
   width: 160px;
 }
@@ -1094,6 +1097,10 @@ select {
   width: max-content;
 }
 
+.w-px {
+  width: 1px;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1257,6 +1264,10 @@ select {
   border-width: 1px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1320,6 +1331,10 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1344,11 +1359,6 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1368,6 +1378,10 @@ select {
   stroke: #000;
 }
 
+.stroke-blue-900 {
+  stroke: #1e3a8a;
+}
+
 .stroke-gray-500 {
   stroke: #6b7280;
 }
@@ -1384,6 +1398,10 @@ select {
   stroke: inherit;
 }
 
+.stroke-2 {
+  stroke-width: 2;
+}
+
 .stroke-\[3px\] {
   stroke-width: 3px;
 }
@@ -1398,6 +1416,10 @@ select {
      object-fit: cover;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1896,9 +1918,26 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media not all and (min-width: 1024px) {
+  .max-lg\:hidden {
+    display: none;
+  }
+
+  .max-lg\:w-full {
+    width: 100%;
+  }
+
   .max-lg\:flex-col {
     flex-direction: column;
   }
+
+  .max-lg\:items-center {
+    align-items: center;
+  }
+
+  .max-lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media not all and (min-width: 768px) {
@@ -2136,10 +2175,18 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
+  .lg\:w-\[850px\] {
+    width: 850px;
+  }
+
   .lg\:w-full {
     width: 100%;
   }
 
+  .lg\:max-w-\[850px\] {
+    max-width: 850px;
+  }
+
   .lg\:max-w-full {
     max-width: 100%;
   }