Skip to content

Commit 1d0a586

Browse files
yuval-cloudinaryyuval-cloudinary
authored
Merge pull request #9 from asad-rafter/CLD-302-responisve-image
update the check of cld-responsive class
2 parents 037edeb + 7aa6c00 commit 1d0a586

10 files changed

Lines changed: 138 additions & 39 deletions

File tree

‎Cloudinary-pwa-kit/documentation/Cloudinary-pwa-integration-guide.docx‎

51 KB
Binary file not shown.

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-content-asset/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const RenderContentAssets = ({ contentResult }) => {
1919
}
2020
}
2121
})
22+
window?.cldObj?.responsive()
2223
}
2324
}, [])
2425

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-content-slots/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const RenderContentSlots = ({ slotResult }) => {
2626
})
2727
}
2828
})
29+
window?.cldObj?.responsive()
2930
}, [])
3031
}
3132
return (

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-image-gallery/index.jsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import PropTypes from 'prop-types'
99
import { AspectRatio, Box, Img, Flex, ListItem, List, useMultiStyleConfig } from '@chakra-ui/react'
1010
import RenderCloudinaryGalleryWidget from '../../components/cloudinary-widgets'
1111
import RenderCloudinaryVideoPlayer from '../../components/cloudinary-product-video'
12-
import { cloudinary } from '../../../config/default'
13-
import { updateTrackingParam } from '../../utils/imageSrcset'
12+
import { updateTrackingParam, updateCloudinarySource } from '../../utils/imageSrcset'
1413

1514
const EnterKeyNumber = 13
1615

@@ -44,6 +43,14 @@ const CloudinaryImageGallery = ({ size, cloudinaryImageGallery = {} }) => {
4443
imageUrls = cloudinaryImageGallery?.images?.imageURLs
4544
}
4645
const imageUrl = imageUrls ? imageUrls[selectedIndex] : null
46+
47+
useEffect(() => {
48+
if (imageUrl?.isResponsive) {
49+
window.cldObj = window.cldObj || window.cloudinary.default.Cloudinary.new({cloud_name: cloudinaryImageGallery.cloudName || cloudinaryImageGallery})
50+
window.cldObj?.responsive()
51+
}
52+
}, [imageUrl])
53+
4754
return (
4855
<Flex direction="column">
4956
{cloudinaryImageGallery.galleryEnabled && isScriptLoaded ? (
@@ -58,11 +65,18 @@ const CloudinaryImageGallery = ({ size, cloudinaryImageGallery = {} }) => {
5865
<>
5966
<Box {...styles.heroImageGroup}>
6067
<AspectRatio {...styles.heroImage} ratio={1}>
61-
<Img className={imageUrl?.isResponsive && 'cld-responsive'}
62-
src={`${imageUrl.url.lastIndexOf('?') > -1 ? imageUrl.url.substring(0, imageUrl.url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM : imageUrl.url + cloudinary.CLD_TRACKING_PARAM}`}
63-
srcset={!imageUrl?.isResponsive && imageUrl?.srcset && updateTrackingParam(imageUrl?.srcset)}
64-
sizes={!imageUrl?.isResponsive && imageUrl?.sizes}
65-
/>
68+
{imageUrl?.isResponsive ? (
69+
<Img
70+
className={'cld-responsive'}
71+
data-src={updateCloudinarySource(imageUrl.url)}
72+
/>
73+
) : (
74+
<Img
75+
src={updateCloudinarySource(imageUrl.url)}
76+
srcSet={imageUrl.srcset && updateTrackingParam(imageUrl.srcset)}
77+
sizes={imageUrl.sizes && imageUrl.sizes}
78+
/>
79+
)}
6680
</AspectRatio>
6781
</Box>
6882
<List display={'flex'} flexWrap={'wrap'}>
@@ -84,11 +98,18 @@ const CloudinaryImageGallery = ({ size, cloudinaryImageGallery = {} }) => {
8498
borderWidth={`${selected ? '1px' : 0}`}
8599
>
86100
<AspectRatio ratio={1}>
87-
<Img className={image?.isResponsive && 'cld-responsive'}
88-
src={image.url.lastIndexOf('?') > -1 ? image.url.substring(0, image.url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM : image.url + cloudinary.CLD_TRACKING_PARAM}
89-
srcset={!image?.isResponsive && image?.srcset && updateTrackingParam(image?.srcset)}
90-
sizes={!image?.isResponsive && image?.sizes}
91-
/>
101+
{imageUrl.isResponsive ? (
102+
<Img
103+
className={'cld-responsive'}
104+
data-src={updateCloudinarySource(image.url)}
105+
/>
106+
) : (
107+
<Img
108+
src={updateCloudinarySource(image.url)}
109+
srcSet={image.srcset && updateTrackingParam(image.srcset)}
110+
sizes={image.sizes && image.sizes}
111+
/>
112+
)}
92113
</AspectRatio>
93114
</ListItem>
94115
)

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-item-image/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const ItemImage = ({ imageProps, pageType, ratio = 1, ...props }) => {
5858
<CloudinaryLineItemImage
5959
cldProduct={variant.c_cloudinary[pageType]}
6060
image={image}
61+
cloudName={variant.c_cloudinary.cloudName}
6162
/>
6263
)}
6364
{/** Cloudinary Custom Code Ends */}

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-lineItem-image/index.jsx‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,58 @@
1-
import React from 'react'
1+
import React, { useEffect } from 'react'
22
import PropTypes from 'prop-types'
33
import { AspectRatio, Box, Image } from '@chakra-ui/react'
4-
import { cloudinary } from '../../../config/default'
5-
import { updateTrackingParam } from '../../utils/imageSrcset'
4+
import { updateTrackingParam, updateCloudinarySource } from '../../utils/imageSrcset'
65

76
/**
87
* The image gallery displays The Image Gallery Coming from Cloudinary in Product-Detail Page.
98
*/
10-
const CloudinaryLineItemImage = ({ cldProduct = {}, image = {} }) => {
9+
const CloudinaryLineItemImage = ({ cldProduct = {}, image = {}, cloudName }) => {
10+
11+
useEffect(() => {
12+
if (cldProduct?.miniCartImage?.isResponsive || cldProduct?.isResponsive) {
13+
window.cldObj = window.cldObj || window.cloudinary.default.Cloudinary.new({cloud_name: cloudName || cldProduct})
14+
window.cldObj?.responsive()
15+
}
16+
}, [])
17+
1118
return (
1219
<>
1320
{cldProduct?.miniCartImage?.url ? (
1421
<Box w="24" flex="none">
1522
<AspectRatio ratio="1">
16-
<Image className={cldProduct?.miniCartImage?.isResponsive && 'cld-responsive'}
17-
src={cldProduct?.miniCartImage?.url.lastIndexOf('?') > -1 ? cldProduct?.miniCartImage?.url.substring(0, cldProduct?.miniCartImage?.url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM : cldProduct?.miniCartImage?.url + cloudinary.CLD_TRACKING_PARAM} alt={image && image.alt ? image.alt : null}
18-
srcset={!cldProduct?.miniCartImage?.isResponsive && cldProduct?.miniCartImage?.srcset && updateTrackingParam(cldProduct?.miniCartImage?.srcset)}
19-
sizes={!cldProduct?.miniCartImage?.isResponsive && cldProduct?.miniCartImage?.sizes}
20-
/>
23+
{cldProduct?.miniCartImage?.isResponsive ? (
24+
<Image className={'cld-responsive'}
25+
data-src={updateCloudinarySource(cldProduct.miniCartImage.url)} alt={image?.alt}
26+
/>
27+
) : (
28+
<Image
29+
src={updateCloudinarySource(cldProduct.miniCartImage.url)} alt={image?.alt}
30+
srcSet={cldProduct.miniCartImage.srcset && updateTrackingParam(cldProduct.miniCartImage.srcset)}
31+
sizes={cldProduct.miniCartImage.sizes && cldProduct.miniCartImage.sizes}
32+
/>
33+
)}
2134
</AspectRatio>
2235
</Box>
2336
) : (
2437
<>
2538
{cldProduct?.url && (
26-
<Image
27-
className={cldProduct?.isResponsive && 'cld-responsive'}
28-
alt={image.alt}
29-
src={`${cldProduct.url.lastIndexOf('?') > -1 ? cldProduct.url.substring(0, cldProduct.url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM : cldProduct.url + cloudinary.CLD_TRACKING_PARAM}`}
30-
srcset={!cldProduct.isResponsive && cldProduct.srcset && updateTrackingParam(cldProduct.srcset)}
31-
sizes={!cldProduct.isResponsive && cldProduct.sizes}
32-
/>
39+
<>
40+
{cldProduct?.isResponsive ? (
41+
<Image
42+
className={'cld-responsive'}
43+
alt={image.alt}
44+
data-src={updateCloudinarySource(cldProduct.url)}
45+
/>
46+
) : (
47+
<Image
48+
alt={image.alt}
49+
src={updateCloudinarySource(cldProduct.url)}
50+
srcSet={cldProduct.srcset && updateTrackingParam(cldProduct.srcset)}
51+
sizes={cldProduct.sizes && cldProduct.sizes}
52+
/>
53+
)}
54+
</>
55+
3356
)}
3457
</>
3558
)
@@ -40,7 +63,8 @@ const CloudinaryLineItemImage = ({ cldProduct = {}, image = {} }) => {
4063

4164
CloudinaryLineItemImage.propTypes = {
4265
cldProduct: PropTypes.object,
43-
image: PropTypes.object
66+
image: PropTypes.object,
67+
cloudName: PropTypes.string
4468
}
4569

4670
export default CloudinaryLineItemImage

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/components/cloudinary-plp-images/index.jsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,42 @@
11
import React, { useEffect } from 'react'
22
import PropTypes from 'prop-types'
33
import { Img } from '@chakra-ui/react'
4-
import { cloudinary } from '../../../config/default'
5-
import { updateTrackingParam } from '../../utils/imageSrcset'
4+
import { updateTrackingParam, updateCloudinarySource } from '../../utils/imageSrcset'
65

76
const CloudinaryPlpImage = ({ cloudinaryImage = {}, image = {} }) => {
87
if (typeof window !== 'undefined' && cloudinaryImage.url) {
98
useEffect(() => {
109
const replacedUrl = cloudinaryImage.url.replace('w_auto,c_scale', 'w_auto,c_limit')
1110
cloudinaryImage.url = replacedUrl
11+
12+
if (cloudinaryImage?.isResponsive) {
13+
window.cldObj = window.cldObj || window.cloudinary.default.Cloudinary.new({cloud_name: cloudinaryImage.cloudName || cloudinaryImage})
14+
window.cldObj?.responsive()
15+
}
1216
}, [])
1317
}
1418
return (
15-
<Img className={cloudinaryImage?.isResponsive && 'cld-responsive'}
16-
src={`${cloudinaryImage.url.lastIndexOf('?') > -1 ? cloudinaryImage.url.substring(0, cloudinaryImage.url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM : cloudinaryImage.url + cloudinary.CLD_TRACKING_PARAM}`}
17-
alt={image?.alt}
18-
srcset={!cloudinaryImage?.isResponsive && cloudinaryImage.srcset && updateTrackingParam(cloudinaryImage.srcset)}
19-
sizes={!cloudinaryImage?.isResponsive && cloudinaryImage?.sizes}
20-
/>
19+
<>
20+
{cloudinaryImage?.isResponsive ? (
21+
<Img
22+
className={'cld-responsive'}
23+
alt={image.alt}
24+
data-src={updateCloudinarySource(cloudinaryImage.url)}
25+
/>
26+
) : (
27+
<Img
28+
src={updateCloudinarySource(cloudinaryImage.url)}
29+
alt={image.alt}
30+
srcSet={cloudinaryImage.srcset && updateTrackingParam(cloudinaryImage.srcset)}
31+
sizes={cloudinaryImage.sizes && cloudinaryImage.sizes}
32+
/>
33+
)}
34+
</>
2135
)
2236
}
2337

2438
CloudinaryPlpImage.propTypes = {
2539
cloudinaryImage: PropTypes.object,
26-
dynamicImageProps: PropTypes.object,
2740
image: PropTypes.object
2841
}
2942

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/app/utils/imageSrcset.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,17 @@ export const updateTrackingParam = (srcset) => {
1818

1919
return newSrcset.join(' ')
2020
}
21+
22+
/**
23+
* Upate the tracking params in url
24+
*
25+
* @param {string} url - url.
26+
* @returns {string} - The ImageGroup matching the search criteria
27+
*/
28+
export const updateCloudinarySource = (url) => {
29+
if (url.lastIndexOf('?') > -1) {
30+
return url.substring(0, url.lastIndexOf('?')) + cloudinary.CLD_TRACKING_PARAM
31+
} else {
32+
return url + cloudinary.CLD_TRACKING_PARAM
33+
}
34+
}

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/overrides/app/pages/checkout/index.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-curre
2222
import CheckoutSkeleton from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-skeleton'
2323
import {useUsid, useShopperOrdersMutation} from '@salesforce/commerce-sdk-react'
2424

25+
{/** Cloudinary Custom Code Starts */}
26+
import Helmet from 'react-helmet'
27+
import { cloudinary } from '../../../../config/default'
28+
{/** Cloudinary Custom Code Ends */}
29+
2530
const Checkout = () => {
2631
const {formatMessage} = useIntl()
2732
const navigate = useNavigation()
@@ -60,9 +65,28 @@ const Checkout = () => {
6065
setIsLoading(false)
6166
}
6267
}
68+
69+
{/** Cloudinary Custom Code Starts */}
70+
const cloudinaryCore = `https://unpkg.com/cloudinary-core@${cloudinary.versions.CLDCoreShrinkwrapJSURLVersion}/cloudinary-core-shrinkwrap.min.js`
71+
const cloudinaryVideoPlayerJS = `https://unpkg.com/cloudinary-video-player@${cloudinary.versions.CLDVideoPlayerVersion}/dist/cld-video-player.min.js`
72+
const cloudinaryVideoPlayerCSS = `https://unpkg.com/cloudinary-video-player@${cloudinary.versions.CLDVideoPlayerVersion}/dist/cld-video-player.min.css`
73+
{/** Cloudinary Custom Code Ends */}
6374

6475
return (
6576
<Box background="gray.50" flex="1">
77+
78+
{/** Cloudinary Custom Code Starts */}
79+
<Helmet>
80+
<script src={cloudinaryCore} />
81+
</Helmet>
82+
<Helmet>
83+
<script src={cloudinaryVideoPlayerJS} />
84+
</Helmet>
85+
<Helmet>
86+
<link rel="stylesheet" href={cloudinaryVideoPlayerCSS} />
87+
</Helmet>
88+
{/** Cloudinary Custom Code Ends */}
89+
6690
<Container
6791
data-testid="sf-checkout-container"
6892
maxWidth="container.xl"

‎Cloudinary-pwa-kit/packages/pwa-cloudinary/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cloudinary",
3-
"version": "3.1.0",
3+
"version": "3.0.0",
44
"license": "See license in LICENSE",
55
"engines": {
66
"node": "^18.0.0 || ^20.0.0",

0 commit comments

Comments
 (0)