[SOLVED] How can I get in header.twig (Opencart 3.0.3.6) the product's images urls in order to add rel="preload" ?

mikeinterserv wrote: ↑

Wed Mar 16, 2022 3:45 am

straightlight wrote: ↑

Wed Mar 16, 2022 3:35 am

Therefore, you may consider from what I am saying as pointless and wrong, as you say. In the end, I don't see any information regarding the terms of use for other users who may depend on your specific custom-made extensions.

Well I owe you an apology at least about the path targeted in my extension ( I misunderstood ) Yes I will choose another line to replace.
Other than that yes an adaptation for custom themes may be required but that is quite common to many mods
I am interested to see if it gives the OP the results he is hoping for.

One more thing - something that Mona had put in her code.
Duplicates - I initially didn't even think about that till I saw Monas code and then just noticed it occuring myself so I will have to fix that.

Now we're talking!

straightlight wrote: ↑

Wed Mar 16, 2022 5:29 am

Now we're talking!

Well if I manage to make it perfect it will be because of input from all 3 :-)
me for this code - Mona for duplicates ( i didn't think of) - straightlight with extra guidance.
Thanks for everyones input :-)

Whether it works out for the intended purpose and is worth it - Only the OP knows :-)

Hi,

I tested the mod and it works perfectly and my scores are better. I still have other issues to fix myself regarding the theme itself but the mod does its job brilliantly.
The only thing I need is to also get the images from data-src, as I lazy load some images and the code is something like this:<img src="placeholder.gif" data-src="url-of-image" class="lazy">, so I would need to preload both from src and data-src on any given page but even if I don't manage to do this, the mod is awesome and it works perfectly, exactly as it should. Thank you all and especially THANK YOU MIKE!

I'm glad its working how you hoped.
As I mentioned there is the small issue of duplicate images.
I have fixed that now and will upload the completed final OCMod later today.

OK well here is a final updated version.
This Mod will get first x number image urls from img src AND / OR data-src if using lazyload. (currently in this Mod x=30 as per OP request). The merged arrays are then cleaned of any duplicates before being returned to the header links.

I did have to significantly rewrite the code from the original to account for images with data-src urls and duplicates.
The use of EXTERNAL RESOURCES i.e image links from other domains etc or missing images, DO have an IMPACT on the performance of code like this so take that into account when doing your testing. Thank you again to Mona and straightlight for the input you provided. This works on ALL openCart pages.
.

Hi,

I have tested the latest version of the mod and it works perfectly, bringing both images from src and data-src. The scores definitely improved as the browser already knows, before rendering the image, which image goes where, so that the overall scores, CLS, LCP, FCP and so on definitely improved! Of course, the scores vary from theme to theme as there are other things that need to be solved, not only the images preload. But is DEFINITELY HELPS!

Thank you very very much Mike!

JNeuhoff wrote: ↑

Thu Mar 10, 2022 6:27 pm

The obvious way to do that is via an event handler, e.g. for the triggers catalog/view/product/product/before and catalog/view/product/category/before. Within these event handlers you'd have to modify the $data['header'], to add all your <link rel="preload" as="image" href="....> tags.

straightlight wrote: ↑

Wed Mar 16, 2022 1:33 am

jQuery 2.1.1 may not be reliable on all stores. Adding a JS from the controller would be more ideal, in this case.

Ok I have followed all the above advice also and here is an EVENT extension as opposed to the original OCMod.
Any feedback on whether this is the correct way (most optimal) or it works but I would have done this is welcome.
I ask because making the admin installer, then the catalog side function, then finding the module and installing it, is a fair bit more work than the original OCMod No ?
.

mikeinterserv wrote: ↑

Fri Mar 18, 2022 8:43 am

JNeuhoff wrote: ↑

Thu Mar 10, 2022 6:27 pm

The obvious way to do that is via an event handler, e.g. for the triggers catalog/view/product/product/before and catalog/view/product/category/before. Within these event handlers you'd have to modify the $data['header'], to add all your <link rel="preload" as="image" href="....> tags.

straightlight wrote: ↑

Wed Mar 16, 2022 1:33 am

jQuery 2.1.1 may not be reliable on all stores. Adding a JS from the controller would be more ideal, in this case.

Ok I have followed all the above advice also and here is an EVENT extension as opposed to the original OCMod.
Any feedback on whether this is the correct way (most optimal) or it works but I would have done this is welcome.
I ask because making the admin installer, then the catalog side function, then finding the module and installing it, is a fair bit more work than the original OCMod No ?
.

There we go.

Not sure why there's an index.html file in the package though. Haven't tested it but it looks fine. Now, one step ahead would be with the template and theme files when using Events.

straightlight wrote: ↑

Fri Mar 18, 2022 9:23 am

There we go.
Not sure why there's an index.html file in the package though. Haven't tested it but it looks fine. Now, one step ahead would be with the template and theme files when using Events.

Well it seems the only way to have some info about the code. Like a readme, without commenting the main code.
I've seen it in a couple of examples and assumed that's what it was - I dunno :-)

I am getting on to those other things also. This is about the simplist .example of the difference between the older OCMod xml extensions and the newer Events extensions. Ideal for any beginners to easily understand. Thanks for the feedback :-)