Mikepo Posted October 17, 2018 Share Posted October 17, 2018 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 More sharing options...
Jack_mcs Posted October 18, 2018 Share Posted October 18, 2018 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 More sharing options...
Mikepo Posted October 18, 2018 Author Share Posted October 18, 2018 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 More sharing options...
Jack_mcs Posted October 18, 2018 Share Posted October 18, 2018 In the smaller view the space between elements is removed or changed so they may overlay one another. 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 More sharing options...
♥altoid Posted October 20, 2018 Share Posted October 20, 2018 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 More sharing options...
♥altoid Posted October 21, 2018 Share Posted October 21, 2018 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 More sharing options...
Mikepo Posted October 21, 2018 Author Share Posted October 21, 2018 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 More sharing options...
Jack_mcs Posted October 22, 2018 Share Posted October 22, 2018 You missed the > after <style. 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 More sharing options...
Mikepo Posted October 22, 2018 Author Share Posted October 22, 2018 @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 More sharing options...
♥altoid Posted October 22, 2018 Share Posted October 22, 2018 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.