Product carousel card - V1 #14946
Product carousel card - V1 #14946
Conversation
- initial build of the card + a storybook - trying to ruse the product card buttons which required an override to be added as we want a different label on the button
… the page when wired up - Additional tweaks so the card is more aligned with the Figma designs - Added logic when there is no heading to put the product and brand name under the image on seperate lines - Added logic to handle when the product/brand name is longer than one line and needs to wrap - Using the ProductCardImage instead of Picture for consistency across these elements but happy to change it back again or discuss further - Added more storybooks
| <> | ||
| {productCtas.map((productCta, index) => { | ||
| const label = getLabel(productCta); | ||
| const label = buttonLabelOverride ?? getLabel(productCta); |
There was a problem hiding this comment.
added this here as I think it would be good to re-use this button component but happy to have a discussion offline if we think there is another appraoch
There was a problem hiding this comment.
I think we should catch up with Alex H about this because the designs were put together before some of our chats about the CTA wording. It might be that this should now be aligned with the product cards and that we don't need this override? I will send a message over to check with him
| export type ProductCarouselCardProps = { | ||
| product: ProductBlockElement; | ||
| format: ArticleFormat; | ||
| showReadMore?: boolean; |
There was a problem hiding this comment.
Might need to have chat about how this flag is passed through...maybe in the config? On the designs there is also an optional disclaimer but I thought for first iteration we should deal with one flag first!
| <ProductCardButtons | ||
| productCtas={firstCta ? [firstCta] : []} | ||
| buttonLabelOverride={ | ||
| firstCta ? `Buy at ${firstCta.retailer}` : 'Buy' |
There was a problem hiding this comment.
One to chat to Alex H about - what should the fallback be when we can't get hold of the CTA?
| <div css={productNameStyle}>{product.productName}</div> | ||
| </div> | ||
| )} | ||
| <div css={priceStyle}>{firstCta?.price ?? 'Price unavailable'}</div> |
There was a problem hiding this comment.
Another one for Alex H - what should the fallback be if we can't get the price?
| )} | ||
| {showReadMore && <div css={readMoreCta}>Read more</div>} | ||
| <div css={imageArea}> | ||
| <ProductCardImage |
There was a problem hiding this comment.
Reusing the ProductCardImage so all the product element related parts were consistent but happy to have a chat if there is a better approach
oliverabrahams
left a comment
oliverabrahams
left a comment
There was a problem hiding this comment.
I know this is still in draft but made some changes when looking into the scrollable carousel - let me know if you want to chat about any of them
| </div> | ||
| </> | ||
| )} | ||
| {showReadMore && <div css={readMoreCta}>Read more</div>} |
There was a problem hiding this comment.
| {showReadMore && <div css={readMoreCta}>Read more</div>} | |
| {showReadMore && !isUndefined(product.h2Id) && ( | |
| <a href={`#${product.h2Id}`} css={readMoreCta}> | |
| Read more | |
| </a> | |
| )} |
I think this will work for the anchor link 🤷
There was a problem hiding this comment.
Nice solution - I thought it would make more sense to do the anchor link as part of a different PR given we can't test it at the moment
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
…letteDeclarations Add width to storybook so it always shows at 280x regardless of the breakpoint
First iteration of the product card which will sit in the carousel in place of the 'At a Glance' section at the top of Filter articles.
Note: I'm saying first iteration in case any additional tweaks are needed when we actually use these in the carousel which is still to be built.
Screenshots
Default card
Card without Read More
Card without a primary heading
