fix(atomic): atomic-product layout in grid mode consistent on all screen sizes #4527
Conversation
Pull Request ReportPR Title✅ Title follows the conventional commit spec. Live demo linksBundle Size
SSR Progress
Detailed logssearch : buildInteractiveResultsearch : buildInteractiveInstantResult search : buildInteractiveRecentResult search : buildInteractiveCitation search : buildGeneratedAnswer recommendation : missing SSR support case-assist : missing SSR support insight : missing SSR support commerce : missing SSR support |
| @@ -18,7 +18,7 @@ | |||
| &.image-large { | |||
| atomic-product-section-children .product-child { | |||
| @mixin aspect-ratio-h 1 / 1, auto; | |||
| width: 33%; | |||
| width: 16.65%; | |||
There was a problem hiding this comment.
These two changes ensure that the size ratio between product variants images and the main image stays consistent on all imageSize options at all screen widths
| @@ -0,0 +1,11 @@ | |||
| .display-grid { | |||
There was a problem hiding this comment.
This makes the height of the product price always the same regardless of the presence of a promo price or not.
| @media (min-width: 1024px) { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
| @media (min-width: 1280px) { | ||
| grid-template-columns: repeat(4, 1fr); | ||
| } |
There was a problem hiding this comment.
This new breakpoint prevents the variant icons from being too small, and other issues due to lack of space.
There was a problem hiding this comment.
Would it be better to try to fix this with a min width ?
There was a problem hiding this comment.
What do you mean? Since we are in display: grid a min width would cause the right column to overflow I think..
There was a problem hiding this comment.
I mean a min width for the icon specifically. The goal is for the icon to not get super small so in my head the easier solution is to add a min width to it.
There was a problem hiding this comment.
I see! We would still end up with the other issues, 4 columns is really a lot at that width because of the facet column.
| <Host> | ||
| {this.label.trim() !== '' && this.renderLabel()} | ||
| <div>{this.children.map((child) => this.renderChild(child))}</div> | ||
| </div> | ||
| <div class="children-container"> | ||
| {this.children.map((child) => this.renderChild(child))} | ||
| <Button style="text-primary" class="product-child plus-button"> | ||
| +{this.children.length - 5} | ||
| </Button> | ||
| </div> | ||
| </Host> |
There was a problem hiding this comment.
Limiting the number of product children to a single row avoids this kind of issue:
Screen.Recording.2024-10-11.at.11.04.44.AM.mov
However this hardcodes the + button count to 6 per row. Not sure how we could have this update dynamically based on how many children are hidden...
Two alternatives:
- Not having the product update on hover, only on click/touch.
- Ensure all elements in the grid template have a fixed height between variants. This is the case except for the title which can be up to 2 lines tall
There was a problem hiding this comment.
How did you manage to have duplicates row of the variants ? Are these different variants but with the same image ?
I also found another problem with the fix. Here I would assume the +1 to show me the other variants and not to redirect me.
Screen.Recording.2024-10-11.at.3.27.14.PM.mov
There was a problem hiding this comment.
@alexprudhomme I added the duplicates by temporarily modify the code. This was just to make it easier to demo the issue.
The behaviour with the + button opening the product page is extremely common on e-commerce sites. Clicking to see the other variants implies that the user is interested in the product, so it makes a lot of sense to bring them to the product page. A less common alternative is the + not being interactive at all.
| &.image-large { | ||
| atomic-product-section-children .product-child { | ||
| @mixin aspect-ratio-h 1 / 1, auto; | ||
| width: 16.65%; | ||
| } | ||
| } | ||
| &.image-small { | ||
| atomic-product-section-children .product-child { | ||
| @mixin aspect-ratio-h 1 / 1, auto; | ||
| width: 16.65%; | ||
| max-width: 4.75rem; | ||
| } |
There was a problem hiding this comment.
This prevents the product children images from getting too big relative to the main image on wide mobile screen sizes.
Before:
After:
|
|
||
| &.density-comfortable { | ||
| &.image-icon, | ||
| &.image-none, | ||
| &.image-small, | ||
| &.image-large { | ||
| & atomic-product-section-description { | ||
| margin-top: 1.25rem; | ||
| } | ||
| } | ||
| } | ||
| &.density-normal { | ||
| &.image-icon, | ||
| &.image-none, | ||
| &.image-small, | ||
| &.image-large { | ||
| & atomic-product-section-description { | ||
| margin-top: 0.75rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.density-compact { | ||
| &.image-icon, | ||
| &.image-none, | ||
| &.image-small, | ||
| &.image-large { | ||
| & atomic-product-section-description { | ||
| margin-top: 0.25rem; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This helps keep the layout compact when a product does not have a promo price
| 'title' | ||
| 'title-metadata' | ||
| 'emphasized' | ||
| 'excerpt' | ||
| 'children' |
There was a problem hiding this comment.
Moved this down to keep layout consistent on all screen sizes and display modes
fpbrault
requested review from
olamothe,
y-lakhdar,
louis-bompart and
alexprudhomme
This reverts commit 8f247c9.
This PR fixes some layout issues for atomic-product that where present on small desktop screen sizes.
Before:
After:
https://coveord.atlassian.net/browse/KIT-3648