Change image when cart is not empty

[Jurist]

Hello,

 

Is there any method to check if there are any products in customer's shopping cart?

I'd like to check condition, if products in cart > 0 then different img src is being displayed (I understand that I will need to edit blockcart.tpl). 

 

I saw here on forum  {if $cart_qties > 1} is this up to date for latest prestashop version?

 

Regards

 

Edit: the best resolution would be code that changes class or id of an element just after product is added to cart. Check should be performed on every page refresh.

Edited May 20, 2016 by Jurist (see edit history)

[Jurist]

I would like to add another class which would change the image. That would help our customers understand that they actually have something in their cart, because at the moment they only see it after moving their mouse coursor over it. 

 

I've tried something like this:

 

{if $cart_qties == 0}

<a id="emptycart" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">

{else}

<a id="fullcart" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">

{/if}

 

but it doesn't work, looks like this condition is checked before something is shown that something actually is in the shopping cart. 

I would need to write a trigger that at the moment when product is added to cart, class for a href is changed, and it would be the best if the class changed back again if the product is removed.

[Jurist]

Ok, I actually managed to do this on my own. If somebody had similar problem and would like to change the shopping cart layout after product is added to the shopping cart here's the resolution:

 

1. themes\theme_name\modules\blockcart\blockcart.tpl on line 28th add an ID to a href element, for example:

 

<a id="cart_icon" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">

 

2. \themes\theme_name\js\modules\blockcart\ajax-cart.js just after line: 

success: function(jsonData,textStatus,jqXHR) {

 

add code:

 

var element = document.getElementById("cart_icon");

element.classList.add("fullcart");

 

3. you can add class removal after the product is removed from the cart, inser code below after line:

 

remove : function(idProduct, idCombination, customizationId, idAddressDelivery){

 

var el = document.getElementById("carticon");

el.classList.remove("fullcart");

 

However this resolution does not work as intended, because it adds a class only temporary, when the page is refreshed the class is gone, it should probably be actually saved in a cookie or something like this. 

 

I would appreciate any help.

Edited May 20, 2016 by Jurist (see edit history)

[Jurist]

Unfortunately this is not a good resolution, it informs the customer somehow that a product was in his shopping cart, but after refreshing the page added class is gone.

[Jurist]

I would need javascript that checks if the shopping cart is empty or not upon refreshing page.

 

It probably is even easier with smarty methods, however I don't know prestashop that much yet.

 

Basically I would need a script, condition that will display a href with one class if shopping cart is empty or with another class if there are some products inside. 

Check should occur at every page refresh and after adding a product to cart. 

 

Maybe somebody will have a clue how to do this.

Thanks for your answers.

[Jurist]

I can confirm that this works, I almost have everything as I wanted but I've got a problem with smarty syntax I think.

 

Sorry for stupid question but how {if},{elseif} with mutlpile operations inside should look like?

 

{if $cart_qties > 0}( <- should be there a standard bracker or curly bracket?

 

operation 1

operation 2

operation 3

) 

{elseif $cart_qties == 0}(

 

operation 1

operation 2

operation 3

){/if}

 

 

Is that correct? I think I've mistaken something as it's working but after refreshing site sometimes the cart is reset.

 

Many thanks for your help I really appreciate it.

[Jurist]

I've got something like this:

 

{if $cart_qties == 0}
<a id="carticon" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
<b>{l s='Cart' mod='blockcart'}</b>
<span class="ajax_cart_quantity{if $cart_qties == 0} unvisible{/if}">{$cart_qties}</span>
<span class="ajax_cart_product_txt{if $cart_qties != 1} unvisible{/if}">{l s='Product' mod='blockcart'}</span>
<span class="ajax_cart_product_txt_s{if $cart_qties < 2} unvisible{/if}">{l s='Products' mod='blockcart'}</span>
<span class="ajax_cart_total{if $cart_qties == 0} unvisible{/if}">
{if $cart_qties > 0}
{if $priceDisplay == 1}
{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
{convertPrice price=$cart->getOrderTotal(false, $blockcart_cart_flag)}
{else}
{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
{convertPrice price=$cart->getOrderTotal(true, $blockcart_cart_flag)}
{/if}
{/if}
</span>
<span class="ajax_cart_no_product{if $cart_qties > 0} unvisible{/if}">{l s='(empty)' mod='blockcart'}</span>
{if $ajax_allowed && isset($blockcart_top) && !$blockcart_top}
<span class="block_cart_expand{if !isset($colapseExpandStatus) || (isset($colapseExpandStatus) && $colapseExpandStatus eq 'expanded')} unvisible{/if}"> </span>
<span class="block_cart_collapse{if isset($colapseExpandStatus) && $colapseExpandStatus eq 'collapsed'} unvisible{/if}"> </span>
{/if}
</a>
{else}
<a id="carticon" class="fullcart" href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
<b>{l s='Cart' mod='blockcart'}</b>
<span class="ajax_cart_quantity{if $cart_qties == 0} unvisible{/if}">{$cart_qties}</span>
<span class="ajax_cart_product_txt{if $cart_qties != 1} unvisible{/if}">{l s='Product' mod='blockcart'}</span>
<span class="ajax_cart_product_txt_s{if $cart_qties < 2} unvisible{/if}">{l s='Products' mod='blockcart'}</span>
<span class="ajax_cart_total{if $cart_qties == 0} unvisible{/if}">
{if $cart_qties > 0}
{if $priceDisplay == 1}
{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
{convertPrice price=$cart->getOrderTotal(false, $blockcart_cart_flag)}
{else}
{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}
{convertPrice price=$cart->getOrderTotal(true, $blockcart_cart_flag)}
{/if}
{/if}
</span>
<span class="ajax_cart_no_product{if $cart_qties > 0} unvisible{/if}">{l s='(empty)' mod='blockcart'}</span>
{if $ajax_allowed && isset($blockcart_top) && !$blockcart_top}
<span class="block_cart_expand{if !isset($colapseExpandStatus) || (isset($colapseExpandStatus) && $colapseExpandStatus eq 'expanded')} unvisible{/if}"> </span>
<span class="block_cart_collapse{if isset($colapseExpandStatus) && $colapseExpandStatus eq 'collapsed'} unvisible{/if}"> </span>
{/if}
</a>
{/if}

And there are no erros and it looks like it was working, just another problem happened, after adding the product to shopping cart it is there, fine, but after refreshing F5 or clicking on homepage it disappears... your shopping cart is empty.

 

Thank you man for all your help, I think I am close to resolve this problem.

 

EDIT: It works!!! Both changing class just after adding or removing products from shopping cart (javascript) and checking if there is any product in cart after every page refresh, problem SOLVED thanks to awesome help from ndiaga. 

 

I fought with it almost entire day, you're a lifesaver. Thank you!

Edited May 20, 2016 by Jurist (see edit history)