logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
rlopez397954  
#1 Posted : Friday, January 13, 2023 3:44:18 PM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers
Joined: 11/30/2018(UTC)
Posts: 81

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
We recently launch another website into production and found issues with the Right Sidebar widget in Page Layouts when using on a small device.

The behavior we have is when rendering on a small device, the Right Sidebar ( Shipping Estimator) stays into a fix position and does not drop below the basket which makes the page messy and unusable. We have another Production site where this is not an issue and had allowed us to debug this in a live browser to see what was different when the code executes.

Here is what we found: New Production site rendering
Quote:
<div class="container-fluid">
<div class="row content">
<div class="column col-md-9 main-content col-xs-9 col-sm-9">

</div>
<div class="column col-md-3 right-sidebar col-xs-3 col-sm-3">

</div>
</div>
</div>


If we change the class columns to this:
Quote:
<div class="container-fluid">
<div class="row content">
<div class="column col-md-9 main-content">

</div>
<div class="column col-md-3 right-sidebar">

</div>
</div>
</div>


The basket page now renders correctly when using on a small device. The shipping estimator or other widgets being used in the Right Sidebar fall below the basket correctly. As a note this behavior is there whether you are using class="container" or class="container-fluid". Also note that we have another production site where this is not an issue, but is an issue on its Dev site which is why we did not catch this until after we launched another new Production site.

I'm looking to see if someone from AC can point me in the right direction for a fix as I cannot find what page drives this layout page in the Right Sidebar that needs to be modified, so the code renders correctly. This may even be a possible bug. Any help would be greatly appreciated.

Thanks again.




Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

rlopez397954  
#2 Posted : Friday, January 13, 2023 6:25:30 PM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers
Joined: 11/30/2018(UTC)
Posts: 81

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
After looking deeper we see that in our older production site the RightSidebar.cshtml file shows a date of 4/25/2019 and there are several other pages that are no longer in the directory as of the latest build, indicating that there was some cleanup done in a earlier update. This site again, all is working correctly on small screens.

Looking into the latest build which we used their full version, when downloading it from Able on 12/02/20222 (9.0.7-b7369) and the check sum matched per instructions before using it. After checking the Views>Shared>Outer>RightSidebar.cshtml we see now this file changed on 9/30/2022 which is probably from the build itself.

I've tried to update the page RightSidebar.cshtml in the Outer directory but it defaults back to the old version. I've also tried manually changing the Right Sidebar through the Page Layouts in the Admin and it reverts back to the old version as I listed in my above post.

So trying to understand what controller is driving this page?

Once again no customization's have been done to the back end of this new production site other than some look-n-feel.

Any feedback would be great!

Thanks again.
ray22901031  
#3 Posted : Friday, January 13, 2023 8:22:01 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
The problem when trying to troubleshoot something like this is that one does not have access to your server, and I don't know what files are located where?

For instance, you say that the top part does not work, but the top part does specifically more conditions for small devices where the bottom code does not.

Could the main contact class be overridden because you are specifically specifying media queries at this level?

Unless necessary, bootstrap should do all the media queries for you. Remember that if you have the same class in your custom theme CSS, it will override everything else. This is why it's difficult for someone outside your organization to troubleshoot this because we don't know what files are located where?

I would recommend the following:

Go to the server where everything is working and create a test page. In the HTML of the test page enter the code that doesn't work and see what happens on that server.

Go to the server where it's not working and do the same thing, but this time enter the code that is working and again see what happens.

This feels like you have a file that's overriding everything else. We try not to override the built-in media queries unless absolutely necessary, and in our case, we are making certain block elements invisible.

Congratulations on troubleshooting your website on a small device, so many others do not, and they don't think it's important yet Google ranks this even higher when it comes to SEO than desktop optimization.

Looking forward to the result.

-Ray
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.