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
Lazy loading - products feature widget
Options
Go to last post Go to first unread
Previous Topic Next Topic
ray22901031  
#1 Posted : Wednesday, March 22, 2023 2:40:37 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
We are trying to implement lazy loading on our site for better speed. We have been very successful so far.

Regarding the products feature widget, we would like to try to modify the widget to implement lazy loading, it should only take rewriting the "scr" tag to <"data-scr> and adding the class.

Since this widget is usually at the bottom of the page, it is an excellent candidate for lazy loading.

Instead of me going up and down the directory structure looking for the source, could you please just point me in the general direction?

Many thanks.
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
shaharyar  
#2 Posted : Wednesday, March 22, 2023 3:08:55 AM(UTC)
shaharyar

Rank: Advanced Member

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

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
All product listing widgets use a common control _ProductItemDisplay. I think updating the img tag in this file will work for all product listing widgets.

I hope this is what you were asking for.

File path: \Website\Views\Shared\_ProductItemDisplay.cshtml

Edited by user Wednesday, March 22, 2023 3:09:49 AM(UTC)  | Reason: Not specified
Back to top
ray22901031  
#3 Posted : Wednesday, March 22, 2023 3:24:07 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
I do not believe this is the proper file, since there's no scr tag. I need to know exactly where the html scr tag is implemented.

Please see below for a better explanation.

Change this:

<img src="/Assets/ProductImages/Moto-EVXS24-Y-1-min_t.jpg" class="img-responsive product-img-center" alt="EVX-S24 Portable UHF 16CH Digital Radio - Yellow" width="180px" height="180px">

To this:

<img data-src="/Assets/ProductImages/Moto-EVXS24-Y-1-min_t.jpg" class="img-responsive product-img-center lazyload" alt="EVX-S24 Portable UHF 16CH Digital Radio - Yellow" width="180px" height="180px">

Thanks
Back to top
ray22901031  
#4 Posted : Wednesday, March 22, 2023 5:17:54 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
It's the "_ProductItemDisplay.cshtml" file under the themes directory, will modify and see if it works and post back. I've never touched this file before so I'm not sure why under my theme it would be different than the one under website?

The one under my theme specifically list "<img src="@Url.Content(imageUrl)" class="img-responsive product-img-center" width="180px" height="180px" alt="@imageAltText" /> " which I can modify, the other one just refers to @Html.Image.

I'm not sure why but where exactly is @Html.Image being specified?

Thanks

Edited by user Wednesday, March 22, 2023 5:25:15 AM(UTC)  | Reason: Not specified
Back to top
shaharyar  
#5 Posted : Thursday, March 23, 2023 12:51:43 AM(UTC)
shaharyar

Rank: Advanced Member

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

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Quote:
@Html.Image


This is an MVC helper to render HTML img tags. We used this to add imgAttributes based on some conditions. This is easy to use in this case.

View files are placed under the themes folder to customize the view. You may have placed the file for this very reason.

During upgrades view files under the themes folder should be merged with the updated view files.
Back to top
ray22901031  
#6 Posted : Thursday, March 23, 2023 2:28:05 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Got it, but where is this set?
Back to top
shaharyar  
#7 Posted : Thursday, March 23, 2023 2:35:37 AM(UTC)
shaharyar

Rank: Advanced Member

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

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
If you are referring to @Html.Image, then is from Microsoft.Web.Mvc namespace.
Back to top
ray22901031  
#8 Posted : Thursday, March 23, 2023 2:44:02 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Please note I am a front end designer and I lack your experience, both files have been merged except for line 83. Under my custom theme, line 83 reads like this, see please below:

<img data-src="@Url.Content(imageUrl)" class="img-responsive product-img-center lazyload" width="180px" height="180px" alt="@imageAltText" />

Outside of my theme the files are exact except again for line 83 which reads like this, please see below:
@Html.Image(Url.Content(imageUrl), imgAttributes)

Obviously, the file in my theme will override the main file, and all is working the way I want it to work. But it seems from my limited experience that this "@Html.Image" is acting like a variable and I would just like to know where in the system this is being set. I am more than happy to continue to override the file using my theme with the following line above, as it works perfectly.

I hope I have explained it better.

Thanks
Back to top
shaharyar  
#9 Posted : Thursday, March 23, 2023 4:00:40 AM(UTC)
shaharyar

Rank: Advanced Member

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

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

Quote:
I would just like to know where in the system this is being set


Sorry, not able to understand what you actually mean by this.



Html.Image() is an MVC helper extension method that actually renders the HTML img tag as a result. Just like we have Html.TextboxFor which renders HTML input tag.

The first parameter of the function is actually the img src and the second parameter is other attributes like class, id, width, height, etc.

The purpose you want to achieve could be fulfilled from the code you already have in your view file under the theme folder.
Back to top
ray22901031  
#10 Posted : Thursday, March 23, 2023 4:07:15 AM(UTC)
ray22901031

Rank: Advanced Member

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

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Yes, I have come to the same conclusion because it would be too difficult and ugly to modify the existing code to get it to do what I want. I'll just comment out the newer version block and enter my own. Again, it's working perfectly, and it's doing exactly what I want it to do.

Thanks,

On another note, since I have your attention, I am modifying the "_Base.layout.cshtml" file, which has been customized to point to an external script. I have downloaded the script and added it to the script folder, and the only way I can test this is live. I just want to make sure I have the proper format for this file to see the script in the script folder.

Is the following correct: "src="/Scripts/script-tag.js"

Thanks
Back to top
shaharyar  
#11 Posted : Thursday, March 23, 2023 4:12:33 AM(UTC)
shaharyar

Rank: Advanced Member

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

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Quote:
Is the following correct: "src="/Scripts/script-tag.js"


Yes, this is correct to be used as below.

<script "src="/Scripts/script-tag.js"></script>
Back to top
Users browsing this topic
Guest (2)
Similar Topics
Is there lazy loading options included with the default slider code? (Content Management System)
by boyd3155174 10/5/2021 3:39:34 PM(UTC)
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.183 seconds.