Merge pull request #418 from NeOMakinG/addtocart-product-list

Add an add to cart button to the product list
PrestaShop · Jan 6, 2023 · 8b69e0c · 8b69e0c
2 parents f6e7702 + 9864a26
commit 8b69e0c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/src/js/theme.ts b/src/js/theme.ts
@@ -31,6 +31,12 @@ initEmitter();
 $(() => {
   const {prestashop, Theme: {events}} = window;
 
+  // @TODO: Fix this on core.js side inside a major version of PrestaShop instead of minor
+  // For reference: https://github.com/PrestaShop/hummingbird/pull/418#discussion_r1061938669
+  document.querySelectorAll<HTMLInputElement>('[name="token"]').forEach((el) => {
+    el.value = prestashop.static_token;
+  });
+
   initProductBehavior();
   initQuickview();
   initCheckout();

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
@@ -168,6 +168,30 @@
               {/block}
             </div>
 
+            {if $product.add_to_cart_url}
+              <form action="{$urls.pages.cart}" method="post" class="d-flex align-items-center mt-3">
+                <input type="hidden" value="{$product.id_product}" name="id_product">
+                <input type="hidden" name="token" value="{$static_token}" />
+                <div class="quantity-button js-quantity-button">
+                  {include file='components/qty-input.tpl'
+                    attributes=[
+                      "id"=>"quantity_wanted_{$product.id_product}",
+                      "value"=>"1",
+                      "min"=>"{if $product.quantity_wanted}{$product.minimal_quantity}{else}1{/if}"
+                    ]
+                    marginHelper="mb-0"
+                  }
+                </div>
+                <button data-button-action="add-to-cart" class="btn btn-primary ms-3">
+                  <i class="material-icons">&#xe854;</i>
+                  <span class="visually-hidden">{l s='Add to cart' d='Shop.Theme.Actions'}</span>
+                </button>
+              </form>
+            {else}
+              <a href="{$product.url}" class="btn btn-outline-primary mt-3">
+                {l s='See details' d='Shop.Theme.Actions'}
+              </a>
+            {/if}
           </div>
         </div>
       {/block}

diff --git a/templates/components/qty-input.tpl b/templates/components/qty-input.tpl
@@ -18,7 +18,7 @@
   {assign var="append" value=["button"=>"increment", "icon"=>$increment_icon, "confirm_icon"=>$submit_icon]}
 {/if}
 
-<div class="input-group flex-nowrap mb-3">
+<div class="input-group flex-nowrap{if isset($marginHelper)} {$marginHelper}{else} mb-3{/if}">
   <button class="btn {$prepend.button} js-{$prepend.button}-button" type="button">
     <i class="material-icons">&#x{$prepend.icon};</i>
     <i class="material-icons confirmation d-none">&#x{$prepend.confirm_icon};</i>