Jump to content

[Solved] 'add to cart' button not working in featured products

Tro
 Share

Recommended Posts

Tro Newbie

Tro

Posted
Posted (edited)

He,

 

Working with prestashop 1.5 i found the following in the featured products module:

 

Line 49 to around 51 of the 'homefeatured.tpl' (modules/homefeatured/... file is giving the following information

 

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
   {else}
   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

 

Normally this should give us a button to directly add a product to your cart. But this button will not show up in the 'Featured products' module.

 

The problem could be solved with just changing the script to:

<a class="lnk_more" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

 

But than you dont have that nice Ajax effect of the moving product to your cart and not the 'add to cart' button (just text). Is there any possibility to change this so that the nice effect will be activated aswell as the button?

 

Thanks in advantage!

 

,Tro

 

Solved

-------------------------------------------------------------

I worked out how the problem could be solved. So just to share it with you all: If you want the 'add to cart' button working in the homefeatured module than the following code in homefeatured.css should be changed from:

 

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}
#featured-products_block_center li span.exclusive {display:none;}

 

To

 

#featured-products_block_center li .ajax_add_to_cart_button {display:block;}
#featured-products_block_center li span.exclusive {display:block;}

 

The problem should than be solved and you are able to see the button on the front page.

-----------------------------------------------------------------

Edited by Tro (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 1 month later...
adhee Newbie

adhee

Posted
Posted

Thanks Tro, to enable the add to cart link - This is what i've been looking for!

 

But i'm still not able to display the add to cart as button.

 

 

i change the css to

#featured-products_block_center li .ajax_add_to_cart_button {display:block;}

#featured-products_block_center li span.exclusive {display:block;}

 

but still showing link text though

Link to comment
Share on other sites
adhee Newbie

adhee

Posted
Posted

solve it!

 

first, as Tro mentioned, find this code:

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
	   {else}
	   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

 

but, replace with this code:

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

 

maintain the class name -> a class="exclusive ajax_add_to_cart_button"

 

 

Then, change the homefeatured.css as Tro said.

 

 

Solved

-------------------------------------------------------------

I worked out how the problem could be solved. So just to share it with you all: If you want the 'add to cart' button working in the homefeatured module than the following code in homefeatured.css should be changed from:

 

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}
#featured-products_block_center li span.exclusive {display:none;}

 

To

 

#featured-products_block_center li .ajax_add_to_cart_button {display:block;}
#featured-products_block_center li span.exclusive {display:block;}

 

The problem should than be solved and you are able to see the button on the front page.

-----------------------------------------------------------------

 

Just change display:none; to display:block;

  • Like 1
Link to comment
Share on other sites
THAO LAM VIET Newbie

THAO LAM VIET

Posted
Posted

followed your modification but still not work, i dont know why. Here is my code:

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 6594 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block clearfix">
<h4>{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
 <div class="block_content">
  {assign var='liHeight' value=250}
  {assign var='nbItemsPerLine' value=4}
  {assign var='nbLi' value=$products|@count}
  {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
  {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
  <ul style="height:{$ulHeight}px;">
  {foreach from=$products item=product name=homeFeaturedProducts}
   <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>
 <h5><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>
 <div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>
 <div>
  <a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
  {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
  {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
   {if ($product.quantity > 0 OR $product.allow_oosp)}
   <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
   {else}
   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
   {/if}
  {else}
   <div style="height:21px;"></div>
  {/if}
 </div>
   </li>
  {/foreach}
  </ul>
 </div>
{else}
 <p>{l s='No featured products' mod='homefeatured'}</p>
{/if}
</div>
<!-- /MODULE Home Featured Products -->

 

CSS:

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:126px;
height:240px
}
#featured-products_block_center li.last_item_of_line  {margin-right:0;}
#featured-products_block_center h5 {
padding-top:5px;
height:30px;
font-size:12px;
color:#222
}
#featured-products_block_center .product_image {
display:block;
position:relative;
overflow:hidden
}
#featured-products_block_center .product_image span.new {
display: block;
position: absolute;
top: 15px;
right:-30px;
padding: 1px 4px;
width: 101px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #990000
}
#featured-products_block_center .product_desc {height:45px;}
#featured-products_block_center .product_desc,
#featured-products_block_center .product_desc a {
color:#666
}
#featured-products_block_center .lnk_more {
display:inline;
padding-right:10px;
font-weight:bold;
font-size:10px;
color:#0088cc;
background:url(img/arrow_right_1.png) no-repeat 100% 3px;
}
#featured-products_block_center .price_container {
margin-top:10px;
padding:0;
}
#featured-products_block_center .price {
font-weight:bold;
font-size:14px;
color:#990000
}
#featured-products_block_center li .ajax_add_to_cart_button {display:block;}
#featured-products_block_center li span.exclusive {display:block;}

Link to comment
Share on other sites
  • 1 month later...
  • 2 weeks later...
jmcamps Newbie

jmcamps

Posted
Posted

Hi, its working for me too but I have a layout problem, "Add to Cart" buttons are half hide by the product image that is below.

 

I need to set more vertical space between the images in order to let the buttons fit in between.

 

Any sugestion?

 

Prestashop version is 1.5.2

 

Thanks

Link to comment
Share on other sites
bside2234 Newbie

bside2234

Posted
Posted

Hi, its working for me too but I have a layout problem, "Add to Cart" buttons are half hide by the product image that is below.

 

I need to set more vertical space between the images in order to let the buttons fit in between.

 

Any sugestion?

 

Prestashop version is 1.5.2

 

Thanks

 

Modules/homefeatured

 

homefeatured.css

Change: #featured-products_block_center li {

 

From: height:240px

To: height:270px

Link to comment
Share on other sites
jmcamps Newbie

jmcamps

Posted
Posted

Hello mohsart, sorry about the delay, I see the right column perfect in all the browsers. There is no payment images overlapping any new products module. I cannot paste you the image that I see as I have my image prestashop forum quote full but, as I sais I see the image payment logos at the under the new products with no overlap. I have tried with IE, Chrome and Firefox.

 

One question, the new products block is the "New Products Block Redesigned" downloaded fron the forum?. If so, did you tried to change that instead showing the product description show the price under the title of the product?. I did it but I have the problem that all products shows the same price.

Link to comment
Share on other sites
mohsart Newbie

mohsart

Posted
Posted

Code needs some cleaning up but here it is 

{if $newproduct.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}" style="font-weight: bold; font-size: 12px; color: rgb(153, 0, 0);">

	{if ((isset($newproduct.reduction) && $newproduct.reduction)) && $newproduct.price_without_reduction > $newproduct.price && $newproduct.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
		<span style="text-decoration: line-through">{convertPrice price=$newproduct.price_without_reduction}
		</span>
	{/if}

	{if !$priceDisplay}{convertPrice price=$newproduct.price}
	{else}{convertPrice price=$newproduct.price_tax_exc}
	{/if}

</dd>
{/if}

 

/Mats

Link to comment
Share on other sites
jmcamps Newbie

jmcamps

Posted
Posted

Hi again Mats, is there any way to set a line jump between the title of the product and the price. The reason is that I changed the color of the price from red to black and I´ll see it all to much together. Same is happenning in the homefeatured products where I need the line jump between the price and the "Add to Cart" button as is too close one from each other.

 

Many thanks again for all your help.

 

Jose Maria

Link to comment
Share on other sites
mohsart Newbie

mohsart

Posted
Posted

I'm not too good at this, but that's a css thing.

I was lazy and put the css code in the .tpl file, but should be moved to blocknewproducts.css

anyways, it's 

style="font-weight: bold; font-size: 12px; color: rgb(153, 0, 0);"

that needs changing. Adding 

float:right;padding-top:10px;

kind of works, but the alignment is messed up.

 

/Mats

Link to comment
Share on other sites
mohsart Newbie

mohsart

Posted
Posted

Try 

<div id="new_price">

	{if ((isset($newproduct.reduction)
...
{convertPrice price=$newproduct.price_tax_exc}
	{/if}
</div>

and

#new_price {
font-weight: bold;
font-size: 12px;
color: rgb(153, 0, 0);
padding-top:50px;
padding-left:10px;
}

 

/Mats

Link to comment
Share on other sites
mohsart Newbie

mohsart

Posted
Posted

The whole chunk of code:

{if $newproduct.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
	<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}" ><a href="{$newproduct.link}"><div id="new_price">

	{if ((isset($newproduct.reduction) && $newproduct.reduction)) && $newproduct.price_without_reduction > $newproduct.price && $newproduct.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
		<span style="text-decoration: line-through">{convertPrice price=$newproduct.price_without_reduction}
		</span>
	{/if}

	{if !$priceDisplay}
		{convertPrice price=$newproduct.price}
	{else}
		{convertPrice price=$newproduct.price_tax_exc}
	{/if}
</div></a></dd>
{/if}

 

/Mats

Link to comment
Share on other sites
  • 2 weeks later...
evejuan Newbie

evejuan

Posted
Posted (edited)

Thank you for your code! This helps me a lot.

 

I only want to add some trick!

 

If you want add the shopping_cart image you can do it this way:

 

1 in homefeatured.css change from:

#featured-products_block_center li .ajax_add_to_cart_button {display: block;}

to

#featured-products_block_center li .ajax_add_to_cart_button {
display: block;
float:right;
padding-left:20px
}
#featured-products_block_center li .ajax_add_to_cart_button span {
position:absolute;
top:-1px;
left:-12px;
display:block;
height:26px;
width:26px;
background:url(../blockcart/img/icon/pict_add_cart.png) no-repeat 0 0
}

 

2 in homefeatured.tpl change from:

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

to

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}<span></span></a>

 

I hope it will be useful!

 

Bye!

P.S. Sorry my english!

Edited by evejuan (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 7 months later...
vekia Apprentice

vekia

Posted
Posted

hey guys,

 

the add to cart buttons don't show at all on my product pages, ps 1.5.3

 

the quantities / prices are updated in the back-end, and on the front-end the qty option for odering a specific product shows, but not the cart ... :S

 

any idea why?

 

thanks

 

it is possible to check your website? if so please share the url

Link to comment
Share on other sites
coronatonewmedia Newbie

coronatonewmedia

Posted
Posted (edited)

ok great, well its basically the same as my first post,

 

there is no add to cart button on the product detail page, however it shows up, and works, on the homefeatured / search results etc....

 

is it an actual code problem or a setting? because i have'nt chnged the product.tpl code in that section

 

also as a side note, i'm using a TM theme....

Edited by coronatonewmedia (see edit history)
Link to comment
Share on other sites
  • 2 months later...
sant009m Newbie

sant009m

Posted
Posted

Hi,

 I have Done the necessary settings, it is working perfectly in Mozilla and Chrome. But in Internet Explorer I am unable to see the Add to cart image of home featured products in second row. If I disable the Manufacturer Carousal module below the featured module then I am able to see the Add to cart button in Internet Explorer. Please help.

My store link below

http://gadgetsduniya.abcz8.com/presta/

 

Regards,

Santosh

Link to comment
Share on other sites
  • 2 weeks later...
sehgalanurag Newbie

sehgalanurag

Posted
Posted

this is how it looks in IE browser:

C4ERMwx.png

 

seems like everything is fine there

Hi Vekia,

 

I did the same thing and got the same layout as shown here, it is just I want to add the shopping cart in the button as it is there on product page, I tried it using the code mentioned in post #29 but still that shopping cart icon on 'add to cart' button doesn't appear. 

Can you help?

 

Thanks

Link to comment
Share on other sites
  • 2 weeks later...
flipe Newbie

flipe

Posted
Posted

Thank you for your code! This helps me a lot.

 

I only want to add some trick!

 

If you want add the shopping_cart image you can do it this way:

 

1 in homefeatured.css change from:

#featured-products_block_center li .ajax_add_to_cart_button {display: block;}
to

#featured-products_block_center li .ajax_add_to_cart_button {
display: block;
float:right;
padding-left:20px
}
#featured-products_block_center li .ajax_add_to_cart_button span {
position:absolute;
top:-1px;
left:-12px;
display:block;
height:26px;
width:26px;
background:url(../blockcart/img/icon/pict_add_cart.png) no-repeat 0 0
}
2 in homefeatured.tpl change from:

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
to

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}<span></span></a>
I hope it will be useful!

 

Bye!

P.S. Sorry my english!

 

 

Is possible that work in Prestashop 1.5.3.1, I did the changes that you show and I had no cart icon.

Link to comment
Share on other sites
flipe Newbie

flipe

Posted
Posted

I did this configuration in a 1.5.3.1 prestashop and I got the button like in the Vekia image, but I can't put the cart button to the block, but with the same configuration, I can't get that same button size in a 1.5.6, to this version is needed a diferent configuration?

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...