Jump to content

How to change the function of the "Add to Cart" button to go to the product page?

Théo Oliveira

By Théo Oliveira
in Core developers

 Share

Recommended Posts

Théo Oliveira Newbie

Théo Oliveira

Posted
Posted

Hello guys!

I have been researching for a long time about how I can change the function of the Add to Cart button on the homepage of my store, I would like to instead of adding to the cart, redirect to the product page, as all products are personalized.

My Prestashop version is 1.7.6.8

Thanks!!

Link to comment
Share on other sites
Théo Oliveira Newbie

Théo Oliveira

Posted
  • Author
Posted (edited)
24 minutes ago, Guest said:

Change URL from your theme product-list.tpl or add-to-cart-product-list.tpl ......

Each template has it differently.

So you can't advise exactly. 



href="{$product.url}"

 

Hey, @GuestThanks! Below is the code "product-add-to-cart.tpl", could you tell me where to change according to your suggestion?

  

{if Group::getCurrent()->id != 4}
    <div class="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"
                            value="{$product.quantity_wanted}"
                            class="input-group"
                            min="{$product.minimal_quantity}"
                            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}
                            >
                            {l s='Add to cart' d='Shop.Theme.Actions'}
                        </button>
                    </div>
                </div>
            {/block}

            {block name='product_availability'}
                <span id="product-availability">
                    {if $product.show_availability && $product.availability_message}
                        {if $product.availability == 'available'}
                            <i class="material-icons 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">
                    {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>
{/if}


or in the code "product-list.tpl": 

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h2 class="h2">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div id="">
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div id="">
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing}
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}

        {include file='errors/not-found.tpl'}

      {/if}
            {hook h="displayCategoryBottom"}
    </section>

  </section>
{/block}

 

Edited by Théo Oliveira (see edit history)
Link to comment
Share on other sites
Théo Oliveira Newbie

Théo Oliveira

Posted
  • Author
Posted (edited)
4 minutes ago, Guest said:

1. Take a screenshot of the page where you see the "Add to cart" button.

2. Write if it is a classic template

3. write if you have a module installed that displays the "Add to cart" button in the list of products

are the buttons on that store homepage. I'm using a different theme than the default

http://retratodado.com.br/

I'm not using module to display "Add to cart" button 

- The "Add To Cart" button is translated into Portuguese "Adicionar"

Captura de Tela 2021-03-28 às 13.51.41.png

Edited by Théo Oliveira (see edit history)
Link to comment
Share on other sites
Théo Oliveira Newbie

Théo Oliveira

Posted
  • Author
Posted
7 hours ago, Guest said:

Ok.

product-add-to-cart.tpl

original: 


<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'}
          </button>
        </div>

new: 


<div class="add">
			{if $page.page_name == 'index' || if $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<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'}
				</button>
			{/if}
        </div>

 

Thanks for the attention @Guest, but I changed the codes as suggested and nothing changed when clicking on the "Add to Cart" button

but it changed when clicking on the product image, it just broke, when clicking on the product image I was going to an error page

I returned to the original code and the error stopped happening.

Link to comment
Share on other sites
Théo Oliveira Newbie

Théo Oliveira

Posted
  • Author
Posted
12 hours ago, Guest said:

So you wrongly put the modified part of the code.
Because the button should have been renamed from Add to cart to View.
When editing a TPL file, the Cache must be cleaned up.

 

Script updated.

Please test now.

nothing works, even clearing all caches nothing changes T.T

Link to comment
Share on other sites
  • 3 months later...
ignaciodemiguel Newbie

ignaciodemiguel

Posted
Posted
On 3/29/2021 at 5:50 PM, Guest said:

I gladly helped

Hello guys

How is going ? I hope you are good! 😀

 

I have the same issue that in the past THEO gets.  I would like to instead of adding to the cart, redirect to the product page, as all products are personalized

My theme is different to the classic one. I purchased one called MODEZ DIGGO from ROY THEMES

Thats our web

 

THANKS

 

 

Link to comment
Share on other sites
  • 1 month later...
4ngeluxpunk Newbie

4ngeluxpunk

Posted
Posted
En 29/3/2021 a las 10:48 AM, Théo Oliveira dijo:

SOLVED! @Guest solved the problem for me in private, if you want to comment on the solution here for other people who are going through this they can also do it .. haha

Amazing!

 

Hello, you know that it was modified since I have the same problem when adding the code the design breaks.

I remain attentive to your comments.

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
ps8modules Grand Master

ps8modules

Posted
Posted

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

  • Like 1
Link to comment
Share on other sites
capi15 Rookie

capi15

Posted
Posted
3 hours ago, WebSoft said:

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

Hi there, really appreciate your answer, i use etrend template.web site is this one, https://www.azerted.com

i was playing last night with ad to cart tpl, but seem controls add to cart button in product page..... what i need is in main page when client clicks on buy open product page and not add to cart, as potucts are clothes with attributes..

Link to comment
Share on other sites
capi15 Rookie

capi15

Posted
Posted
7 hours ago, WebSoft said:

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

prestashop version 1.7.6.2, i tried pasting code that was provided further up in  product-add-to-cart.tpl but no changes.....

Link to comment
Share on other sites
ps8modules Grand Master

ps8modules

Posted
Posted

There is an error in the code.
Here is a working solution. 

<div class="add">
			{if $page.page_name == 'index' || $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<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'}
				</button>
			{/if}
        </div>

 

  • Like 1
Link to comment
Share on other sites
capi15 Rookie

capi15

Posted
Posted
18 minutes ago, WebSoft said:

There is an error in the code.
Here is a working solution. 

<div class="add">
			{if $page.page_name == 'index' || $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<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'}
				</button>
			{/if}
        </div>

 

thank you very much will try!

this is my original code, could you tell me were to change.

{if Group::getCurrent()->id != 4}
    <div class="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"
                            value="{$product.quantity_wanted}"
                            class="input-group"
                            min="{$product.minimal_quantity}"
                            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
                            >
                    </div>

                    <div class="add">
                        <button
                            class="btn btn-primary add-to-cart"
                            data-button-action="display-product"
                            type="submit"
                            {if !$}
                                disabled
                            {/if}
                            >
                            {l s='Add to cart' d='Shop.Theme.Actions'}
                        </button>
                    </div>
                </div>
            {/block}

            {block name='product_availability'}
                <span id="product-availability">
                    {if $product.show_availability && $product.availability_message}
                        {if $product.availability == 'available'}
                            <i class="material-icons 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">
                    {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>
{/if}

Link to comment
Share on other sites
capi15 Rookie

capi15

Posted
Posted
14 minutes ago, WebSoft said:

You can like my posts by clicking on the gray heart below the posts 😉

 

thankyou soo much! you are ace! any other way i caan thank you? if you like any product in our catalog and you can have it!!!

just one question, any problems if i translate button?

  • Like 1
Link to comment
Share on other sites
Andrzej1234 Newbie

Andrzej1234

Posted
Posted (edited)

Hello all,

I have small problem with combinations. What I mean. I have two of them It's BEZ and GRAWER. When I click GRAWER it should open additional options without changing anything else. Problem is when I clik GRAWER picture is changed to last item which I add to shop. I'm new on Presta and I don't know where to search this problem. If you could help me i appreciate.

example of product you can find here:

https://srebropol.pl/zlota-pozytywka-kon-na-biegunach-z-krysztalkami-swarovskiego-12320

 

Try to click Grawer below price and watch what happed.

In attached is product-customization.tpl

Regards

Andrzej

product-customization.tpl

Edited by Andrzej1234 (see edit history)
Link to comment
Share on other sites
  • 4 months later...

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
 Share
Go to topic listing
×
×
  • Create New...