[Solved] Add To Cart Button Disappearing Act!

[AZC]

I know the add to cart button has a knack of disappearing however this is really weird.

 

My site is www.lighting-deluxe.co.uk

 

As you can see on the product page the add to cart button shows up.

However I have added a button which says "More Details", this is a simple internal link hard coded on the product.tpl page.

 

However, when pressed the add to cart button disappears and the browser shows it having a css rule of "display:none"

 

If you then refresh the browser it works fine.

 

Any ideas about this because its driving me crazy.

 

Thanks

Edited February 4, 2016 by AZC (see edit history)

[razaro]

Looks fine for me, it does not get hidden. 

Did you already find solution for this ?

[AZC]

Looks fine for me, it does not get hidden. 

Did you already find solution for this ?

No 

What browser are you using?

For me when I go into a product for the first time and click on the more details button, the add to cart button and the whole add to cart section disappears.

image attached...

 

When watching the code on the console whilst clicking the button, I see the display attribute flick through a few options and then fix on "none"

 

I'd send a video but not sure how to do that.

 

Thanks

[razaro]

To me it shows modal window but buttons is displayed correctly.

 

http://postimg.org/image/40et1cu4h/

 

And that is in Chrome, same as Firefox and Edge.

[AZC]

To me it shows modal window but buttons is displayed correctly.

 

http://postimg.org/image/40et1cu4h/

 

And that is in Chrome, same as Firefox and Edge.

And that is after you clicked the more details button? Did that button work?

[razaro]

Sorry my bad, did not read that right, so when More info is clicked.

 

Think somewhere in block carts javascript file something is triggered but try this.

Add this code to your theme js/modules/blockcart/ajax-cart.js file

	$(document).on('click', '#product_description', function(e){
		e.preventDefault();
	});

for example bit off the start 

$(document).ready(function(){
	ajaxCart.overrideButtonsInThePage();

	$(document).on('click', '.block_cart_collapse', function(e){
		e.preventDefault();
		ajaxCart.collapse();
	});
	$(document).on('click', '.block_cart_expand', function(e){
		e.preventDefault();
		ajaxCart.expand();
	});

		$(document).on('click', '#product_description', function(e){
			e.preventDefault();
		});

That should go to description without triggering any other code.

[AZC]

Sorry my bad, did not read that right, so when More info is clicked.

 

Think somewhere in block carts javascript file something is triggered but try this.

Add this code to your theme js/modules/blockcart/ajax-cart.js file

	$(document).on('click', '#product_description', function(e){
		e.preventDefault();
	});

for example bit off the start 

$(document).ready(function(){
	ajaxCart.overrideButtonsInThePage();

	$(document).on('click', '.block_cart_collapse', function(e){
		e.preventDefault();
		ajaxCart.collapse();
	});
	$(document).on('click', '.block_cart_expand', function(e){
		e.preventDefault();
		ajaxCart.expand();
	});

		$(document).on('click', '#product_description', function(e){
			e.preventDefault();
		});

That should go to description without triggering any other code.

Phew. Thought I was going crazy. Will try that and let you know how it goes.

Any idea why it would do that? In theory there should be no connection. after all the extra button is not related in any way to anything else.

 

Thanks

[AZC]

Phew. Thought I was going crazy. Will try that and let you know how it goes.

Any idea why it would do that? In theory there should be no connection. after all the extra button is not related in any way to anything else.

 

Thanks

Nope that hasnt helped. Will keep trying

[razaro]

OK sorry that did not work but try this.

 

In your product.tpl change your button to 

<div class="blue"><a href="javascript:{ldelim}{rdelim}">More Details</a></div>

then bit down also, added just id

			<!-- More info -->
			<section class="page-product-box">
				<h3 id="product_description" class="page-product-heading">{l s='More info'}</h3>

and in product.js in your theme folder around lines 250-280 add 

				$(document).on('click', '.blue a', function(e){
					e.preventDefault();
					$.scrollTo( '#product_description', 1200 );
				});

Hopefully that should work, I tested similar here 

[AZC]

OK sorry that did not work but try this.

 

In your product.tpl change your button to 

<div class="blue"><a href="javascript:{ldelim}{rdelim}">More Details</a></div>

then bit down also, added just id

			<!-- More info -->
			<section class="page-product-box">
				<h3 id="product_description" class="page-product-heading">{l s='More info'}</h3>

and in product.js in your theme folder around lines 250-280 add 

				$(document).on('click', '.blue a', function(e){
					e.preventDefault();
					$.scrollTo( '#product_description', 1200 );
				});

Hopefully that should work, I tested similar here 

That works great.

Thanks a mil.