Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Add to Cart not working


Mikepo

Recommended Posts

Hi everyone,

Just finalising my latest CE shop, with many addons, php7.0, and just noticed that in responsive design mode (firefox cntl-shift m) the 'add to cart' button stops working.  This only happens when the screen width is less than the min width as defined in the user.css. In this case 768px

@media only screen and (min-width : 768px) {
  div.cm-pi-gallery {
    min-height: 500px;
  }

Has anyone noticed this, and if so does anyone have a solution?

Regards

Mike

 

 

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

If the button is showing, which it sounds like it is, then it is probably being overlayed by some other div. Try adding z-index:100; to the class for the button.

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

Thanks Jack, that fixed it, just applied an inline style.

But I don't understand why the button behaves like that in a smaller view.

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

On 10/18/2018 at 6:38 AM, Mikepo said:

Thanks Jack, that fixed it, just applied an inline style.

But I don't understand why the button behaves like that in a smaller view.

Mike could you post the code on how you modified the class as per Jack's suggestion? Thx

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

I added the code Jack suggested but I'm still having problems getting the Add To Cart button to work on the smartphone.

My code in the user.css file is:

.cm-pi-buy-button {
	z-index:100;
	margin-bottom: 10px;
}

I hope that's correct.  The margin bottom was my idea. Anyway....

What's going on seems to be that if there is a module displayed immediately below the Add To Cart button, the button won't work when tapped on.

This can be any module. Stock or add ons I've installed.

But with some fussing around with sort order and content width with various product_info modules it seems I found a combo that will allow the Add to Cart button to function.

The display doesn't look the greatest but at least it works.

PS....the customer that pointed the problem out is getting a discount on her purchase. 😀

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

I'

On 20 October 2018 at 4:37 PM, altoid said:

Mike could you post the code on how you modified the class as per Jack's suggestion? Thx

I'm away from my PC at the moment, but I put the code in the template for the button

<style .xs.sm.6 {z-index:100; }></style>

or something like that,  syntax might be incorrect.  I'll check tomorrow

 

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

@altoid

This is the actual code I added to the template file for the button module.  Just add it to the top of the file.

<style>.col-xs-6 {
    z-index: 100;
}</style>

.col.xs.6 assumes the content width of the button module is set to 6.  Use the same number as defined in your module.

This worked for me, and the button is then on top and seems not to effect any other button.

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

4 hours ago, Mikepo said:

@altoid

This is the actual code I added to the template file for the button module.  Just add it to the top of the file.

<style>.col-xs-6 {
    z-index: 100;
}</style>

.col.xs.6 assumes the content width of the button module is set to 6.  Use the same number as defined in your module.

This worked for me, and the button is then on top and seems not to effect any other button.

Mike, thank you.  As you posted it worked.  I decided to put that in a <div> as so:

<div>
<style>.col-xs-12 {z-index: 100;}
</style>
<div class="col-xs-<?php echo $content_width; ?> text-right cm-pi-buy-button">
  <?php 
  echo tep_draw_button(MODULE_CONTENT_PI_BUY_BUTTON_TEXT, 'fa fa-shopping-cart', null, 'primary', array('params' => 'data-has-attributes="' . (($products_attributes['total'] > 0) ? '1' : '0') . '" data-in-stock="' . (int)$product_info['products_quantity'] . '" data-product-id="' . (int)$product_info['products_id'] . '"'), 'btn-success btn-product-info btn-buy'); 
  echo tep_draw_hidden_field('products_id', (int)$product_info['products_id']);
  ?>
</div>
</div>

which works as well.

I'm glad you asked about this and thanks to @Jack_mcsfor the tip. And I thank my customer for mentioning the problem on my site. 

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...