Display multiple Add To Cart Button for different products on same page in Prestashop 1.7

In E-commerce, One of the common requirements could be to display multiple products with their respective Add to Cart buttons on the same page.
For example,
1. We want to display a collection page where customer can see store all products with Add To Cart button i.e. Category page.
2. Suppose there is a product that is selling by different sellers and we want to display a page where all seller’s product will show with their Add To Cart button.

So here we will see that how to display multiple Add To Cart button of different products on same page in Prestashop 1.7

For display Add To Cart button with Product, we have two cases –
Case 1. Product without Combination –

Suppose there is a standard product that have no combination. So we can add below code in each product html container of our tpl file.

/**
* 2010-2016 Webkul.
*
* NOTICE OF LICENSE
*
* All right is reserved,
* Please go through this link for complete license : https://store.webkul.com/license.html
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this module to newer
* versions in the future. If you wish to customize this module for your
* needs please refer to https://store.webkul.com/customisation-guidelines/ for more information.
*
*  @author    Webkul IN <[email protected]>
*  @copyright 2010-2016 Webkul IN
*  @license   https://store.webkul.com/license.html
*/

<form action="{$link->getPageLink('cart')}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" name="id_product" value="{$product_id}">
   <input type="hidden" name="id_customization" value="0">
   <input type="hidden" name="qty" value="1">
   <button type="submit" data-button-action="add-to-cart" class="btn btn-primary">
      <i class="material-icons shopping-cart"></i>
      {l s='Add to Cart' mod='modulename'}
   </button>
</form>

Here you can see a form that have some dynamic variables –
A. {$link->getPageLink(‘cart’)} -> Through this, you can get a cart page link for Form Action
B. {$static_token} -> We must pass a input hidden data of Static Token that can be assigned by controller through this code – Tools::getToken(false);

Case 2. Product with Combination –

If Product have multiple combination and we want Add To Cart to default combination of that product.

/**
* 2010-2016 Webkul.
*
* NOTICE OF LICENSE
*
* All right is reserved,
* Please go through this link for complete license : https://store.webkul.com/license.html
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this module to newer
* versions in the future. If you wish to customize this module for your
* needs please refer to https://store.webkul.com/customisation-guidelines/ for more information.
*
*  @author    Webkul IN <[email protected]>
*  @copyright 2010-2016 Webkul IN
*  @license   https://store.webkul.com/license.html
*/

<form action="{$link->getPageLink('cart')}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" name="id_product" value="{$product_id}">
   <input type="hidden" name="id_customization" value="0">

   {if $matchedAttributeData} 
     {foreach $matchedAttributeData as $matchedAttribute} 
       <input type="hidden" 
       data-product-attribute="{$matchedAttribute.id_attribute_group}" 
       name="group[{$matchedAttribute.id_attribute_group}]" 
       value="{$matchedAttribute.id_attribute}">
     {/foreach} 
   {/if} 
   <input type="hidden" name="qty" value="1"> 
   <button type="submit" data-button-action="add-to-cart" class="btn btn-primary"> 
      <i class="material-icons shopping-cart"></i> 
      {l s='Add to Cart' mod='modulename'} 
   </button> 
</form>

Here, $matchedAttributeData is an array of default combination’s attribute group and attribute value

Note : There is no need to add any jQuery file. Prestashop will add to cart the product by default from their core.js file.