Equal height Product Grid rows EASY using FLEXBOX

Author	« Topic »	Page: of 2
Vince Administrator 43209 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 Guru Australia 1022 Posts Pre-sales questions only (More Details...)	Posted - 08/31/2022 : 18:30:54 Hi Vince,[quote]Is it possible you have two add to cart buttons?[/quote] Following instructions on the [url="https://www.ecommercetemplates.com/help/css-layouts.asp#quickbuy"][blue]Quick Buy[/blue][/url] help page, here are my [purple]includes.php[/purple] configuration entries: [code][font=Courier New]$csproductpagelayout="productimage, productname, description, listprice, discounts, price, [red]addtocart[/red], quickbuy"; $productpagelayout="productimage, productname, description, listprice, discounts, price, [red]addtocart[/red], quickbuy"; $quickbuylayout="productimage, productname, dateadded, sku, description, listprice, discounts, quantitypricing, options, price, [red]addtocart[/red], detaillink";[/font=Courier New][/code] 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 [img]https://itzap.com.au/pics/logo/itzap-website-design-works-mini-logo.png[/img] Edited by - ITZAP on 08/31/2022 18:36:09
Vince Administrator 43209 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 43209 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 997 Posts Pre-sales questions only (More Details...)	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 43209 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 Guru Australia 1022 Posts Pre-sales questions only (More Details...)	Posted - 10/17/2022 : 16:30:40 Hi Tim, In [purple]ectstyleproduct4.css[/purple] the flexbox styles for: [code][font=Courier New][maroon][size=3]div.categories, div.products, div.csproducts[/size=3][/maroon][/font=Courier New][/code] and [code][font=Courier New][maroon][size=3]div.categories > div.category, div.products > div.product, div.csproducts > div.csproduct[/size=3][/maroon][/font=Courier New][/code] are all identical. Your main [purple]styles.css[/purple] (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 [purple]styles.css[/purple] which are overriding [purple]ectstyleproduct4.css[/purple]. If you are not sure "How to Debug CSS using Google Chrome DevTools", check out this post: [url="https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=114999"][blue]https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=114999[/blue][/url] Gary [img]https://itzap.com.au/pics/logo/itzap-website-design-works-mini-logo.png[/img]
Page: of 2	« Topic »