Announcement

Collapse
No announcement yet.

.category-product - a little piece of awesome sauce

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    .category-product - a little piece of awesome sauce

    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.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Nice find! Thank you for sharing
    Dylan Buchfink
    The Mattress & Sleep Company
    http://www.tmasc.ca/

    Comment


      #3
      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
      Code:
       id="js-&mvte:page:code;"
      to

      Code:
       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?):
      Code:
          // ---- 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?
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        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.

        Comment


          #5
          Originally posted by eldon99 View Post
          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.

          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            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?
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7
              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
              Matt Zimmermann
              Director of UI/UX
              / Miva, Inc.

              Comment


                #8
                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:
                Code:
                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:
                Code:
                jsCUSTOM: function () {
                    // ---- Conform all subcategory and/or product DIVs to same height ---- //
                    cornerstoneUX.sharedFunctions.conformDisplay();
                },

                Comment

                Working...
                X