studio-variable/index-shop
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Add cart button to header with item count

Browse source 
Add a cart button in the header (right of language switcher) that displays the number of items in parentheses when cart is not empty. Button opens the cart drawer on click and count updates dynamically when items are added/removed.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-14 12:06:26 +01:00
parent b3940bba08
commit 957cf79e45
3 changed files with 76 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

45
assets/css/partials/_site-header.scss
View file

@ -43,14 +43,20 @@
}
}
.header-left,
.header-right {
.header-left {
width: 90px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.header-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
.header-center {
display: flex;
flex-direction: column;
@ -75,4 +81,39 @@
color: var(--color-txt);
}
}
.header-cart-btn {
background: none;
border: none;
cursor: pointer;
font-size: 0.875rem;
text-transform: uppercase;
color: var(--color-txt);
padding: 0;
line-height: 1;
display: flex;
align-items: center;
gap: 0.25rem;
transition: opacity 0.2s;
&:hover {
opacity: 0.7;
}
}
.header-cart-count {
font-weight: normal;
&:empty {
display: none;
}
&:not(:empty)::before {
content: '(';
}
&:not(:empty)::after {
content: ')';
}
}
}