Skip to content

#36663: Detailed Cart - show item price breakdown by components #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
soarer1004 wants to merge 9 commits into
base: optimuspro
Choose a base branch
from
Open

#36663: Detailed Cart - show item price breakdown by components #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
743ac1c
Refs #36673: SfCollectedProduct - tweak layout
soarer1004 May 25, 2026
2bd73df
Refs #36673: SfCollectedProduct - tweak layout
soarer1004 May 25, 2026
e1448f0
Refs #36673: SfCollectedProduct - remove redundant changes
soarer1004 May 25, 2026
6db5aa1
Refs #36673: SfCollectedProduct - fix style
soarer1004 May 25, 2026
9b193c9
Refs #36673: SfCollectedProduct - remove duplicated slot
soarer1004 May 25, 2026
e2d6e51
Refs #36673: SfCollectedProduct - fix actions slot
soarer1004 May 25, 2026
15125db
Refs #36673: SfCollectedProduct - fix details style
soarer1004 May 25, 2026
975bba6
Refs #36673: SfCollectedProduct - tweak component layout
soarer1004 Jun 3, 2026
51bb0ca
Merge branch 'optimuspro' into 36663-show-price-breakdown-by-components
soarer1004 Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 31 additions & 11 deletions packages/shared/styles/components/organisms/SfCollectedProduct.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
@import "../../helpers";
.sf-collected-product {
--collected-product-main-flex-direction: row;

position: relative;
box-sizing: border-box;
display: flex;
display: grid;
grid-template-columns: 8.75rem 1fr;
grid-template-areas:
"aside main"
"configuration configuration"
"actions actions";
max-width: var(--collected-product-width);
padding: var(--collected-product-padding, var(--spacer-xs));
background: var(--collected-product-background);
Expand Down Expand Up @@ -37,9 +44,8 @@
right: var(--collected-product-remove-right, var(--spacer-xs));
}
&__aside {
order: -1;
grid-area: aside;
position: relative;
flex: 0 0 8.75rem;
line-height: 0;
}
&__image {
Expand All @@ -59,15 +65,29 @@
--quantity-selector-height: 2.5rem;
}
&__main {
flex: 1;
grid-area: main;
display: flex;
flex-direction: column;
margin: var(--collected-product-main-margin, 0 0 0 var(--spacer-base));
}
&__main-top {
display: flex;
flex-direction: var(--collected-product-main-flex-direction, row);
justify-content: space-between;
}
&__configuration {
grid-area: configuration;
margin: var(--collected-product-configuration-margin, 0 0 0 var(--spacer-base));
}
&__details {
display: flex;
flex-direction: var(--collected-product-main-flex-direction, column);
flex-direction: column;
}
&__details,
&__actions {
grid-area: actions;
display: flex;
flex-direction: column;
margin: var(--collected-product-actions-margin, 0 0 0 var(--spacer-base));
}
&__title {
display: inline-block;
Expand All @@ -91,6 +111,11 @@
--collected-product-remove-transition: opacity 150ms ease-in-out;
--collected-product-remove-circle-icon-display: flex;
--collected-product-remove-text-display: none;
grid-template-columns: 8.75rem 1fr;
grid-template-areas:
"aside main"
"aside configuration"
"aside actions";
&::after {
--collected-product-transition: box-shadow 150ms ease-in-out;
}
Expand All @@ -111,9 +136,6 @@
);
}
}
&__aside {
flex: 0 0 8.75rem;
}
&__image {
mix-blend-mode: darken;
}
Expand All @@ -126,7 +148,6 @@
flex-end
);
align-items: var(--collected-product-actions-align-items, flex-start);
flex: 2;
}
&--detailed {
--collected-product-width: 100%;
Expand All @@ -136,7 +157,6 @@
--collected-product-remove-right: var(--spacer-xs);
--collected-product-remove-text-display: inline;
--collected-product-actions-justify-content: flex-start;
--collected-product-main-flex-direction: row;
--collected-product-actions-align-items: flex-start;
&:hover {
--collected-product-box-shadow: none;
Expand Down
67 changes: 39 additions & 28 deletions packages/vue/src/components/organisms/SfCollectedProduct/SfCollectedProduct.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,59 @@
<template>
<div class="sf-collected-product">
<div class="sf-collected-product__main">
<div class="sf-collected-product__details">
<slot name="title" v-bind="{ title }">
<div class="sf-collected-product__title-wraper">
<div class="sf-collected-product__main-top">
<div class="sf-collected-product__details">
<slot name="title" v-bind="{ title }">
<div class="sf-collected-product__title-wraper">
<SfLink
:link="link"
class="sf-collected-product__title"
v-if="link"
>
{{ title }}
</SfLink>
{{ title }}
</SfLink>

<label
class="sf-collected-product__title"
v-else
>
{{ title }}
</label>
</div>
</slot>
<slot name="price" v-bind="{ specialPrice, regularPrice }">
<SfPrice
v-if="regularPrice"
:regular="regularPrice"
:special="specialPrice"
</div>
</slot>

<slot name="price" v-bind="{ specialPrice, regularPrice }">
<SfPrice
v-if="regularPrice"
:regular="regularPrice"
:special="specialPrice"
/>
</slot>
</div>

<slot name="remove" v-bind="{ removeHandler }">
<SfCircleIcon
icon="cross"
aria-label="Remove"
class="sf-circle-icon--small sf-collected-product__remove sf-collected-product__remove--circle-icon"
/>
<SfButton
class="sf-button--text sf-collected-product__remove sf-collected-product__remove--text"
@click="removeHandler"
>Remove</SfButton
>
</slot>
<slot name="configuration" />
</div>
<div class="sf-collected-product__actions">
<slot name="actions" />
</div>
</div>

<div class="sf-collected-product__configuration">
<slot name="configuration" />
</div>

<div class="sf-collected-product__actions">
<slot name="actions" />
</div>

<div class="sf-collected-product__aside">
<slot name="image" v-bind="{ image, title }">
<SfImage
Expand All @@ -43,6 +64,7 @@
class="sf-collected-product__image"
/>
</slot>

<slot name="input">
<div class="sf-collected-product__quantity-wrapper">
<SfQuantitySelector
Expand All @@ -53,18 +75,7 @@
</div>
</slot>
</div>
<slot name="remove" v-bind="{ removeHandler }">
<SfCircleIcon
icon="cross"
aria-label="Remove"
class="sf-circle-icon--small sf-collected-product__remove sf-collected-product__remove--circle-icon"
/>
<SfButton
class="sf-button--text sf-collected-product__remove sf-collected-product__remove--text"
@click="removeHandler"
>Remove</SfButton
>
</slot>

<slot name="more-actions">
<SfButton
aria-label="More actions"
Expand Down