YSHOP2-876: Direct Add to cart feature

assets/add-to-cart.js

@@ -317,3 +317,25 @@ function preventCartDrawerOpening(templateName) {
   cartDrawerIcon.removeEventListener("click", toggleCartDrawer);
   window.location.reload();
 }
+
+async function directAddToCart(productId) {
+  try {
+    const response = await youcanjs.cart.addItem({
+      productVariantId: productId,
+      quantity: 1
+    });
+
+    if (response.error) throw new Error(response.error);
+
+    updateCartCount(response.count);
+    await updateCartDrawer();
+
+    notify(ADD_TO_CART_EXPECTED_ERRORS.product_added, 'success');
+    toggleCartDrawer();
+  } catch (err) {
+    notify(err.message, 'error');
+  } finally {
+    stopLoad('#loading__cart');
+  }
+}
+

assets/featured-products.css

@@ -47,6 +47,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  cursor: pointer;
 }
 .yc-featured-products .product-list .product-block .product-thumbnail {
   border: 1px solid #EFEFEF;

assets/product-slider.css

@@ -48,6 +48,7 @@
   width: 100%;
   background-color: white;
   border-radius: 3px;
+  cursor: pointer;
 }
 .product-slider .product-block .product-details {
   text-align: center;

config/settings_schema.json

@@ -7,6 +7,12 @@
               "id": "meta_title",
               "label": "Title"
           },
+          {
+            "type": "checkbox",
+            "id": "direct_add_to_cart",
+            "label": "Direct add to cart",
+            "default": false
+          },
           {
               "type": "select",
               "id": "theme_direction",

sections/featured-product-slider.liquid

@@ -395,3 +395,5 @@
   ]
 }
 {%- endschema -%}
+
+{{ 'add-to-cart.js' | asset_url | script_tag_deferred }}

sections/featured-products.liquid

@@ -202,3 +202,5 @@
   ]
 }
 {%- endschema -%}
+
+{{ 'add-to-cart.js' | asset_url | script_tag_deferred }}

snippets/product-preview.liquid

@@ -1,10 +1,11 @@
 {{ 'featured-products.css' | asset_url | stylesheet_tag }}
 {{ 'countdown.css' | asset_url | stylesheet_tag }}
 
-<a
-  href='{{ item.url }}'
-  class='product-block'
->
+{% if settings.direct_add_to_cart %}
+  <div class='product-block' onclick="directAddToCart('{{ item.variants[0].id }}')">
+{% else %}
+  <div class='product-block' onclick="window.location.href='{{ item.url }}'">
+{% endif %}
   <div class='product-thumbnail'>
     {% if item.thumbnail %}
       <img
@@ -26,9 +27,11 @@
       </div>
     {% endif %}
   </div>
+
   <div class='product-details'>
     <span class='product-title'>{{ item.name }}</span>
   </div>
+
   <div class='prices'>
     {% if item.price %}
       <span class='product-price'>{{ item.price | money }}</span>
@@ -37,4 +40,4 @@
       <span class='compare-at-price'>{{ item.compare_at_price | money }}</span>
     {% endif %}
   </div>
-</a>
+</div>

snippets/product-slider.liquid

@@ -49,10 +49,11 @@
           class='splide__slide'
           {{ block.youcan_attributes }}
         >
-          <a
-            href='{{ block.settings.product.url }}'
-            class='product-block'
-          >
+          {% if settings.direct_add_to_cart %}
+            <div class='product-block' onclick="directAddToCart('{{ block.settings.product.variants[0].id }}')">
+          {% else %}
+            <div class='product-block' onclick="window.location.href='{{ block.settings.product.url }}'">
+          {% endif %}
             <div class="product-slider">
               <div class='product-thumbnail'>
                  <img
@@ -80,9 +81,9 @@
                 {% endif %}
               </div>
             </div>
-          </a>
+          </div>
         </li>
       {%- endfor %}
     </ul>
-  </div>  
+  </div>
 </div>

styles/featured-products.scss

@@ -46,13 +46,14 @@
       display: flex;
       flex-direction: column;
       position: relative;
+      cursor: pointer;
 
       .product-thumbnail {
         border: 1px solid #EFEFEF;
         border-radius: 3px;
         position: relative;
         overflow: hidden;
-        padding: 0 0 100%;  
+        padding: 0 0 100%;
         height: 0;
 
         img {
@@ -62,7 +63,7 @@
           height: 100%;
           transform: translate(-50%,-50%);
           transition: transform .25s ease;
-  
+
           &:hover {
             transform: translate(-50%,-50%) scale(1.1);
           }

styles/product-slider.scss

@@ -2,7 +2,7 @@
   .product-thumbnail {
     position: relative;
     overflow: hidden;
-    padding: 0 0 100%;  
+    padding: 0 0 100%;
     height: 0;
 
     img {
@@ -55,6 +55,7 @@
     width: 100%;
     background-color: white;
     border-radius: 3px;
+    cursor: pointer;
 
     .product-details {
       text-align: center;
@@ -75,4 +76,4 @@
       text-decoration-line: line-through;
     }
   }
-}
+}