@W-13974769 - Show Color Attribute on ProductTile 🀄️ #1773

bendvc · 2024-05-02T18:31:04Z

Description

In this PR we enhance the ProductTile component to show a selectable attribute in the form of a swatch group. By default this attribute is "color" but can be changed by updating the constant file. This will allow the customer to view different colors of any given master/variant product type before clicking into the product detail page.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Render swatches for selectable attribute
Ensure that links are clickable and user can go directly to variant on the PDP

How to Test-Drive This PR

Checkout code and run npm run start
Visit any PLP (mens ties is a good on), you should see tiles rendered with variation attributes if they are some (when the product is a master/variant)
Hover over the swatch to change the image, click it to go directly to the PLP for the clicked variation

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

- Attributes visible

bendvc · 2024-05-02T20:12:08Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {filterImageGroups} from '../../utils/product-utils'


I created this little util as I saw that we were doing similar logic in other places. Thats why you'll see that I've changed another hook to use this util too.

bendvc · 2024-05-02T20:14:02Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

        isFavourite,
        onFavouriteToggle,
-        dynamicImageProps,
+        product,
+        selectableAttributeId = 'color',


I'm planning on adding this to the config file.. or maybe just the constant, and apply it from the product list component. Unless you have other ideas on how you think we might want to do this.

bendvc · 2024-05-02T20:15:18Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+    const initialVariationValue = isMasterVariant
+        ? product?.variants?.find((variant) => variant.productId == product.representedProduct.id)
+              ?.variationValues?.[selectableAttributeId]
+        : undefined


This is where we use the representedProduct to determine what the initial selected variation attribute value is.

bendvc · 2024-05-02T20:17:14Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+              ?.variationValues?.[selectableAttributeId]
+        : undefined
+
+    const [selectableAttributeValue, setSelectableAttributeValue] = useState(initialVariationValue)


Question: I've been thinking about making this state and object instead of a single value. This might allow use some flexibility in the future as well as clean up some of the use's of that image utility that I created.

alexvuong · 2024-05-02T23:31:48Z

packages/template-retail-react-app/app/components/product-tile/index.jsx


-    const {currency, image, price, productId, hitType} = product
+    const isMasterVariant = ['master', 'variant'].includes(hitType)


Product Tile is used for both productSearch and einstein (which uses getProducts). The data may be a bit different when it comes to determine product type. We should consider for both cases here

I looked at the recommended products on both the home page and the product details and the data looks like it's consistent to the point that this logic works. Do you know of any other specific uses where I'd want to check ?

For Einstein recomendation, getProducts data does not have hitType instead it will be product.type.master or product.type.set

alexvuong · 2024-05-02T23:32:48Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+    // NOTE: variationAttributes are only defined for master/variant type products.
+    const variationAttributes = useMemo(() => {
+        // NOTE: Decorate the product variant attributes to easily access images and hrefs.
+        return product?.variationAttributes?.map((variationAttribute) => ({


This logic here looks familiar with the useVariantionAttribute.js logic, can we extract or refactor that hook to accommodate both PLP and PDP. If not, can we extract this logic into it owns util function?

So I made a utility that we can use in the future and use to refactor what we are already using in the hooks. At this time, that hook is too deeply engrained that I would prefer to do that work outside of this PR as it could possible bloat this PR to the point where the intended work gets hidden in a refactor.

alexvuong · 2024-05-02T23:33:55Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+                                            minWidth="32px"
+                                            backgroundRepeat="no-repeat"
+                                            backgroundSize="cover"
+                                            backgroundColor={name.toLowerCase()}


this assumes name is 'color', what happens if the name is different?

I think what we should do here is select 'circle' as the only current option. I only say this because I don't want too much scope creep in making everything under the rainbow configurable. We can open it up for configurability after the initial version

packages/template-retail-react-app/app/components/product-tile/index.jsx

vmarta · 2024-05-13T18:04:34Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

@@ -56,54 +65,135 @@ export const Skeleton = () => {
 * It also supports favourite products, controlled by a heart icon.
 */
 const ProductTile = (props) => {


Where are the updates to the unit tests for ProductTile (and SwatchGroup/Swatch)?

vmarta · 2024-05-13T19:08:41Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+                            src={`${
+                                image?.disBaseLink ||
+                                image?.link ||
+                                product?.image?.disBaseLink ||
+                                product?.image?.disBaseLink
+                            }[?sw={width}&q=60]`}


duplicate value for product?.image?.disBaseLink || product?.image?.disBaseLink

vmarta · 2024-05-13T19:19:48Z

packages/template-retail-react-app/app/components/swatch-group/swatch.jsx

@@ -14,6 +14,7 @@ import {
    useMultiStyleConfig
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Link as RouteLink} from 'react-router-dom'
+import {useBreakpointValue} from '@salesforce/retail-react-app/app/components/shared/ui'

 /**
 * The Swatch Component displays item inside `SwatchGroup`. For proper keyboard accessibility,


I believe you had done some work for accessibility in this PR. How should we test-drive this change? Thanks.

I re-implemented the existing logic we had to be more react-y. It didn't look like there were any tests for it tho. I've added some basic tests for using arrow keys to select swatches.

Oh I meant manual tests.. how should we manually test the accessibility changes? I'm not familiar with how we did that last time.

alexvuong · 2024-05-13T21:03:02Z

None of swatch images is shown in Product tile on PDP/homepage, but they are showing on product tile on PLP

packages/template-retail-react-app/app/components/product-tile/index.jsx

alexvuong · 2024-05-13T21:31:17Z

packages/template-retail-react-app/app/constants.js

@@ -26,6 +26,14 @@ export const RECENT_SEARCH_LIMIT = 5
 export const RECENT_SEARCH_KEY = 'recent-search-key'
 export const RECENT_SEARCH_MIN_LENGTH = 3

+// Constants for product list page
+export const PRODUCT_LIST_IMAGE_VIEW_TYPE = 'large'


Should we make it into an object? e.g

const PRODUCT_LIST = { IMAGE_VIEW_TYPE: 'large', SELECTED_ATTR: 'color' }

Here I'm following the current pattern that was established in the constants above it for search.. looks like page-config-value. I think this is perfectly fine, if we decide to rework configuration (which I think we should) we'll probably address it in a broader scope there.

packages/template-retail-react-app/app/pages/product-list/index.test.js

alexvuong · 2024-05-13T21:52:27Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

+                {variationAttributes
+                    ?.filter(({id}) => selectableAttributeId === id)
+                    ?.map(({id, values}) => (
+                        <SwatchGroup


Nit: For a11y, we should make sure the attribute name (color/size) is included in the label for swatch. This is because not all color names are easy to regconize (e.g like seagrass or Light Seabreeze), without the context seeing them as colors, it may be hard for screen reader users to know what it is actually about.

Good catch, it looks like we were overloading the "label" prop to be used for both the label, and the aria-label. As I didn't need or want the label to be displayed in this scenario I didn't provide a the label to the swatch group. This as expected stopped the label from showing, but also meant there was no aria-label.

So resolve this I've added an explicit "ariaLabel" prop that will take precedence over the label when passed in. This also won't effect the showing or hiding of the visual label.

@bendvc the name here is still just the color value. The screen reader will says something like this "Seagrass, selected, radiogroup, 1 out of 2". It still misses the context of attribution type. I think it will be more helpful to have it like this so the screen will read out loud "Color Seagrass, select, ..."

ariaLabel={`${selectableAttributeId}-${name}`}

packages/template-retail-react-app/app/components/product-tile/index.jsx

…/index.jsx Co-authored-by: Vincent Marta <vmarta@salesforce.com> Signed-off-by: Ben Chypak <bchypak@mobify.com>

bendvc · 2024-05-14T20:46:46Z

None of swatch images is shown in Product tile on PDP/homepage, but they are showing on product tile on PLP

Thanks.. I've addressed this.

unandyala · 2024-05-15T13:44:13Z

packages/template-retail-react-app/app/components/product-tile/index.jsx

                </Box>

+                {/* Swatches */}


question on the design - Can we make SwatchGroup a more independent component by passing all the required information to it? In this case it looks like it needs product to be passed may be as a prop.

This way we can move any code/logic specific to swatches into the SwatchGroup (Example: const variationAttributes = useMemo(() => getDecoratedVariationAttributes(product), [product]). It is also easy for the users to extend/overide the component as it has all the information. And product tile will also be clean.

These components are designed to be "dumb" lets say. You can use them to display anything you want really, it doesn't have to be product information at all. This is why you don't see that kind of logic inside the component definition.

packages/template-retail-react-app/app/components/product-tile/index.jsx

…/index.jsx Signed-off-by: Ben Chypak <bchypak@mobify.com>

bendvc added 5 commits April 29, 2024 14:45

Initial commit

6de0fa7

- Attributes visible

Image changes now

3f52c3c

Working with single selectable attribute

0561a0a

Update index.jsx

314f410

Move helper to utils

3dd556b

bendvc changed the base branch from develop to v3/product-tile-revamp May 2, 2024 18:34

bendvc added 2 commits May 2, 2024 11:35

Merge branch 'develop' into bendvc/W-13974769

48e648b

Merge branch 'v3/product-tile-revamp' into bendvc/W-13974769

958b72d

bendvc commented May 2, 2024

View reviewed changes

Adding comments

cfdc3fb

alexvuong reviewed May 2, 2024

View reviewed changes

packages/template-retail-react-app/app/components/product-tile/index.jsx Outdated Show resolved Hide resolved

bendvc added 5 commits May 6, 2024 13:38

Expose props as constants

dc0cc9a

Always default to image defined on product if no image group is found

731c9ca

Only use circle swatches

dd23007

Add tests

328e951

Refactor getDecoratedVariationAttributes and add tests

c881f34

bendvc marked this pull request as ready for review May 7, 2024 21:29

bendvc requested a review from a team as a code owner May 7, 2024 21:29

bendvc added 3 commits May 7, 2024 14:47

Bump main bundle size limit

16996cd

Dynamic event handling for device type

703ac48

Use useBreakpointValue to determine device type

8b88143

alexvuong reviewed May 9, 2024

View reviewed changes

packages/template-retail-react-app/app/components/product-tile/index.jsx Outdated Show resolved Hide resolved

bendvc added 2 commits May 9, 2024 16:26

Rework the swatch component

eee2aaf

Render swatch as button when no href is supplied

6f5a72d

bendvc added 4 commits May 10, 2024 10:12

Update index.jsx

7a08fe3

Fix constant used for tile image on plp

f6c6244

Fix test and lint warnings

d3e9000

Bump bundle size again

85027b7

vmarta reviewed May 13, 2024

View reviewed changes

packages/template-retail-react-app/app/components/product-tile/index.jsx Outdated Show resolved Hide resolved

alexvuong reviewed May 13, 2024

View reviewed changes

packages/template-retail-react-app/app/pages/product-list/index.test.js Show resolved Hide resolved

alexvuong reviewed May 13, 2024

View reviewed changes

packages/template-retail-react-app/app/components/product-tile/index.jsx Show resolved Hide resolved

bendvc and others added 3 commits May 14, 2024 13:20

Update packages/template-retail-react-app/app/components/product-tile…

2a216de

…/index.jsx Co-authored-by: Vincent Marta <vmarta@salesforce.com> Signed-off-by: Ben Chypak <bchypak@mobify.com>

Use module imports

51c3ef1

Include image information for other pages where product tiles are used.

3a59c8b

bendvc added 2 commits May 14, 2024 15:36

Add tests

8fb7208

Add explicit ariaLabel prop

dc8dae0

unandyala reviewed May 15, 2024

View reviewed changes

vmarta approved these changes May 15, 2024

View reviewed changes

bendvc added 6 commits May 16, 2024 13:47

Update from base and update price on selected variation attribute

a72613c

Lint!

0c025d4

fix test data after merge

ca733fe

Bump bundle size

7694a50

Don't use "hitType" to determine if variants exists

e71cf8e

lint

fa3506b

vmarta approved these changes May 17, 2024

View reviewed changes

alexvuong approved these changes May 21, 2024

View reviewed changes

bendvc commented May 21, 2024

View reviewed changes

packages/template-retail-react-app/app/components/product-tile/index.jsx Outdated Show resolved Hide resolved

Update packages/template-retail-react-app/app/components/product-tile…

4412af4

…/index.jsx Signed-off-by: Ben Chypak <bchypak@mobify.com>

bendvc merged commit 138400b into v3/product-tile-revamp May 21, 2024
28 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-13974769 - Show Color Attribute on ProductTile 🀄️ #1773

@W-13974769 - Show Color Attribute on ProductTile 🀄️ #1773

bendvc commented May 2, 2024 •

edited by unandyala

bendvc May 2, 2024

bendvc May 2, 2024

bendvc May 2, 2024

bendvc May 2, 2024

alexvuong May 2, 2024

bendvc May 7, 2024

alexvuong May 8, 2024 •

edited

alexvuong May 2, 2024

bendvc May 7, 2024

alexvuong May 2, 2024

bendvc May 6, 2024

vmarta May 13, 2024

vmarta May 13, 2024

vmarta May 13, 2024

bendvc May 14, 2024

vmarta May 15, 2024

alexvuong commented May 13, 2024

alexvuong May 13, 2024

bendvc May 14, 2024

alexvuong May 13, 2024 •

edited

bendvc May 14, 2024

alexvuong May 16, 2024

bendvc commented May 14, 2024

unandyala May 15, 2024

bendvc May 16, 2024

		import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
		import {filterImageGroups} from '../../utils/product-utils'


		const {currency, image, price, productId, hitType} = product
		const isMasterVariant = ['master', 'variant'].includes(hitType)

@W-13974769 - Show Color Attribute on ProductTile 🀄️ #1773

@W-13974769 - Show Color Attribute on ProductTile 🀄️ #1773

Conversation

bendvc commented May 2, 2024 • edited by unandyala

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

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

alexvuong May 8, 2024 • edited

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexvuong commented May 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexvuong May 13, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bendvc commented May 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bendvc commented May 2, 2024 •

edited by unandyala

alexvuong May 8, 2024 •

edited

alexvuong May 13, 2024 •

edited