Product Listings - Jagged Display

  • Posts: 47
  • Thank you received: 0
7 years 1 month ago #263624

-- url of the page with the problem -- : unicomms-emall.com
-- HikaShop version -- : 3

Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells)

etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
7 years 1 month ago #263627

Hi,

The issue is that you have a javascript error on your page coming from another extension:
monosnap.com/file/aTMP3vVWZ3NOSY0OeVl4juKCZRI6sF
Because of that the "height consistency" javascript of HikaShop is not run on the page and the height is not adapted automatically.
Note that you can also force the height yourself with simple CSS like below that you can add to your template:
.hikashop_subcontainer {
height: 320px;
}

Please Log in or Create an account to join the conversation.

  • Posts: 39
  • Thank you received: 3
6 years 10 months ago #269226

Hi Nicolas,

I have Joomla template with responsive design and observe similar behavior without Javascript errors. The screenshot is attached. The gaps appear in random places. Sometimes there are no gaps at all. I suspect it somehow depends on browser windows size. I tried to update CSS as you suggested; it works, but breaks responsive layout. :( Is there any other solution that you could think of ?

Thanks.
Best regards,
B.G.

Attachments:
Last edit: 6 years 10 months ago by lmcbmai.

Please Log in or Create an account to join the conversation.

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
6 years 10 months ago #269228

Hello,

Sorry but without any link to your website or details about the menu configuration we won't be able to say much.
But the feature you're looking for his "height consistency". And the page need to be JS errror clean to let that feature work, as Nicolas said :

Because of that the "height consistency" javascript of HikaShop is not run on the page and the height is not adapted automatically.


Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 39
  • Thank you received: 3
6 years 10 months ago #269429

After couple of days of "digging" here is what I found:

- All products on the page are displayed under <div class="hk-row-fluid"> and have float:left style, i.e. browser is in charge of breaking rows based on the individual product image/box sizes and overall layout width.

- Product images are resized to have identical width, however if the original size of the images is different, there will be difference in the height of the thumbnails.

- Additional height difference can be caused by the length of product name, which can fit into 1 line, or occupy 2 or more lines.

- All of the above causes the boxes representing different products to have different heights. The difference may be just a few pixels, but it affects the placement of the products in the next row.

Rendering starts from the right and then product tries to "float" left. Let say we have 4 products in the 1st row and the box containing the 2nd product is taller then boxes with 3rd and 4th product. Then the 5th product (1st in the 2nd row) will get "stuck" under product 3 when trying to float left, because the bottom of product 2 will be on its way. The snapshots posted by brendanlanza and me clearly depict this.

There should be a way to calculate and unify the box heights while building the page, but due to lack of time I did not make a "deep dive" into the code. Instead I wrote a JavaScript function that runs after page rendering. It scans all the product boxes on the page and finds the tallest one. Then it forces all boxes to have that height. This fixes the issue, however the same function needs to be executed if user resizes the browser window.

This workaround is definitely far from being perfect, but I decided to post it in case somebody else is experiencing the same issue. JavaScript can be added anywhere, not necessarily to Hikashop file.

<script type="text/javascript">
(function($){
  $(window).load(function(){
    var l = $('[class^="hkc-md-"]');
    var h = 0;
    var t = '';
    $.each(l, function (i,d) { if (d.clientHeight > h) { h = d.clientHeight; } });
    $.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height(h); });
})})(jQuery);

(function($){
  $(window).resize(function(e) {
    window.resizeEvt;
    $(window).resize(function() {
      clearTimeout(window.resizeEvt);
      var l = $('[class^="hkc-md-"]');
      var t = '';
      $.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height("auto"); });
      window.resizeEvt = setTimeout(function(){
        var h = 0;
        $.each(l, function (i,d) { if (d.clientHeight > h) { h = d.clientHeight; } });
        $.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height(h); });
      }, 300);
    });
  });
})(jQuery);
</script>

Thanks.
Best regards,
B.G.

Last edit: 6 years 10 months ago by lmcbmai.
The following user(s) said Thank You: jazzmang, themarychain

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
6 years 10 months ago #269456

Hi,

Thanks. That's basically what the "height consistency" feature in HikaShop does by default.
But you can use your javascript, it's the same.
An alternative is to force the height of all the boxes with CSS as I proposed here www.hikashop.com/forum/product-category-...-display.html#263627

Please Log in or Create an account to join the conversation.

  • Posts: 39
  • Thank you received: 3
6 years 10 months ago #269469

Thanks Nicolas!
I have 'height consistency" enabled, but it does not work by some reason. Tried also forcing fixed height in CSS, but that breaks responsive layout of Joomla template. Most likely there is some kind of conflict between the way Hikashop builds the layout and what my Joomla template is trying to do to adapt layout to the screen resolution of different devices types.

Please Log in or Create an account to join the conversation.

  • Posts: 228
  • Thank you received: 21
  • Hikashop Business Hikashop Essential
6 years 3 months ago #284485

I have this exact same issue on multiple sites and it isn't JS error related.

My testing has show it was primarily a desktop issue.
Page width didn't seem to matter, more the browser - happens equally on Chrome, Firefox, IE, etc.

I did notice it happened more on FF until the latest Quantum release came out.
That suggest to me it is a JS performance / timing issue.

I too went the CSS fixed height at first but it just causes other problems.

imcbmai's script does seem to be the fix.

Please Log in or Create an account to join the conversation.

Time to create page: 0.093 seconds
Powered by Kunena Forum