Merge pull request #41 from asad-rafter/CLD-338-PGW-rendering-bundle

CLD-338-rendering-PGW
cloudinary · Jan 29, 2025 · 5681b8c · 5681b8c
2 parents 018a043 + bd70463
commit 5681b8c
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 26 deletions.
diff --git a/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml b/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/bundleDetails.isml
@@ -8,12 +8,6 @@
 
     <iscomment> Custom Start: include cloudinary shrinkwrap. </iscomment>
     <isset name="CLDImagePageTypeSettings" value="${JSON.parse(dw.system.Site.current.preferences.custom.CLDImagePageTypeSettings)}" scope="page"/>
-    <isif condition="${dw.system.Site.current.preferences.custom.CLDGalleryEnabled}">
-        <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}"></script>
-        <script>
-            window.cldProductGallery = cloudinary;
-        </script>
-    </isif>
     <isif condition="${(CLDImagePageTypeSettings.pdp.enabled && CLDImagePageTypeSettings.pdp.automateResponsivenessWithJS) || (CLDImagePageTypeSettings.cldPdpSwatch.enabled && CLDImagePageTypeSettings.cldPdpSwatch.automateResponsivenessWithJS)}">
         <isinclude template="include/cloudinaryShrinkwrap"/>
     </isif>
@@ -56,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>
             <iselse>
                  <!-- Product Images Carousel -->
                 <isinclude template="product/components/imageCarousel" />

diff --git a/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml b/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/productDetails.isml
@@ -8,9 +8,6 @@
 
     <iscomment> Custom Start: include cloudinary shrinkwrap. </iscomment>
     <isset name="CLDImagePageTypeSettings" value="${JSON.parse(dw.system.Site.current.preferences.custom.CLDImagePageTypeSettings)}" scope="page"/>
-    <isif condition="${dw.system.Site.current.preferences.custom.CLDGalleryEnabled}">
-        <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" />
-    </isif>
     <isif condition="${(CLDImagePageTypeSettings.pdp.enabled && CLDImagePageTypeSettings.pdp.automateResponsivenessWithJS) || (CLDImagePageTypeSettings.cldPdpSwatch.enabled && CLDImagePageTypeSettings.cldPdpSwatch.automateResponsivenessWithJS)}">
         <isinclude template="include/cloudinaryShrinkwrap"/>
     </isif>
@@ -42,6 +39,7 @@
                 <iscomment>Custom start: add cloudinary PGW</iscomment>
                 <isif condition="${pdict.cloudinary && pdict.cloudinary.isEnabled && pdict.cloudinary.galleryEnabled}">
                     <isinclude template="product/components/cloudinaryGallery" />
+                    <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary; window.renderCloudinaryGalleryWidget();"> </script>
                     <isset name="isBundleOrSet" value="${false}" scope="page" />
                 <iselse>
                      <!-- Product Images Carousel -->

diff --git a/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/setDetails.isml b/cartridges/cloudinary_sfra_changes/cartridge/templates/default/product/setDetails.isml
@@ -8,12 +8,6 @@
 
     <iscomment> Custom Start: include cloudinary shrinkwrap. </iscomment>
     <isset name="CLDImagePageTypeSettings" value="${JSON.parse(dw.system.Site.current.preferences.custom.CLDImagePageTypeSettings)}" scope="page"/>
-    <isif condition="${dw.system.Site.current.preferences.custom.CLDGalleryEnabled}">
-        <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}"></script>
-        <script>
-            window.cldProductGallery = cloudinary;
-        </script>
-    </isif>
     <isif condition="${(CLDImagePageTypeSettings.pdp.enabled && CLDImagePageTypeSettings.pdp.automateResponsivenessWithJS) || (CLDImagePageTypeSettings.cldPdpSwatch.enabled && CLDImagePageTypeSettings.cldPdpSwatch.automateResponsivenessWithJS)}">
         <isinclude template="include/cloudinaryShrinkwrap"/>
     </isif>
@@ -58,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>
+        </isif>
         <hr>
         <iscomment>Custom start: Add cloudinary video player</iscomment>
         <isif condition="${pdict.cloudinary && pdict.cloudinary.isEnabled && pdict.cloudinary.videoEnabled}">

diff --git a/...s/cloudinary_sfra_changes/cartridge/templates/default/search/components/productTiles.isml b/...s/cloudinary_sfra_changes/cartridge/templates/default/search/components/productTiles.isml
@@ -7,10 +7,7 @@
 </isif>
 
 <isif condition="${dw.system.Site.current.preferences.custom.CLDGalleryEnabled}">
-    <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}"></script>
-    <script>
-        window.cldProductGallery = cloudinary;
-    </script>
+    <script src="${dw.system.Site.current.preferences.custom.CLDGalleryJSURL}" onload="window.cldProductGallery = cloudinary; window.renderCloudinaryGalleryWidget();"></script>
 </isif>
 <iscomment> Custom End: include cloudinary shrinkwrap. </iscomment>
 

diff --git a/cartridges/int_cloudinary/cartridge/js/cloudinaryWidgets.js b/cartridges/int_cloudinary/cartridge/js/cloudinaryWidgets.js
@@ -16,8 +16,8 @@ window.renderCloudinaryGalleryWidget = function () {
                     galleryOptions.SecureDistribution = cloudinaryObj.domain;
                     galleryOptions.privateCdn = true;
                 }
-                window.cldGallery = window.cldProductGallery ? window.cldProductGallery.galleryWidget(galleryOptions) : cloudinary.galleryWidget(galleryOptions); // eslint-disable-line no-undef
-                cldGallery.render(); // eslint-disable-line no-undef
+                window.cldGallery = window.cldProductGallery ? window.cldProductGallery.galleryWidget(galleryOptions) : (cloudinary.galleryWidget && cloudinary.galleryWidget(galleryOptions)); // eslint-disable-line no-undef
+                window.cldGallery && cldGallery.render(); // eslint-disable-line no-undef
             } else if (cloudinaryObj.images && cloudinaryObj.images.imageURLs) {
                 imgUrls = cloudinaryObj.images.imageURLs;
             }
@@ -41,8 +41,8 @@ window.renderCloudinarySetGalleryWidgets = function () {
                 cldSetImages.galleryWidget.options.SecureDistribution = cldObj.domain;
                 cldSetImages.galleryWidget.options.privateCdn = true;
             }
-            window.cldGallery = window.cldProductGallery.galleryWidget(cldSetImages.galleryWidget.options); // eslint-disable-line no-undef
-            cldGallery.render(); // eslint-disable-line no-undef
+            window.cldGallery = window.cldProductGallery ? window.cldProductGallery.galleryWidget(cldSetImages.galleryWidget.options) : (cloudinary.galleryWidget && cloudinary.galleryWidget(cldSetImages.galleryWidget.options)); // eslint-disable-line no-undef
+            window.cldGallery && cldGallery.render(); // eslint-disable-line no-undef
         }
     });
 };
@@ -82,17 +82,15 @@ window.makeCloudinaryImagesResponsive = function () {
     var $cldEl = $('.cloudinary-data-container');
     var cloudinaryObj = $cldEl.data('cloudinary');
     if ($cldResponsiveImgTags && $cldResponsiveImgTags.length > 0) {
-        if ( window.cldObj === undefined && window.cloudinary && window.cloudinary.default) {
+        if (window.cldObj === undefined && window.cloudinary && window.cloudinary.default) {
             window.cldObj = window.cloudinary.default.Cloudinary.new({ cloud_name: cloudinaryObj.cloudName || cloudinaryObj });
         }
         window.cldObj && window.cldObj.responsive(); // eslint-disable-line no-undef
     }
 };
 
 $(document).ready(function () {
-    window.renderCloudinaryGalleryWidget();
     window.renderCloudinaryVideoPlayer();
-    window.renderCloudinarySetGalleryWidgets();
     window.makeCloudinaryImagesResponsive();
 
     $('.icon-next, .icon-prev').on('click', function () {