CLD-338-rendering-PGW #41

asad-rafter · 2024-12-16T14:47:42Z

No description provided.

yuval-cloudinary

@asad-rafter I'm afraid that this is not in the right direction. This uses onload, but also dynamically injects the script ensuring it will be loaded much later than needed. This slows down the loading of the PGW which causes increases in the LCP.

window.cldProductGallery is not assigned in

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

Could this be the issue?

asad-rafter · 2024-12-17T07:53:43Z

@asad-rafter I'm afraid that this is not in the right direction. This uses onload, but also dynamically injects the script ensuring it will be loaded much later than needed. This slows down the loading of the PGW which causes increases in the LCP.

window.cldProductGallery is not assigned in

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />

Could this be the issue?

Yes, this is the issue. So the problem is, sometimes in milliseconds difference <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> loads late and the cloudinary object from other scripts assigned to window.cldProductGallery, in that case it breaks the PGW because the script is not available in DOM. Let me know if you have any better solution for this

yuval-cloudinary · 2024-12-17T09:35:07Z

@asad-rafter I'm afraid that this is not in the right direction. This uses onload, but also dynamically injects the script ensuring it will be loaded much later than needed. This slows down the loading of the PGW which causes increases in the LCP.
window.cldProductGallery is not assigned in

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />

Could this be the issue?

Yes, this is the issue. So the problem is, sometimes in milliseconds difference <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> loads late and the cloudinary object from other scripts assigned to window.cldProductGallery, in that case it breaks the PGW because the script is not available in DOM. Let me know if you have any better solution for this

@asad-rafter The new code adds loading time, and still allows such a condition. Please remove the onload changes and assign window.cldProductGallery after

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

exactly like it is done in all other places you call the widget

asad-rafter · 2024-12-17T09:54:17Z

@asad-rafter I'm afraid that this is not in the right direction. This uses onload, but also dynamically injects the script ensuring it will be loaded much later than needed. This slows down the loading of the PGW which causes increases in the LCP.
window.cldProductGallery is not assigned in

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />

Could this be the issue?

Yes, this is the issue. So the problem is, sometimes in milliseconds difference <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> loads late and the cloudinary object from other scripts assigned to window.cldProductGallery, in that case it breaks the PGW because the script is not available in DOM. Let me know if you have any better solution for this

@asad-rafter The new code adds loading time, and still allows such a condition. Please remove the onload changes and assign window.cldProductGallery after

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml

Line 12 in 018a043

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />

exactly like it is done in all other places you call the widget

PGW is only called on PDP, where we are using the onload.
let's suppose we have added <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> in isml template, then how would we know its loaded and now assign it and how can we assign cloudinary to window.cldProductGallery in isml

yuval-cloudinary · 2025-01-07T11:47:05Z

PGW is only called on PDP, where we are using the onload. let's suppose we have added <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> in isml template, then how would we know its loaded and now assign it and how can we assign cloudinary to window.cldProductGallery in isml

@asad-rafter You'll add a script tag immediately following the above script tag, so it will look like this:

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />
<script>
window.cldProductGallery = cloudinary;
</script>

asad-rafter · 2025-01-07T12:18:49Z

PGW is only called on PDP, where we are using the onload. let's suppose we have added <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> in isml template, then how would we know its loaded and now assign it and how can we assign cloudinary to window.cldProductGallery in isml

@asad-rafter You'll add a script tag immediately following the above script tag, so it will look like this:
<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />
<script>
window.cldProductGallery = cloudinary;
</script>

@yuval-cloudinary We were already using this and it was causing issue, that's why we change it on onload

yuval-cloudinary · 2025-01-07T12:32:12Z

PGW is only called on PDP, where we are using the onload. let's suppose we have added <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" /> in isml template, then how would we know its loaded and now assign it and how can we assign cloudinary to window.cldProductGallery in isml

@asad-rafter You'll add a script tag immediately following the above script tag, so it will look like this:
<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />
<script>
window.cldProductGallery = cloudinary;
</script>
@yuval-cloudinary We were already using this and it was causing issue, that's why we change it on onload

yuval-cloudinary · 2025-01-07T12:33:12Z

@asad-rafter I don't think we had this way. Can you share a link to the previous time?

asad-rafter · 2025-01-07T12:36:50Z

@asad-rafter I don't think we had this way. Can you share a link to the previous time?

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml

Line 13 in 018a043

yuval-cloudinary · 2025-01-07T12:59:23Z

cloudinary_sfcc_site_cartridge/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml

Line 13 in 018a043

<script>

Having this syntax is equivalent, do I don't mind it:

<script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary;" />

As long as this snippet is part of the rendered HTML and is not injected after the page load

asad-rafter · 2025-01-14T09:35:14Z

@yuval-cloudinary the requested changes has been updated

yuval-cloudinary · 2025-01-14T12:31:15Z

cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml

-                window.renderCloudinaryGalleryWidget();
-            }
-        </script>
+        <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary; window.renderCloudinaryGalleryWidget();"> </script>


@asad-rafter this call to window.renderCloudinaryGalleryWidget() is (possibly) executed before we have the div "cld-gallery" in the DOM.
Are we able to inject it after the "
" and "
?

If so, then we would be able to remove the additional call to the function after the document is ready:
https://github.com/asad-rafter/cloudinary_sfcc_site_cartridge/blob/9ab65cc0dbeaa7e3ec12e9e4a1fc869096563d6d/cartridges/int_cloudinary/cartridge/js/cloudinaryWidgets.js#L5

@yuval-cloudinary cld-gallery is already present in DOM, there is no issue with it, everything seems to be working

@asad-rafter When reviewing the generated HTML on view-source:https://zzgt-007.dx.commercecloud.salesforce.com/s/RefArch/electronics/televisions/flat%20screen/vizio-vp504fM.html?lang=en_US I see that the script tag is written before the div tag.
Please move this line to the lower part of the ISML, remove the second call on the cloudinaryWidgets.js and deploy for testing

@yuval-cloudinary do you want to remove window.renderCloudinaryGalleryWidget(); from script tag?

@asad-rafter I like the window.renderCloudinaryGalleryWidget(); in the script tag, it just needs to be added lower at the rendered HTML

@yuval-cloudinary changes have been made and deployed on 007

yuval-cloudinary · 2025-01-19T11:37:33Z

cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml

@@ -53,6 +50,7 @@
            <iscomment>Custom start: add cloudinary PGW</iscomment>
            <isif condition="${pdict.cloudinary && pdict.cloudinary.isEnabled && (pdict.cloudinary.galleryEnabled || pdict.cloudinary.isGalleryEnabled)}">
                <isinclude template="product/components/cloudinaryGallery" />
+                <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary; window.renderCloudinaryGalleryWidget();"> </script>


Please remove the legacy calls to renderCloudinaryGalleryWidget from https://github.com/asad-rafter/cloudinary_sfcc_site_cartridge/blob/984285740779e611bacfdcb5f6cc623a559ff505/cartridges/int_cloudinary/cartridge/js/cloudinaryWidgets.js#L93

@yuval-cloudinary made the changes

yuval-cloudinary · 2025-01-19T11:38:01Z

cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/setDetails.isml

@@ -55,6 +52,10 @@
             </div>
        </div>
        <isinclude template="product/components/setItems" />
+
+        <isif condition="${dw.system.Site.current.preferences.custom.CLDGalleryEnabled}">
+            <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary; window.renderCloudinarySetGalleryWidgets();"></script>


Please remove the legacy calls to renderCloudinarySetGalleryWidget from https://github.com/asad-rafter/cloudinary_sfcc_site_cartridge/blob/984285740779e611bacfdcb5f6cc623a559ff505/cartridges/int_cloudinary/cartridge/js/cloudinaryWidgets.js#L95

yuval-cloudinary

thanks @asad-rafter

CLD-338-rendering-PGW

7586fbb

yuval-cloudinary requested changes Dec 16, 2024

View reviewed changes

update the cloudinary gallery widget script

9ab65cc

yuval-cloudinary requested changes Jan 14, 2025

View reviewed changes

modified the gallery widget script inclusion

9842857

yuval-cloudinary requested changes Jan 19, 2025

View reviewed changes

fixed the render gallery widget

bd70463

yuval-cloudinary approved these changes Jan 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLD-338-rendering-PGW #41

CLD-338-rendering-PGW #41

asad-rafter commented Dec 16, 2024

yuval-cloudinary left a comment

asad-rafter commented Dec 17, 2024

yuval-cloudinary commented Dec 17, 2024

asad-rafter commented Dec 17, 2024 •

edited

Loading

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 14, 2025

yuval-cloudinary Jan 14, 2025

asad-rafter Jan 14, 2025 •

edited

Loading

yuval-cloudinary Jan 14, 2025

asad-rafter Jan 15, 2025

yuval-cloudinary Jan 15, 2025

asad-rafter Jan 15, 2025

yuval-cloudinary Jan 19, 2025

asad-rafter Jan 21, 2025

yuval-cloudinary Jan 19, 2025

yuval-cloudinary left a comment

CLD-338-rendering-PGW #41

Are you sure you want to change the base?

CLD-338-rendering-PGW #41

Conversation

asad-rafter commented Dec 16, 2024

yuval-cloudinary left a comment

Choose a reason for hiding this comment

asad-rafter commented Dec 17, 2024

yuval-cloudinary commented Dec 17, 2024

asad-rafter commented Dec 17, 2024 • edited Loading

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 7, 2025

yuval-cloudinary commented Jan 7, 2025

asad-rafter commented Jan 14, 2025

Choose a reason for hiding this comment

asad-rafter Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuval-cloudinary left a comment

Choose a reason for hiding this comment

asad-rafter commented Dec 17, 2024 •

edited

Loading

asad-rafter Jan 14, 2025 •

edited

Loading