product detail page layout breaks on update

  • Posts: 96
  • Thank you received: 6
  • Hikashop Business
4 years 4 months ago #313922

-- url of the page with the problem -- : antiqueswan.com/stageit/
-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.9.13
-- PHP version -- : 7.2

When updating from 4.2.1 to 4.2.2, the product detail page layout breaks. Please see the two screen shots for comparison, or see these two urls:

Live, using 4.2.1: antiqueswan.com/product/small-french-chest-or-commode-of-cherry

Staged, using 4.2.2: antiqueswan.com/stageit/product/small-fr...or-commode-of-cherry

The sidebar that has the title, price, etc now extends to the height of the product image and the rest of the content has been pushed to a single column.

I do see the CSS differences between the two but I have two questions: 1) Why did an update break the layout, and 2) how can this be fixed?

Thank you,

Karen

Attachments:

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

  • Posts: 4546
  • Thank you received: 613
  • MODERATOR
4 years 4 months ago #313931

Hello,

First, I have to say that I didn't see any difference between your 2 Url link, maybe you have find your solution ?...

Anyway, in order to answer to your questions :
"1) Why did an update break the layout,"
=> Many reason can be involve, like an HikaShop override view, as an override is kept when you update, then you can have a view from old HikaShop views with a more recent HikaShop frontend css.
=> Some custom Css in your HikaShop default frontend css, as previous, in order to don't erase it, a custom default frontend css is kept and can mismatch with new HikaShop view structure, especially if we have been forced to change Html Class.
=> Your current template that don't support new HikaShop structures, see this reason with template creator support, and more especially if this template is sell as HikaShop compatible.

"2) how can this be fixed?"
Depends directly from my prevoius answers, remove override view (or create a new override from more recent HikaShop view) or remove custom Css code, and finally for the third reason, contact the template creator.

Hope this will help you to better understand this point.

Regards

Last edit: 4 years 4 months ago by Philip.

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

  • Posts: 96
  • Thank you received: 6
  • Hikashop Business
4 years 4 months ago #314041

Hello,

Please see this screen recording that shows the difference between the product page that's v. 4.2.1 and 4.2.2. screencast-o-matic.com/watch/cqlDqTv1Nf

Could you take another look at the comparisons please? The links and screen shots in the first post are valid. Can you see what must be adjusted and how? I appreciate you comments about why and how but I don't know where the break is happening.

Thank you,

Karen

P.S. I've been spending a lot of time trying to fix what breaks when Hikashop has an update (last update broke the search function) and the site has become costly to maintain because of it. If possible I'd like to have a clear upgrade path.

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

  • Posts: 4546
  • Thank you received: 613
  • MODERATOR
4 years 4 months ago #314049

Hello,

I processed some analyze, and here you can see what I find :



It seems that there are difference from in your hikashop.css, I have been watching for over a year our log file, and can't find from which version this command is coming ("float:left;")...

From this, I can only make some guess, like maybe for a reason or another the hikashop.css file have been edited or customized (we strongly don't recommend it to do) OR for a reason or another when you update your HikaShop, this file was lock, and so impossible to update, as result your hikashop.css is no longer linked to new HikaShop files.

Now to solve your issue, as it seems that your website is build from this hikashop.css, you can add this css command in your frontend css file, the style.css can be used to add your custom css.

This kind of code will solve your issue :
@media (min-width: 992px) {
    .hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc-   md-12 {
        float: left;
    }
}

Hope this will help you.
Regards

Last edit: 4 years 4 months ago by Philip.

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

  • Posts: 96
  • Thank you received: 6
  • Hikashop Business
4 years 4 months ago #314068

Thank you for looking at this further. The added CSS did resolve the bottom half of the product page.

In the upper half of the page though the box of info to the right of the product slider has a different set of CSS assigned to it from the Hikashop update. The update appears to have introduced new CSS in .hk-row-fluid with a change from display: block to display:flex. When the display is overridden, the right box of information is located correctly, but the list of information inside the box is backwards.

Please see this screen recording for a more exacting description: screencast-o-matic.com/watch/cqlbqwvjCx

I think it's close but I can't seem to alter the order of display on the items after it's changed from flex to block.

Thank you,

Karen

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

  • Posts: 4546
  • Thank you received: 613
  • MODERATOR
4 years 4 months ago #314078

Hello,

You're right, but on this point the flex css command point is to be more fluent and cover more cases in responsive.
So far, the HikaShop Team have to make evolve HikaShop, and at the same time make this transitions in order to disturb as little as possible.
But as you can imagine, sometimes it's impossible to don't move forward, and so adjustments are impossible to avoid, and that's why we are here to help you.
Now, Have a look on my screenshot example :



As you can see the code seems to work differently, the point here, is that your custom css order is different, css sheet prioritizes the last command.
Example :
.swan-product-sidebar {
    float: right;  // OVERRIDED
    margin-top: 30px;
}
@media (min-width: 992px)
.hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc- md-12 {
    float: left;
}
If you want prioritize the float:left; you have to reverse :
@media (min-width: 992px)
.hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc- md-12 {
    float: left;
}
.swan-product-sidebar {
    float: right;
    margin-top: 30px;
}

Hope this will help you.
Regards

Hope this will help you.
Regards

Last edit: 4 years 4 months ago by Philip.

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

  • Posts: 96
  • Thank you received: 6
  • Hikashop Business
4 years 4 months ago #314131

Hello Philip,

The CSS change has corrected the layout and things are back to the way they were set up in 4.2.1. I have incorporated these changes on the live site, which is now running 4.2.2 and things look as expected. Thank you for working with me through this.

Cheers,

Karen

The following user(s) said Thank You: Philip

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

Time to create page: 0.074 seconds
Powered by Kunena Forum