.category-product - a little piece of awesome sauce

[lesliekirk]

I've been adding some addition content divs to the SFNT and thought I was going to be banging my head on my desk to make all of the divs the same height (I need to quit doing that as the desk isn't that durable). I remembered that the Featured Products had a nifty little javascript that keeps all the product divs the same height, so I searched through the scripts.js file thinking it was going to be a div ID which I would have had to duplicate and rename for each of these little boxes. I was pleasantly surprised to discover it's a class .category-product. I was happy dancing when I watched all my colorful little boxes all have the same height of the tallest one in the row.

[koala]

Nice find! Thank you for sharing

[lesliekirk]

So my awesome sauce seems to have soured a bit. I'm trying to use this on a page other than the SFNT or CTGY page and it's not working. If I change the Page

 id="js-&mvte:page:code;"

to

 id="js-CTGY"

it works. When I look in the scripts.js, to me, it looks like this little ditty isn't dependent upon any page (it looks like it's part of the sharedFunctions:, but what do I know?):

    // ---- Conform all subcategory and/or product DIVs to same height ---- //
        conformDisplay: function (selector) {
            var targetElement = selector || '.category-product';

            $(window).on('load', function () {
                $(targetElement).conformity({mode: 'height'});
            });
            $(window).on('resize', function () {
                $(targetElement).conformity({mode: 'height'});
            });
        },

So why isn't it working unless I change the id?

[eldon99]

I am trying to get this same thing to happen on my dev store (http://dev.ntxtools.com/air-cutting-tools.html). I tried updating the code per this post, but it does not seem to work. Can anyone shed in light on how to get the images and boxes to be even across the board? This is driving me nuts.

[lesliekirk]

I am trying to get this same thing to happen on my dev store (http://dev.ntxtools.com/air-cutting-tools.html). I tried updating the code per this post, but it does not seem to work. Can anyone shed in light on how to get the images and boxes to be even across the board? This is driving me nuts.

This little ditty only makes the divs all the same height, it has no affect on the image sizes.

[lesliekirk]

I'd like to circle back around to this because I'd like to do something similar with the Base ReadyTheme. Has anyone done something for it?

[Matt Zimmermann]

Hi Leslie,

You would need to add the Conformity plugin, which is included in the Levels ReadyTheme, and then make a call to it the same way you do in Levels. Another option, since you are talking about the Base ReadyTheme which is based on Bootstrap, you could try this Flexbox Thumbnail Cards

[Fisher]

Had this same problem; found that within our scripts.js file, there are "Conform all subcategory and/or product DIVs to same height" functions for the following pages: CTGY, PLST, SRCH; these can be copied & updated for additional pages.

Original function for SRCH page:

jsSRCH: function () {
    // ---- Conform all subcategory and/or product DIVs to same height ---- //
    cornerstoneUX.sharedFunctions.conformDisplay();

    // ---- Open Quick View ---- //
    cornerstoneUX.sharedFunctions.openQuickView();
},

So, for an example page "CUSTOM" the above could be copied & updated to:

jsCUSTOM: function () {
    // ---- Conform all subcategory and/or product DIVs to same height ---- //
    cornerstoneUX.sharedFunctions.conformDisplay();
},