Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Equal height Product Grid rows EASY using FLEXBOX
Previous Page
Author    Topic »
Page: of 2

Vince
Administrator

41803 Posts

Posted - 08/31/2022 :  14:10:42  
This is ready to try in the v7.5 updater if anyone wants to give it a go. Just set the following parameter...

ectproductstyle=4 ' ASP
$ectproductstyle=4; // PHP

I've removed the button colors as these should be set by the theme really. Also I added styling for the currency converter but other than that it's as Gary set up.

And many thanks to Gary for making this available for all!!

quote:
[DOM] Found 2 elements with non-unique id #ectaddcart0: (More info: https://goo.gl/9p2vKq)
Is it possible you have two add to cart buttons?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

ITZAP
Ecommerce Template Expert

Australia
969 Posts

Posted - 08/31/2022 :  18:30:54  
Hi Vince,
quote:
Is it possible you have two add to cart buttons?

Following instructions on the Quick Buy help page, here are my includes.php configuration entries:

$csproductpagelayout="productimage, productname, description, listprice, discounts, price, addtocart, quickbuy";
$productpagelayout="productimage, productname, description, listprice, discounts, price, addtocart, quickbuy";
$quickbuylayout="productimage, productname, dateadded, sku, description, listprice, discounts, quantitypricing, options, price, addtocart, detaillink";

So yes, there are two Add to Cart buttons in the page source code (Quickbuy window and Add to Cart button "display: none" initially). Thus the reason for the multiple Dev Tools Console warning messages. Test your end to see.

Gary

Edited by - ITZAP on 08/31/2022 18:36:09

Vince
Administrator

41803 Posts

Posted - 09/01/2022 :  08:29:36  
Hi Gary
Ok, I get you. So I've made two changes now and the first is to change the documentation so that the addtocart doesn't feature on the products pages AND the Quick Buy. But the second is so that you can have as many Add to Cart buttons as you like without any errors. As well as that browser warning only the first addtocart button would change when things like out of stock options were selected. Now they all will.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Vince
Administrator

41803 Posts

Posted - 09/01/2022 :  08:30:46  
I forgot to mention that I've added more classes to some of the elements so that it is easier to differentiate between items on the products pages and the quick buy pages.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

1234
Ecommerce Template Expert

USA
938 Posts

Posted - 10/16/2022 :  13:21:11  
Are there any detailed instructions on adding this, and then tweaking it afterward? I added this to my site, but it shifted the Recommended Products on my home page to the far right of the page. I had to immediately remove it. The flex boxes showed up on my products page, but they did not "jump out" as in some of the examples posted.

Vince
Administrator

41803 Posts

Posted - 10/17/2022 :  02:40:35  
Hi 1234
Could you maybe set up a test page that we could have a look at?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

ITZAP
Ecommerce Template Expert

Australia
969 Posts

Posted - 10/17/2022 :  16:30:40  
Hi Tim,
In ectstyleproduct4.css the flexbox styles for:

div.categories,
div.products,
div.csproducts

and

div.categories > div.category,
div.products > div.product,
div.csproducts > div.csproduct

are all identical.

Your main styles.css (or whatever name) stylesheet which loads second likely contains conflicting entries for those divs which throw Recommended Products out of whack.

So your solution is to remove those conflicting CSS entries in styles.css which are overriding ectstyleproduct4.css.

If you are not sure "How to Debug CSS using Google Chrome DevTools", check out this post: https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=114999

Gary
Page: of 2    Topic »  
Previous Page
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000