Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
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.
|
|
|
|
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
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
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
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
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
|
|
|
|
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)
|
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.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
Thanks: 3 times Was thanked: 15 time(s) in 15 post(s)
|
Got it, but where is this set?
|
|
|
|
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.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
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
|
|
|
|
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.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 907
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
|
|
|
|
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>
|
|
|
|
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.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close