update
This commit is contained in:
Juergen Kunz
@ -1,4 +1,5 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import './dees-shopping-productcard.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper>
|
||||
@ -18,108 +19,6 @@ export const demoFunc = () => html`
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
||||
box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price-current {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
||||
}
|
||||
|
||||
.price-original {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.in-stock {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.in-stock dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
margin-top: 24px;
|
||||
@ -176,9 +75,13 @@ export const demoFunc = () => html`
|
||||
|
||||
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
const updateCartSummary = () => {
|
||||
const qty1 = (elementArg.querySelector('#headphones-qty') as any)?.getValue() || 0;
|
||||
const qty2 = (elementArg.querySelector('#mouse-qty') as any)?.getValue() || 0;
|
||||
const qty3 = (elementArg.querySelector('#keyboard-qty') as any)?.getValue() || 0;
|
||||
const card1 = elementArg.querySelector('#headphones-qty') as any;
|
||||
const card2 = elementArg.querySelector('#mouse-qty') as any;
|
||||
const card3 = elementArg.querySelector('#keyboard-qty') as any;
|
||||
|
||||
const qty1 = card1?.quantity || 0;
|
||||
const qty2 = card2?.quantity || 0;
|
||||
const qty3 = card3?.quantity || 0;
|
||||
|
||||
const price1 = 349.99 * qty1;
|
||||
const price2 = 99.99 * qty2;
|
||||
@ -213,96 +116,48 @@ export const demoFunc = () => html`
|
||||
setTimeout(updateCartSummary, 100);
|
||||
|
||||
// Set up listeners
|
||||
elementArg.querySelectorAll('dees-input-quantityselector').forEach(selector => {
|
||||
selector.addEventListener('changeSubject', updateCartSummary);
|
||||
elementArg.querySelectorAll('dees-shopping-productcard').forEach(card => {
|
||||
card.addEventListener('quantityChange', updateCartSummary);
|
||||
});
|
||||
}}>
|
||||
<div class="shopping-grid">
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<dees-icon .iconName=${'lucide:headphones'}></dees-icon>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-header">
|
||||
<div class="product-category">Audio</div>
|
||||
<div class="product-name">Sony WH-1000XM5 Wireless Headphones</div>
|
||||
</div>
|
||||
<div class="product-description">
|
||||
Industry-leading noise canceling with Auto NC Optimizer
|
||||
</div>
|
||||
<div class="in-stock">
|
||||
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
|
||||
In Stock
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<div class="product-price">
|
||||
<span class="price-current">$349.99</span>
|
||||
<span class="price-original">$399.99</span>
|
||||
</div>
|
||||
<dees-input-quantityselector
|
||||
id="headphones-qty"
|
||||
.value=${1}
|
||||
></dees-input-quantityselector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dees-shopping-productcard
|
||||
id="headphones-qty"
|
||||
.productData=${{
|
||||
name: 'Sony WH-1000XM5 Wireless Headphones',
|
||||
category: 'Audio',
|
||||
description: 'Industry-leading noise canceling with Auto NC Optimizer',
|
||||
price: 349.99,
|
||||
originalPrice: 399.99,
|
||||
iconName: 'lucide:headphones'
|
||||
}}
|
||||
.quantity=${1}
|
||||
></dees-shopping-productcard>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<dees-icon .iconName=${'lucide:mouse-pointer'}></dees-icon>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-header">
|
||||
<div class="product-category">Accessories</div>
|
||||
<div class="product-name">Logitech MX Master 3S</div>
|
||||
</div>
|
||||
<div class="product-description">
|
||||
Performance wireless mouse with ultra-fast scrolling
|
||||
</div>
|
||||
<div class="in-stock">
|
||||
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
|
||||
In Stock
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<div class="product-price">
|
||||
<span class="price-current">$99.99</span>
|
||||
</div>
|
||||
<dees-input-quantityselector
|
||||
id="mouse-qty"
|
||||
.value=${2}
|
||||
></dees-input-quantityselector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dees-shopping-productcard
|
||||
id="mouse-qty"
|
||||
.productData=${{
|
||||
name: 'Logitech MX Master 3S',
|
||||
category: 'Accessories',
|
||||
description: 'Performance wireless mouse with ultra-fast scrolling',
|
||||
price: 99.99,
|
||||
iconName: 'lucide:mouse-pointer'
|
||||
}}
|
||||
.quantity=${2}
|
||||
></dees-shopping-productcard>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<dees-icon .iconName=${'lucide:keyboard'}></dees-icon>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-header">
|
||||
<div class="product-category">Keyboards</div>
|
||||
<div class="product-name">Keychron K2 Wireless Mechanical Keyboard</div>
|
||||
</div>
|
||||
<div class="product-description">
|
||||
Compact 75% layout with hot-swappable switches
|
||||
</div>
|
||||
<div class="in-stock">
|
||||
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
|
||||
In Stock
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<div class="product-price">
|
||||
<span class="price-current">$79.99</span>
|
||||
<span class="price-original">$94.99</span>
|
||||
</div>
|
||||
<dees-input-quantityselector
|
||||
id="keyboard-qty"
|
||||
.value=${1}
|
||||
></dees-input-quantityselector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dees-shopping-productcard
|
||||
id="keyboard-qty"
|
||||
.productData=${{
|
||||
name: 'Keychron K2 Wireless Mechanical Keyboard',
|
||||
category: 'Keyboards',
|
||||
description: 'Compact 75% layout with hot-swappable switches',
|
||||
price: 79.99,
|
||||
originalPrice: 94.99,
|
||||
iconName: 'lucide:keyboard'
|
||||
}}
|
||||
.quantity=${1}
|
||||
></dees-shopping-productcard>
|
||||
</div>
|
||||
|
||||
<div class="cart-summary">
|
||||
|
||||
Reference in New Issue
Block a user