How To create product add to cart function from custom page/section Prestashop 1.7.8.3

[ZiedDams]

any one can help with this ? , please

[Piotr3qx]

Can you be more specific? How it should look like?

[ZiedDams]

Just now, Piotr3qx said:

Can you be more specific? How it should look like?

I have a controller displaying some content and a product, I want to create a button that add the product to cart ( i tried to copie the form in \templates\catalog\_partials\product-add-to-cart.tpl to my tpl file but it does not work)

[Piotr3qx]

Can you share the form code that you have copied?

Edited February 18, 2022 by Piotr3qx (see edit history)

[ZiedDams]

Just now, Piotr3qx said:

Can you share the form code that you have copied?

sure ,

 

<div class="product-add-to-cart js-product-add-to-cart">
  {if !$configuration.is_catalog}
    <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>

    {block name='product_quantity'}
      <div class="product-quantity clearfix">
        <div class="qty">
          <input
            type="number"
            name="qty"
            id="quantity_wanted"
            inputmode="numeric"
            pattern="[0-9]*"
            {if $product.quantity_wanted}
              value="{$product.quantity_wanted}"
              min="{$product.minimal_quantity}"
            {else}
              value="1"
              min="1"
            {/if}
            class="input-group"
            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
          >
        </div>

        <div class="add">
          <button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if !$product.add_to_cart_url}
              disabled
            {/if}
          >
            <i class="material-icons shopping-cart">&#xE547;</i>
            {*l s='Add to cart' d='Shop.Theme.Actions'*} {l s='Acheter maintenant' mod='hit_custom_checkout'}
          </button>
        </div>

        {hook h='displayProductActions' product=$product}
      </div>
    {/block}

    {block name='product_availability'}
      <span id="product-availability" class="js-product-availability">
        {if $product.show_availability && $product.availability_message}
          {if $product.availability == 'available'}
            <i class="material-icons rtl-no-flip product-available">&#xE5CA;</i>
          {elseif $product.availability == 'last_remaining_items'}
            <i class="material-icons product-last-items">&#xE002;</i>
          {else}
            <i class="material-icons product-unavailable">&#xE14B;</i>
          {/if}
          {$product.availability_message}
        {/if}
      </span>
    {/block}

    {block name='product_minimal_quantity'}
      <p class="product-minimal-quantity js-product-minimal-quantity">
        {if $product.minimal_quantity > 1}
          {l
          s='The minimum purchase order quantity for the product is %quantity%.'
          d='Shop.Theme.Checkout'
          sprintf=['%quantity%' => $product.minimal_quantity]
          }
        {/if}
      </p>
    {/block}
  {/if}
</div>

[ZiedDams]

Just now, ZiedDams said:

sure ,

 

<div class="product-add-to-cart js-product-add-to-cart">
  {if !$configuration.is_catalog}
    <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>

    {block name='product_quantity'}
      <div class="product-quantity clearfix">
        <div class="qty">
          <input
            type="number"
            name="qty"
            id="quantity_wanted"
            inputmode="numeric"
            pattern="[0-9]*"
            {if $product.quantity_wanted}
              value="{$product.quantity_wanted}"
              min="{$product.minimal_quantity}"
            {else}
              value="1"
              min="1"
            {/if}
            class="input-group"
            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
          >
        </div>

        <div class="add">
          <button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if !$product.add_to_cart_url}
              disabled
            {/if}
          >
            <i class="material-icons shopping-cart">&#xE547;</i>
            {*l s='Add to cart' d='Shop.Theme.Actions'*} {l s='Acheter maintenant' mod='hit_custom_checkout'}
          </button>
        </div>

        {hook h='displayProductActions' product=$product}
      </div>
    {/block}

    {block name='product_availability'}
      <span id="product-availability" class="js-product-availability">
        {if $product.show_availability && $product.availability_message}
          {if $product.availability == 'available'}
            <i class="material-icons rtl-no-flip product-available">&#xE5CA;</i>
          {elseif $product.availability == 'last_remaining_items'}
            <i class="material-icons product-last-items">&#xE002;</i>
          {else}
            <i class="material-icons product-unavailable">&#xE14B;</i>
          {/if}
          {$product.availability_message}
        {/if}
      </span>
    {/block}

    {block name='product_minimal_quantity'}
      <p class="product-minimal-quantity js-product-minimal-quantity">
        {if $product.minimal_quantity > 1}
          {l
          s='The minimum purchase order quantity for the product is %quantity%.'
          d='Shop.Theme.Checkout'
          sprintf=['%quantity%' => $product.minimal_quantity]
          }
        {/if}
      </p>
    {/block}
  {/if}
</div>

that's actually the hole code from  templates\catalog\_partials\product-add-to-cart.tpl

[Piotr3qx]

You need to wrap this code inside <form> tag with specific action, try this 

<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
  <input type="hidden" name="token" value="{$static_token}">
  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
  <input type="hidden" name="qty" value="1">
  <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url}disabled{/if}>
    {l s='Add to cart' d='Shop.Theme.Actions'}
  </button>
</form>

 

Edited February 18, 2022 by Piotr3qx (see edit history)

[ZiedDams]

3 minutes ago, Piotr3qx said:

You need to wrap this inside form tag with specific action, try this 

<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
  <input type="hidden" name="token" value="{$static_token}">
  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
  <input type="hidden" name="qty" value="1">
  <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url}disabled{/if}>
    {l s='Add to cart' d='Shop.Theme.Actions'}
  </button>
</form>

 

that's weird i cannot get the $urls.pages.cart  url , it's just stop displaying anything when i add $urls.pages.cart 

[Piotr3qx]

Try hard code the action parameter, insteat of {$urls.pages.cart} put cart url

[ZiedDams]

56 minutes ago, Piotr3qx said:

Try hard code the action parameter, insteat of {$urls.pages.cart} put cart url

it work perfectly with the hard coded URL, thank you so much for your time