Skip to content
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

[Cart] Add color picker on cart page and in general cart settings #3021

Merged
merged 11 commits into from
Oct 23, 2023
Merged

[Cart] Add color picker on cart page and in general cart settings #3021

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a9ee92b
rebase final final
ludoboludo Oct 12, 2023
c138200
use the update for the loading spinner
ludoboludo Oct 12, 2023
431ecdb
add color picker for the cart drawer and cart popup
ludoboludo Oct 13, 2023
c6bdca4
fix spacing issues on cart page
ludoboludo Oct 16, 2023
735ad7a
add gradient support
ludoboludo Oct 16, 2023
057e462
address review comments
ludoboludo Oct 19, 2023
c3f2bb5
adjust where the class is added. Fix gradient issue
ludoboludo Oct 19, 2023
32e5806
isolation needed for shadow
ludoboludo Oct 20, 2023
bddc582
add comment
ludoboludo Oct 20, 2023
edee634
Remove unnecessary isolate
ludoboludo Oct 23, 2023
ec4d283
use the isolate class instead
ludoboludo Oct 23, 2023
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
5 changes: 0 additions & 5 deletions assets/component-cart-drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
padding: 0 1.5rem;
border: 0.1rem solid rgba(var(--color-foreground), 0.2);
border-right: 0;
background-color: rgb(var(--color-background));
overflow: hidden;
display: flex;
flex-direction: column;
Expand All @@ -33,7 +32,6 @@
.drawer__inner-empty {
height: 100%;
padding: 0 1.5rem;
background-color: rgb(var(--color-background));
overflow: hidden;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -72,7 +70,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {

.drawer__header {
position: relative;
background-color: rgb(var(--color-background));
Comment on lines 71 to -75
Copy link
Contributor

@kmeleta kmeleta Oct 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just remembering we have at least 3 implementations of drawer-like components in dawn.. I checked out the header and the facets drawers just to be safe, but maybe these classes are only used for cart anyway?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd hope so due to the name of the CSS asset 😅

padding: 1.5rem 0;
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -114,7 +111,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
}

.drawer__footer {
background-color: rgb(var(--color-background));
border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
padding: 1.5rem 0;
}
Expand Down Expand Up @@ -189,7 +185,6 @@ cart-drawer {
position: sticky;
top: 0;
z-index: 2;
background-color: rgb(var(--color-background));
}

cart-drawer-items {
Expand Down
29 changes: 15 additions & 14 deletions assets/component-cart-items.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
cart-items .title-wrapper-with-link {
margin-top: 0;
}

.cart-items td,
.cart-items th {
padding: 0;
Expand Down Expand Up @@ -48,12 +52,12 @@
line-height: calc(1 + 0.4 / var(--font-body-scale));
}

.cart-item__details>* {
.cart-item__details > * {
margin: 0;
max-width: 30rem;
}

.cart-item__details>*+* {
.cart-item__details > * + * {
margin-top: 0.6rem;
}

Expand Down Expand Up @@ -83,7 +87,7 @@
text-decoration-thickness: 0.2rem;
}

.cart-item__price-wrapper>* {
.cart-item__price-wrapper > * {
display: block;
margin: 0;
padding: 0;
Expand Down Expand Up @@ -167,7 +171,7 @@ cart-remove-button .icon-remove {
}
}

.cart-item .loading__spinner:not(.hidden)~* {
.cart-item .loading__spinner:not(.hidden) ~ * {
visibility: hidden;
}

Expand All @@ -185,18 +189,18 @@ cart-remove-button .icon-remove {
order: 1;
}

.cart-item__error-text+svg {
.cart-item__error-text + svg {
flex-shrink: 0;
width: 1.2rem;
margin-right: 0.5rem;
margin-top: 0.1rem;
}

.cart-item__error-text:empty+svg {
.cart-item__error-text:empty + svg {
display: none;
}

.product-option+.product-option {
.product-option + .product-option {
margin-top: 0.4rem;
}

Expand All @@ -210,7 +214,6 @@ cart-remove-button .icon-remove {
}

@media screen and (max-width: 749px) {

.cart-items,
.cart-items thead,
.cart-items tbody {
Expand Down Expand Up @@ -276,7 +279,7 @@ cart-remove-button .icon-remove {
width: 50%;
}

.cart-items th+th {
.cart-items th + th {
padding-left: 4rem;
}

Expand All @@ -289,7 +292,7 @@ cart-remove-button .icon-remove {
display: table-row;
}

.cart-item>td+td {
.cart-item > td + td {
padding-left: 4rem;
}

Expand All @@ -305,7 +308,7 @@ cart-remove-button .icon-remove {
margin: 0.5rem 0 0 1.5rem;
}

.cart-item__price-wrapper>*:only-child:not(.cart-item__discounted-prices) {
.cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
margin-top: 1rem;
}

Expand All @@ -315,7 +318,6 @@ cart-remove-button .icon-remove {
}

@media screen and (min-width: 990px) {

.cart-item .cart-item__quantity,
.cart-items .cart-items__heading--wide {
padding-left: 6rem;
Expand All @@ -331,10 +333,9 @@ cart-remove-button .icon-remove {
}

@media screen and (min-width: 750px) {

.cart-items .cart-items__heading--quantity,
.cart-item .cart-item__quantity,
.cart-item__quantity--info quantity-popover>*,
.cart-item__quantity--info quantity-popover > *,
.no-js .cart-item .cart-item__quantity--info {
padding-left: 5rem;
}
Expand Down
12 changes: 10 additions & 2 deletions assets/component-cart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ cart-items {
display: block;
}

cart-items,
.cart__footer {
/* Needed to make sure shadows which are using z-index: -1; are coming up as expected */
isolation: isolate;
}

.cart__items {
position: relative;
padding-bottom: 3rem;
Expand Down Expand Up @@ -86,8 +92,6 @@ cart-items {
top: 2.5rem;
}



.cart__note label {
display: flex;
align-items: flex-end;
Expand Down Expand Up @@ -170,6 +174,10 @@ cart-items {
margin: 0 auto;
}

.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty) {
margin: 0;
}

.cart__dynamic-checkout-buttons div[role='button'] {
border-radius: var(--buttons-radius-outset) !important;
}
Expand Down
6 changes: 6 additions & 0 deletions config/settings_schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1457,6 +1457,12 @@
"id": "cart_drawer_collection",
"label": "t:settings_schema.cart.settings.cart_drawer.collection.label",
"info": "t:settings_schema.cart.settings.cart_drawer.collection.info"
},
{
"type": "color_scheme",
"id": "cart_color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
}
]
}
Expand Down
14 changes: 12 additions & 2 deletions sections/main-cart-footer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,12 @@
}
{%- endstyle -%}

<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
<div>
<div
class="gradient color-{{ section.settings.color_scheme }}{% if cart == empty %} is-empty{% endif %}"
id="main-cart-footer"
data-id="{{ section.id }}"
>
<div class="page-width">
<div class="cart__footer section-{{ section.id }}-padding">
{%- if settings.show_cart_note -%}
<cart-note class="cart__note field">
Expand Down Expand Up @@ -133,6 +137,12 @@
"name": "t:sections.main-cart-footer.name",
"class": "cart__footer-wrapper",
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "range",
"id": "padding_top",
Expand Down
Loading