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
Inner Template Misbehaviour
Options
Go to last post Go to first unread
Previous Topic Next Topic
jeffr_ca  
#1 Posted : Thursday, September 26, 2019 11:44:30 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
I've been experimenting with minor adjustments of Inner Templates but running into unusual behaviour with scrolling on mobile that may be a bug.

From Admin Website>Store Design>Inner Templates.

Find "Product Detail In Tabs". Make a copy of this Inner Template.

Edit the newly created "Copy of Product Detail In Tabs" and perform a simple adjustment. Go to Layout Tab and adjust the first element (where the product photo would be) to make the column one step narrower.

And then make that same column one step wider, essentially re-adjusting back to exactly what the layout was when you began.

Save the modified template.

Go to a product and assign the "Copy of Product Detail in Tabs" to the product's "Additional Settings" Inner Template specification.

Browse the product on Desktop looks fine, but when browsing the product on mobile, the content will no longer scroll properly.

It seems that making a copy of an Inner Template and making changes/saving as a new Inner Template is not fully defined.

-Jeff
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
shari  
#2 Posted : Friday, September 27, 2019 2:40:05 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Jeff,

I am not able to reproduce the issue.

Can you please share some details or a screen shot about what exactly is the issue when you scroll on mobile.
And also can you confirm that you are not facing the issue for the original Product Details in Tab inner template?
Back to top
jeffr_ca  
#3 Posted : Friday, September 27, 2019 9:05:42 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Hi Shari,

When you browse this link on mobile and try to scroll down the page, if you place your finger on the photo or some description areas, it won't slide. If you touch at the header or footer it will work or if you touch around the very narrow outside frame it will work.

https://acv9.woodessence.../Rainbow-Mouse-with-bell

All that was done was assignment of a new inner template copied from "Product Details in Tabs". For the new copied template I've made a minor change (adjusted the size of the product photo column) by clicking the Minus (make column narrower) and then clicking the Plus (make column wider). Then save the template and assign it to a product.

-Jeff
Back to top
shari  
#4 Posted : Monday, September 30, 2019 12:20:26 PM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Jeff,

I am able to reproduce the issue. This seems to be a bug in the script we are using in the construction of inner layout HTML.

To fix the issue
1- Please open the file Website\Areas\Admin\Scripts\jQuery-gridmanager-0.3.1\dist\js\jquery.gridmanager.js

2- Search for the code

Code:
// Clean img markup
.find("img")
.removeAttr("style")
.addClass("img-responsive")
.removeAttr("data-cke-saved-src")
.removeAttr("data-mce-src").end()


3- Replace it with

Code:
// Clean img markup
.find("img")
.removeAttr("style")
.addClass("img-responsive")
.removeAttr("data-cke-saved-src")
.removeAttr("data-mce-src").end()
// Clean sortable class
.find("div")
.removeClass("ui-sortable-handle").end()


4- Save the file and you are good to go.

Please let me know if you need more help!
Back to top
jeffr_ca  
#5 Posted : Monday, September 30, 2019 7:41:34 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Thanks Shari,

That has worked.

-Jeff
Back to top
Users browsing this topic
Guest (7)
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.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.135 seconds.