Jump to content

No add to cart button in category product list?


TVBZ

Recommended Posts

Hello,

Still new to PrestaShop so bear with me please. :)

In my first PS installation, I am looking for the option to have an add to cart button directly from product list (category).
It's probably the most basic function of any e-commerce, so I guess it has to be there somewhere.

In shop parameters > product settings, I have enabled to display "add to cart" button when product has attributes.

image.png.f6c3d8c09984d7704f9f82425c15674b.png

Still, even when products don't have attributes, I don't have a add to cart button in my list:

 

image.thumb.png.31e671885e9dbdb4ea6feda52d481a8e.png

 

Anyone can tell me how to enable it? 
I have checked all settings 3 times, still didn't find it. 
Surely it must excist somewhere?

 

(working in PrestaShop 1.7.6.5)

Link to comment
Share on other sites

9 hours ago, Razi said:

In Prestashop 1.7 there is no setting for enable Add to cart button on listing page.

For this you need to buy module or need to make changes in file.

Thanks

Huh.. Now I am amazed, an e-commerce platform with no add to cart button in product list. It's hilarious 🤣

Thanks for the insight

  • Like 1
Link to comment
Share on other sites

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 

{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:

<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button! :)
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Edited by TVBZ
added class for optional styling when product is out of stock (see edit history)
  • Thanks 3
Link to comment
Share on other sites

  • 5 months later...
  • 1 month later...
On 7/2/2020 at 7:35 PM, TVBZ said:

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 


{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:


<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button! :)
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Thank you very much, it is working like a charm!

I have improved it a little bit 

<div style="text-align: center; margin: 3px;">
    	<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                   <i class="material-icons shopping-cart">shopping_cart</i>
                   {l s='Add to cart' d='Shop.Theme.Actions'}
          </button>
  		</form>
</div>

and placed this code just after 

{block name='product_reviews'}
   {hook h='displayProductListReviews' product=$product}
{/block}

 

  • Thanks 2
Link to comment
Share on other sites

  • 2 months later...
On 12/29/2020 at 2:31 PM, MerseyRay said:

@TVBZ, does this "out of stock" also check for any optinos n the product?

ie, if the product has different colour options will it just check the default one for stock or check if any are available.

Thanks

Hi! Same question: how to account for product options/variations?

Link to comment
Share on other sites

  • 8 months later...
On 7/2/2020 at 1:35 PM, TVBZ said:

I will post my solution here, in case someone needs it, and for myself for later reference:

Inside my (child)theme I added a small chunk of code in this file:
/templates/catalog/_partials/miniatures/product.tpl

There we have the block: 

{block name='product_price_and_shipping'}

In the end of that block, just before "</div>{/if}{/block}" I added this code:

<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">
          <button class="btn btn-primary add-to-cart {if $product.quantity < 1}out-of-stock{/if}" data-button-action="add-to-cart" type="submit">
                  <i class="material-icons shopping-cart"></i>
                  {l s='Add to cart' d='Shop.Theme.Actions'}
           </button>
 </form>

 

And voila.. A working add to cart button! :)
It adds the product to the cart and triggers the added to cart popup.

If I notice any shortcomings in this code, I will come back to change it. 


NOTE: add-to-cart button has "out-of-stock" class when product stock < 1. This can be used for some custom styling (think opacity, cursor, ...)

Worked!

 

i place the code after:

Quote

 

{block name='product_buy'}

                {if !$configuration.is_catalog}

                    <div class="product-actions">

 

in order to have a cart icon next to quickview, but when i click and ask to keep shopping in changes the browser URL and stop working.
ANyway i can place it there like this?

image.png.c7ff95ebbe26cb3b0716e617ec734275.png

Link to comment
Share on other sites

  • 1 month later...
Il 02/09/2021 alle 17:59, Alexander Firsov dice:

Grazie mille, funziona come un incantesimo!

L'ho migliorato un po' 

   
    	   	
             
              
                    
          
  		

e ho inserito questo codice subito dopo 

 

avete visto che i prodotti si sovrappongono dopo avere implementato le modifiche? o succede solo a me?

Immagine-mobile.jpg

Link to comment
Share on other sites

On 1/7/2020 at 10:20 AM, Ospite dice:

L'ho installato e mi ha modificato tutte le impostazioni di layout dei prodotti, anche dopo averlo disinstallato é rimasto modificato e ora mi ritrovo tutte le immagini dei prodotti attaccate tra di loro e mentre prima visualizzavo 2 prodotti in linea nella versione mobile ora me li mostra incolonnati. 

Link to comment
Share on other sites

On 9/2/2021 at 5:59 PM, Alexander Firsov dice:

Grazie mille, funziona come un incantesimo!

L'ho migliorato un po' 

   
    	   	
             
              
                    
          
  		

e ho inserito questo codice subito dopo 

 

scusate ma in questo modo quando ci sono delle combinazioni apre le il prodotto per personalizzare?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...