From 04b6ee3f370464b5295724f841ff697ca6359abb Mon Sep 17 00:00:00 2001 From: jamey Date: Tue, 17 Feb 2026 10:32:48 +0000 Subject: [PATCH] replace Tailwind utilities in product + cart components with CSS (Phase 5b) Remove ~140 Tailwind utility classes from product.ex and cart.ex, replacing with semantic CSS classes in components.css. Delete helper functions that generated Tailwind class strings (card_classes, image_container_classes, content_padding_class, title_classes, hero_cta_classes, grid_classes). Use data-* attributes for variant styling, grid columns, and sticky positioning. Update theme-layer2 selectors for renamed classes. Co-Authored-By: Claude Opus 4.6 --- assets/css/shop/components.css | 604 +++++++++++++++++- assets/css/theme-layer2-attributes.css | 10 +- .../components/page_templates/error.html.heex | 2 +- .../components/shop_components/cart.ex | 95 ++- .../components/shop_components/product.ex | 303 ++++----- 5 files changed, 775 insertions(+), 239 deletions(-) diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css index ae95fa4..3360a7d 100644 --- a/assets/css/shop/components.css +++ b/assets/css/shop/components.css @@ -18,6 +18,8 @@ .product-card { background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); + overflow: hidden; + transition: all 0.2s ease; &[data-variant="default"], &[data-variant="compact"] { @@ -33,6 +35,10 @@ cursor: pointer; } + &[data-variant="featured"]:hover { + transform: translateY(-0.25rem); + } + &[data-clickable] { position: relative; } @@ -45,10 +51,32 @@ .product-card-image-wrap { z-index: 1; + overflow: hidden; + position: relative; + background-color: #e5e7eb; + } + + .product-card-image-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .product-image-primary { + transition: opacity 0.3s ease; } .product-card-placeholder { color: var(--t-text-tertiary); + display: flex; + align-items: center; + justify-content: center; + } + + .placeholder-icon { + width: 3rem; + height: 3rem; + opacity: 0.4; } .product-card-category { @@ -56,10 +84,19 @@ text-decoration: none; position: relative; z-index: 1; + font-size: var(--t-text-caption); + margin-bottom: 0.25rem; + display: block; + } + + .product-card-category:where(a):hover { + text-decoration: underline; } .product-card-title { color: var(--t-text-primary); + font-weight: 600; + margin-bottom: 0.5rem; } .product-card[data-variant="default"] .product-card-title, @@ -67,8 +104,28 @@ font-family: var(--t-font-heading); } + .product-card[data-variant="featured"] .product-card-title { + font-size: var(--t-text-small); + font-weight: 500; + margin-bottom: 0.25rem; + } + + .product-card[data-variant="compact"] .product-card-title { + font-size: var(--t-text-small); + margin-bottom: 0.25rem; + } + + .product-card[data-variant="minimal"] .product-card-title { + font-size: var(--t-text-caption); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .product-card-delivery { color: var(--t-text-tertiary); + font-size: var(--t-text-caption); + margin-top: 0.25rem; } /* ── Product prices (shared between cards and PDP) ── */ @@ -79,6 +136,7 @@ .product-price--compare { color: var(--t-text-tertiary); + text-decoration: line-through; } .product-price--regular { @@ -89,14 +147,66 @@ color: var(--t-text-secondary); } + /* Card-variant price sizing */ + .product-card[data-variant="default"] .product-price--sale, + .product-card[data-variant="default"] .product-price--regular { + font-size: var(--t-text-large); + font-weight: 700; + } + + .product-card[data-variant="default"] .product-price--compare { + font-size: var(--t-text-small); + margin-left: 0.5rem; + } + + .product-card[data-variant="featured"] .product-price--secondary { + font-size: var(--t-text-small); + } + + .product-card[data-variant="featured"] .product-price--compare { + margin-right: 0.25rem; + } + + .product-card[data-variant="compact"] .product-price--regular { + font-weight: 700; + } + + .product-card[data-variant="minimal"] .product-price--secondary { + font-size: var(--t-text-caption); + } + + /* PDP price sizing */ + .pdp-price-row { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.5rem; + } + + .pdp-price-row .product-price--sale, + .pdp-price-row .product-price--regular { + font-size: var(--t-heading-lg); + font-weight: 700; + } + + .pdp-price-row .product-price--compare { + font-size: var(--t-text-xl); + } + .sale-badge { background-color: var(--t-sale-color); + padding: 0.25rem 0.5rem; + font-size: var(--t-text-small); + font-weight: 700; + color: #fff; + border-radius: var(--t-radius-sm, 4px); } /* ── Hero section ── */ .hero-section { padding: var(--space-2xl) var(--space-lg); + text-align: center; &[data-background="base"] { background-color: var(--t-surface-base); @@ -105,21 +215,73 @@ &[data-background="sunken"] { background-color: var(--t-surface-sunken); } + + & .t-heading { + font-size: var(--t-heading-lg); + margin-bottom: 1rem; + } } .hero-section--page { padding-top: var(--space-2xl); + text-align: center; + + & .t-heading { + font-size: var(--t-heading-xl); + margin-bottom: 1.5rem; + } + + & .hero-description { + margin-bottom: 3rem; + max-width: 42rem; + } + } + + .hero-error { + text-align: center; + + & .t-heading { + font-size: var(--t-heading-lg); + margin-bottom: 1.5rem; + } + + & .hero-description { + margin-bottom: 2rem; + max-width: 28rem; + } } .hero-pre-title { font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); + font-size: var(--t-heading-display); + margin-bottom: 1rem; } .hero-description { color: var(--t-text-secondary); line-height: 1.6; + font-size: var(--t-text-large); + max-width: 32rem; + margin-inline: auto; + margin-bottom: 2rem; + } + + .hero-cta-group { + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: center; + } + + .hero-cta { + padding: 0.75rem 2rem; + font-weight: 600; + transition: all 0.2s ease; + text-decoration: none; + display: inline-block; + cursor: pointer; } /* ── Category nav ── */ @@ -129,14 +291,49 @@ background-color: var(--t-surface-base); } + .category-nav { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + max-width: 48rem; + margin-inline: auto; + } + .category-card { text-decoration: none; cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding: 1rem; + border-radius: 0.5rem; + transition: background-color 0.15s ease; + } + + .category-card:hover { + background-color: rgba(0, 0, 0, 0.05); + } + + .category-image { + width: 6rem; + height: 6rem; + border-radius: 9999px; + background-color: #e5e7eb; + background-size: cover; + background-position: center; + transition: transform 0.15s ease; + } + + .category-card:hover .category-image { + transform: scale(1.05); } .category-name { font-family: var(--t-font-body); color: var(--t-text-primary); + font-size: var(--t-text-small); + font-weight: 500; } /* ── Featured products section ── */ @@ -144,6 +341,16 @@ .featured-section { padding: var(--space-xl) var(--space-lg); background-color: var(--t-surface-sunken); + + & .t-heading { + font-size: var(--t-text-2xl); + margin-bottom: 1.5rem; + } + } + + .featured-cta-wrap { + text-align: center; + margin-top: 2rem; } .outline-button { @@ -153,6 +360,10 @@ border-radius: var(--t-radius-button); cursor: pointer; text-decoration: none; + padding: 0.75rem 1.5rem; + font-weight: 500; + transition: all 0.2s ease; + display: inline-block; } /* ── Image + text section ── */ @@ -160,21 +371,38 @@ .image-text-section { padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-base); + display: grid; + grid-template-columns: 1fr; + gap: 3rem; + align-items: center; + + & .t-heading { + font-size: var(--t-text-2xl); + margin-bottom: 1rem; + } } .image-text-image { border-radius: var(--t-radius-image); + height: 18rem; + background-size: cover; + background-position: center; } .image-text-body { color: var(--t-text-secondary); line-height: 1.7; + font-size: var(--t-text-base); + margin-bottom: 1rem; } .accent-link { color: var(--t-accent-text, hsl(var(--t-accent-h) var(--t-accent-s) 38%)); text-decoration: none; cursor: pointer; + font-size: var(--t-text-small); + font-weight: 500; + transition: color 0.15s ease; } /* ── Collection header ── */ @@ -182,12 +410,41 @@ .collection-header-wrap { background-color: var(--t-surface-raised); border-color: var(--t-border-default); + border-bottom: 1px solid var(--t-border-default); + + & .t-heading { + font-size: var(--t-heading-lg); + margin-bottom: 0.5rem; + } + } + + .collection-header-inner { + max-width: 80rem; + margin-inline: auto; + padding: 2rem 1rem; } .collection-header-meta { color: var(--t-text-secondary); } + /* ── Filter bar ── */ + + .filter-bar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.5rem; + } + + .filter-pills-container { + display: flex; + gap: 0.5rem; + overflow-x: auto; + } + /* ── Breadcrumb ── */ .breadcrumb { @@ -196,12 +453,22 @@ & [aria-current="page"] { color: var(--t-text-primary); } + + & a:hover { + text-decoration: underline; + } } /* ── Related products ── */ .related-section { border-top: 1px solid var(--t-border-default); + padding-block: 3rem; + + & .t-heading { + font-size: var(--t-text-2xl); + margin-bottom: 1.5rem; + } } /* ── PDP gallery ── */ @@ -209,16 +476,42 @@ .pdp-gallery-frame { border-radius: var(--t-radius-image); overflow: hidden; + position: relative; + } + + .pdp-gallery-single img { + width: 100%; + height: 100%; + object-fit: cover; } .pdp-thumbnail { border-radius: var(--t-radius-image); + aspect-ratio: 1 / 1; + background-color: #e5e7eb; + overflow: hidden; + border: none; + padding: 0; + cursor: pointer; + } + + .pdp-thumbnail img { + width: 100%; + height: 100%; + object-fit: cover; } /* ── Variant selector ── */ + .variant-selector { + margin-bottom: 1.5rem; + } + .variant-label { color: var(--t-text-primary); + display: block; + font-weight: 600; + margin-bottom: 0.5rem; } .variant-label-value { @@ -226,8 +519,21 @@ font-weight: normal; } + .variant-options { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + .color-swatch { - border-color: var(--t-border-default); + width: 2.5rem; + height: 2.5rem; + border-radius: 9999px; + border: 2px solid var(--t-border-default); + transition: all 0.2s ease; + position: relative; + cursor: pointer; + padding: 0; &[aria-pressed="true"] { border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); @@ -240,6 +546,10 @@ border-radius: var(--t-radius-button); color: var(--t-text-primary); background: transparent; + padding: 0.5rem 1rem; + font-weight: 500; + transition: all 0.2s ease; + cursor: pointer; &[aria-pressed="true"] { border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); @@ -249,30 +559,60 @@ /* ── Quantity selector ── */ + .quantity-selector { + margin-bottom: 2rem; + } + .qty-label { color: var(--t-text-primary); + display: block; + font-weight: 600; + margin-bottom: 0.5rem; + } + + .qty-row { + display: flex; + align-items: center; + gap: 1rem; } .qty-group { border: 2px solid var(--t-border-default); border-radius: var(--t-radius-input); + display: flex; + align-items: center; } .qty-btn { color: var(--t-text-primary); + padding: 0.5rem 1rem; + background: none; + border: none; + cursor: pointer; + + &:disabled { + opacity: 0.3; + } } .qty-display { - border-color: var(--t-border-default); color: var(--t-text-primary); + padding: 0.5rem 1rem; + border-inline: 2px solid var(--t-border-default); + min-width: 3rem; + text-align: center; + font-variant-numeric: tabular-nums; } .stock-in { color: var(--t-text-tertiary); + font-size: var(--t-text-small); } .stock-out { color: var(--t-sale-color); + font-size: var(--t-text-small); + font-weight: 600; } /* ── Add to cart ── */ @@ -280,6 +620,17 @@ .atc-wrap { background-color: var(--t-surface-base); border-color: var(--t-border-subtle); + margin-bottom: 1rem; + + &[data-sticky="true"] { + position: sticky; + bottom: 0; + z-index: 10; + padding-block: 0.75rem; + margin-inline: -1rem; + padding-inline: 1rem; + border-top: 1px solid var(--t-border-subtle); + } } .atc-btn { @@ -288,6 +639,11 @@ border-radius: var(--t-radius-button); border: none; cursor: pointer; + width: 100%; + padding: 0.75rem 1.5rem; + font-size: var(--t-text-large); + font-weight: 600; + transition: all 0.2s ease; &:disabled { background-color: var(--t-border-default); @@ -299,10 +655,35 @@ .accordion-summary { color: var(--t-text-primary); + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 1rem; + cursor: pointer; + list-style: none; + + &::-webkit-details-marker { + display: none; + } + } + + .accordion-title { + font-weight: 600; + } + + .accordion-icon { + width: 1.25rem; + height: 1.25rem; + transition: transform 0.2s ease; + } + + details[open] > .accordion-summary .accordion-icon { + transform: rotate(180deg); } .accordion-body { color: var(--t-text-secondary); + padding-bottom: 1rem; } /* ── Product details ── */ @@ -311,6 +692,20 @@ border-top: 1px solid var(--t-border-subtle); border-bottom: 1px solid var(--t-border-subtle); border-color: var(--t-border-subtle); + margin-top: 2rem; + + & > * + * { + border-top: 1px solid var(--t-border-subtle); + } + } + + .details-description { + line-height: 1.625; + } + + .details-table { + width: 100%; + font-size: var(--t-text-small); } .details-table-row { @@ -319,10 +714,29 @@ .details-th { color: var(--t-text-primary); + text-align: left; + padding-block: 0.5rem; + font-weight: 600; + } + + .details-td { + padding-block: 0.5rem; } .details-subheading { color: var(--t-text-primary); + font-weight: 600; + margin-bottom: 0.25rem; + } + + .details-shipping { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .details-shipping-text { + font-size: var(--t-text-small); } /* ── Announcement bar ── */ @@ -784,6 +1198,11 @@ padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary); + + & svg { + width: 1.25rem; + height: 1.25rem; + } } .cart-drawer-items { @@ -829,6 +1248,7 @@ border: none; cursor: pointer; font-family: var(--t-font-body); + margin-bottom: 0.5rem; } /* ── Cart item row ── */ @@ -910,6 +1330,8 @@ .cart-qty-group { border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input); + display: flex; + align-items: center; } .cart-qty-btn { @@ -917,13 +1339,15 @@ border: none; cursor: pointer; color: var(--t-text-primary); + padding: 0.25rem 0.75rem; } .cart-qty-display { - border-color: var(--t-border-default); color: var(--t-text-primary); min-width: 2rem; text-align: center; + padding: 0.25rem 0.75rem; + border-inline: 1px solid var(--t-border-default); } .cart-qty-text { @@ -933,6 +1357,7 @@ .cart-item-price-col { flex-shrink: 0; + text-align: right; } .cart-item-price { @@ -961,10 +1386,20 @@ .cart-empty { color: var(--t-text-secondary); + text-align: center; + padding-block: 2rem; } .cart-empty-icon { color: var(--t-text-tertiary); + width: 4rem; + height: 4rem; + margin-inline: auto; + margin-bottom: 1rem; + } + + .cart-empty p { + margin-bottom: 1rem; } .cart-continue-link { @@ -980,25 +1415,66 @@ /* ── Cart page item (full size) ── */ + .cart-page-item { + display: flex; + gap: 1rem; + padding: 1rem; + } + .cart-page-image { border-radius: var(--t-radius-image); + width: 6rem; + height: 6rem; + flex-shrink: 0; + background-color: #e5e7eb; + overflow: hidden; + + & img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .cart-page-item-info { + flex: 1; } .cart-page-item-name { font-family: var(--t-font-heading); color: var(--t-text-primary); + font-weight: 600; + margin-bottom: 0.25rem; } .cart-page-item-variant { color: var(--t-text-secondary); + font-size: var(--t-text-small); + margin-bottom: 0.5rem; + } + + .cart-page-item-actions { + display: flex; + align-items: center; + gap: 1rem; } .cart-page-item-remove { color: var(--t-text-tertiary); + font-size: var(--t-text-small); + background: none; + border: none; + cursor: pointer; + } + + .cart-page-item-price-col { + text-align: right; } .cart-page-item-price { color: var(--t-text-primary); + font-weight: 700; + font-size: var(--t-text-large); } /* ── Delivery line ── */ @@ -1007,12 +1483,21 @@ font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); + display: flex; + justify-content: space-between; + align-items: center; & form { display: inline; } } + .delivery-line-label { + display: flex; + align-items: center; + gap: 0.25rem; + } + .delivery-select { appearance: auto; background: transparent; @@ -1027,9 +1512,30 @@ /* ── Order summary ── */ + .order-summary-card { + padding: 1.5rem; + position: sticky; + top: 1rem; + } + .order-summary-heading { font-family: var(--t-font-heading); color: var(--t-text-primary); + font-size: var(--t-text-xl); + font-weight: 700; + margin-bottom: 1.5rem; + } + + .order-summary-lines { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 1.5rem; + } + + .order-summary-line { + display: flex; + justify-content: space-between; } .order-summary-label { @@ -1041,7 +1547,34 @@ } .order-summary-divider { - border-color: var(--t-border-default); + border-top: 1px solid var(--t-border-default); + padding-top: 0.75rem; + } + + .order-summary-total { + display: flex; + justify-content: space-between; + font-size: var(--t-text-large); + } + + .order-summary-checkout { + width: 100%; + padding: 0.75rem 1.5rem; + font-weight: 600; + transition: all 0.2s ease; + } + + .order-summary-checkout-form { + margin-bottom: 0.75rem; + } + + .order-summary-continue { + display: block; + width: 100%; + padding: 0.75rem 1.5rem; + font-weight: 600; + transition: all 0.2s ease; + text-align: center; } /* ── Content body ── */ @@ -1498,6 +2031,42 @@ object-fit: cover; } + /* ── Product grid ── */ + + .product-grid { + display: grid; + } + + .product-grid[data-columns="fixed-4"] { + grid-template-columns: repeat(2, 1fr); + } + + .product-grid:not([data-columns="fixed-4"]) { + grid-template-columns: 1fr; + } + + /* ── Cart layout (cart page) ── */ + + .cart-layout { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + } + + .cart-items-stack { + display: flex; + flex-direction: column; + gap: 1rem; + } + + /* ── Error page product grid ── */ + + .error-container .product-grid { + margin-top: 3rem; + max-width: 36rem; + margin-inline: auto; + } + /* ── Screen reader only ── */ .sr-only { @@ -1516,9 +2085,14 @@ @media (min-width: 640px) { .page-container { padding-inline: 1.5rem; } + .collection-header-inner { padding-inline: 1.5rem; } .shop-header { padding: 0.75rem 1rem; } .shop-footer-inner { padding-inline: 1.5rem; } .search-kbd { display: flex; } + .product-grid:not([data-columns="fixed-4"]) { + grid-template-columns: repeat(2, 1fr); + } + .hero-cta-group { flex-direction: row; } } @media (min-width: 768px) { @@ -1530,11 +2104,33 @@ .footer-bottom { flex-direction: row; } .pdp-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: repeat(2, 1fr); } + .product-grid[data-columns="fixed-4"] { + grid-template-columns: repeat(4, 1fr); + } + .image-text-section { grid-template-columns: repeat(2, 1fr); } + .collection-header-wrap .t-heading { font-size: var(--t-heading-xl); } + .hero-section .t-heading { font-size: var(--t-heading-xl); } + .hero-section--page .t-heading { font-size: var(--t-heading-display); } + .hero-error .t-heading { font-size: var(--t-heading-xl); } + .pdp-price-row .product-price--sale, + .pdp-price-row .product-price--regular { font-size: var(--t-heading-xl); } + .atc-wrap[data-sticky="true"] { + position: relative; + padding-block: 0; + margin-inline: 0; + padding-inline: 0; + border-top: none; + } } @media (min-width: 1024px) { .page-container { padding-inline: 2rem; } + .collection-header-inner { padding-inline: 2rem; } .shop-footer-inner { padding-inline: 2rem; } .cart-grid { grid-template-columns: 2fr 1fr; } + .cart-layout { grid-template-columns: 2fr 1fr; } + .product-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); } + .product-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); } + .product-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); } } } diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css index 3a3c9d1..9a59495 100644 --- a/assets/css/theme-layer2-attributes.css +++ b/assets/css/theme-layer2-attributes.css @@ -85,15 +85,15 @@ } /* Layout Width */ - &[data-layout="contained"] .max-w-7xl { + &[data-layout="contained"] :is(.max-w-7xl, .page-container, .collection-header-inner) { max-width: var(--t-layout-max-width, 1100px); } - &[data-layout="wide"] .max-w-7xl { + &[data-layout="wide"] :is(.max-w-7xl, .page-container, .collection-header-inner) { max-width: var(--t-layout-max-width, 1400px); } - &[data-layout="full"] .max-w-7xl { + &[data-layout="full"] :is(.max-w-7xl, .page-container, .collection-header-inner) { max-width: var(--t-layout-max-width, 100%); padding-left: 2rem; padding-right: 2rem; @@ -175,7 +175,7 @@ } /* Image Aspect Ratio */ - & .product-card .product-image-container { + & .product-card .product-card-image-wrap { aspect-ratio: var(--t-image-aspect-ratio, 1 / 1); } @@ -330,7 +330,7 @@ } /* Product Card Images — mobile: swipe, desktop: hover crossfade */ -.product-image-container { +.product-card-image-wrap { position: relative; } diff --git a/lib/simpleshop_theme_web/components/page_templates/error.html.heex b/lib/simpleshop_theme_web/components/page_templates/error.html.heex index ef6da17..434cde8 100644 --- a/lib/simpleshop_theme_web/components/page_templates/error.html.heex +++ b/lib/simpleshop_theme_web/components/page_templates/error.html.heex @@ -18,7 +18,7 @@ mode={@mode} /> - <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto"> + <.product_grid columns={:fixed_4}> <%= for product <- Enum.take(assigns[:products] || [], 4) do %> <.product_card product={product} diff --git a/lib/simpleshop_theme_web/components/shop_components/cart.ex b/lib/simpleshop_theme_web/components/shop_components/cart.ex index c76fea7..e855f15 100644 --- a/lib/simpleshop_theme_web/components/shop_components/cart.ex +++ b/lib/simpleshop_theme_web/components/shop_components/cart.ex @@ -92,7 +92,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do aria-label="Close cart" > @@ -143,7 +143,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do @@ -213,24 +213,24 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<%= if @show_quantity_controls do %> -
+
- + {@item.quantity}
-
+

{SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}

@@ -262,9 +262,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do def cart_empty_state(assigns) do ~H""" -
+
-

Your basket is empty

+

Your basket is empty

<%= if @mode == :preview do %> - +
+
+ + {@item.quantity} - +
-
-
-

+

+

{SimpleshopTheme.Cart.format_price(@item.product.cheapest_price * @item.quantity)}

@@ -391,8 +390,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do defp delivery_line(assigns) do ~H""" -
- +
+ Delivery to <%= if @available_countries != [] and @mode != :preview do %>
@@ -445,15 +444,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do assign(assigns, :estimated_total, assigns.subtotal + (assigns.shipping_estimate || 0)) ~H""" - <.shop_card class="p-6 sticky top-4"> -

+ <.shop_card class="order-summary-card"> +

Order summary

-
-
- Subtotal - +
+
+ Subtotal + {SimpleshopTheme.Cart.format_price(@subtotal)}
@@ -463,12 +462,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do available_countries={@available_countries} mode={@mode} /> -
-
- +
+
+ {if @shipping_estimate, do: "Estimated total", else: "Subtotal"} - + {SimpleshopTheme.Cart.format_price(@estimated_total)}
@@ -476,26 +475,26 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<%= if @mode == :preview do %> - <.shop_button class="w-full px-6 py-3 font-semibold transition-all mb-3"> + <.shop_button class="order-summary-checkout"> Checkout <.shop_button_outline phx-click="change_preview_page" phx-value-page="collection" - class="w-full px-6 py-3 font-semibold transition-all" + class="order-summary-continue" > Continue shopping <% else %> - + - <.shop_button type="submit" class="w-full px-6 py-3 font-semibold transition-all"> + <.shop_button type="submit" class="order-summary-checkout"> Checkout <.shop_link_outline href="/collections/all" - class="block w-full px-6 py-3 font-semibold transition-all text-center" + class="order-summary-continue" > Continue shopping @@ -524,13 +523,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do def cart_layout(assigns) do ~H""" -
-
-
- <%= for item <- @items do %> - <.cart_item item={item} /> - <% end %> -
+
+
+ <%= for item <- @items do %> + <.cart_item item={item} /> + <% end %>
diff --git a/lib/simpleshop_theme_web/components/shop_components/product.ex b/lib/simpleshop_theme_web/components/shop_components/product.ex index 88af556..c45e172 100644 --- a/lib/simpleshop_theme_web/components/shop_components/product.ex +++ b/lib/simpleshop_theme_web/components/shop_components/product.ex @@ -62,7 +62,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do ~H"""
@@ -103,7 +103,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do |> assign(:has_hover_image, assigns.theme_settings.hover_image && hover_image != nil) ~H""" -
+
<%= if @show_badges do %> <.product_badge product={@product} /> <% end %> @@ -118,13 +118,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do alt={@product.title} variant={@variant} priority={@priority} - class="product-image-primary w-full h-full object-cover transition-opacity duration-300" + class="product-image-primary" /> <.product_card_image image={@hover_image} alt={@product.title} variant={@variant} - class="product-image-hover w-full h-full object-cover" + class="product-image-hover" />
<% else %> @@ -133,7 +133,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do alt={@product.title} variant={@variant} priority={@priority} - class="product-image-primary w-full h-full object-cover" + class="product-image-primary" /> <% end %> <%= if @has_hover_image do %> @@ -143,22 +143,22 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
<% end %>
-
+
<%= if @show_category && Map.get(@product, :category) do %> <%= if @mode == :preview do %> -

+

{@product.category}

<% else %> <.link navigate={"/collections/#{Slug.slugify(@product.category)}"} - class="product-card-category text-xs mb-1 block hover:underline" + class="product-card-category" > {@product.category} <% end %> <% end %> -

+

<%= if @clickable do %> <%= if @mode == :preview do %> <% end %> <%= if @show_delivery_text do %> -

+

Made to order

<% end %> @@ -226,7 +226,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do <%= cond do %> <% is_nil(@src) -> %>