Would like to change Add to cart background color after click(or after adding product to cart)

[PrabuSS]

Hi

 

I Would like to change Add to cart background color after click(or after adding product to cart) in product listing and product details page. Now I've added following code to achieve this on product-list.tpl. But its required to refresh the page to see the color changes. I need to change Color of cart button when product is added to cart, not just when refresh the site

{if ($cart->containsProduct($product.id_product, $product.id_product_attribute))}
									
	<a class="button ajax_add_to_cart_button cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow"  title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" style="background-color: #83E02F;">
										
		<span>{l s='Add to cart'}</span>
       </a>

<!-- / check if you have this product in cart -->

{else}
									
       <a class="button ajax_add_to_cart_button cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" tabindex="1">
										
		<span>{l s='Add to cart'}</span>
	</a>
										
{/if}

URL : http://www.drucken24.at/465-intec

 

PS Version : 1.6.1.11

 

Screens attached.

 

Please any one

Edited May 18, 2017 by Prabukaran (see edit history)

[PrabuSS]

Hi

 

I want to change the add to cart button background color after adding product to cart. How do i do this in global.css file?

 

I think its something related to ajax things i guess. Please make it clear.

Edited May 18, 2017 by PrabuSS (see edit history)

[PrabuSS]

Hi

 

Could you please provide the JS code to do this. I cant make it work in my way.

[PrabuSS]

 

Try to implement this one:

<button type="button" onclick="changeBG()">Set background color</button>

<div id="myDIV">
  <h1>Hello content</h1>
</div>


<script>
function changeBG() {
    document.getElementById("myDIV").style.backgroundColor = "red";
}
</script>

Thanks for your reply.

 

I've implemented your javascript code on my Cart button in product-list.tpl. But its not working. I think ajax call on cart button has been blocked this code.

<script type="text/javascript">
function changeBG() {
    document.getElementById("cartbutton").style.backgroundColor = "#83E02F";
}
</script>


<a id="cartbutton" class="button ajax_add_to_cart_button cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" onclick="changeBG()">

You can use page source to see my script in this page http://www.drucken24.at/465-intec

 

Please help.

Edited May 19, 2017 by PrabuSS (see edit history)

[PrabuSS]

http://www.drucken24.at/465-intec

Your are under maintenance mode?

Hi

 

Still we're not going Live. Could you please provide your IP address to enable shop for you?

[PrabuSS]

Hi 

 

Please any one have an idea to do this?