add product cta sticky interaction
This commit is contained in:
parent
0a075632c3
commit
7045ef8bff
@ -5,6 +5,15 @@
|
||||
background: var(--theme-bg);
|
||||
}
|
||||
|
||||
.detail-body-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-sections {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.label-title {
|
||||
font-size: var(--text-xs);
|
||||
@ -195,24 +204,13 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
position: relative;
|
||||
grid-column: 10 / -1;
|
||||
grid-row: 1;
|
||||
z-index: 4;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
width: min(100%, 390px);
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(1rem, 1.8vw, 1.45rem);
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.purchase-price-row {
|
||||
@ -919,6 +917,36 @@
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.detail-body-grid {
|
||||
grid-template-columns: 1fr clamp(280px, 24vw, 390px);
|
||||
grid-template-rows: auto 1fr;
|
||||
column-gap: var(--gap-lg);
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.detail-sidebar {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
z-index: 4;
|
||||
padding-top: clamp(10rem, 24svh, 18rem);
|
||||
}
|
||||
|
||||
.detail-sections {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
position: sticky;
|
||||
top: clamp(5rem, 8vw, 6.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.product-story-grid,
|
||||
.product-meta-section,
|
||||
@ -943,13 +971,9 @@
|
||||
padding-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.product-media-column,
|
||||
.product-purchase-panel {
|
||||
.product-media-column {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.product-media-column {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@ -1021,13 +1045,9 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
justify-self: stretch;
|
||||
align-self: auto;
|
||||
width: min(100%, 46rem);
|
||||
max-width: 46rem;
|
||||
max-height: none;
|
||||
margin-inline: auto;
|
||||
overflow: visible;
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
}
|
||||
@ -1046,8 +1066,7 @@
|
||||
padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
|
||||
}
|
||||
|
||||
.product-media-column,
|
||||
.product-purchase-panel {
|
||||
.product-media-column {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
@ -1230,6 +1249,66 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-purchase-cta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.detail-body-grid {
|
||||
padding-bottom: clamp(4rem, 8vw, 5.5rem);
|
||||
}
|
||||
|
||||
.mobile-purchase-cta {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap-sm);
|
||||
padding: clamp(0.6rem, 1.8vw, 0.85rem) var(--page-x);
|
||||
background: color-mix(in srgb, var(--theme-bg) 88%, transparent);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
backdrop-filter: blur(18px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.2);
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.mobile-purchase-cta.is-visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mobile-purchase-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-purchase-info span {
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-purchase-info strong {
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mobile-purchase-cta .atmos-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.is-transition-arriving .product-hero-image,
|
||||
.is-transition-arriving [data-product-transition-reveal] {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import perfumes from "../data/perfumes";
|
||||
import SharedNavbar from "./SharedNavbar";
|
||||
@ -166,17 +166,7 @@ function ProductPurchasePanel({
|
||||
);
|
||||
}
|
||||
|
||||
function ProductHero({
|
||||
perfume,
|
||||
selectedImage,
|
||||
setSelectedImage,
|
||||
selectedSize,
|
||||
setSelectedSize,
|
||||
selectedPriceCents,
|
||||
discountPreviewCents,
|
||||
addToCart,
|
||||
subscribeToProduct,
|
||||
}) {
|
||||
function ProductHero({ perfume, selectedImage, setSelectedImage }) {
|
||||
const galleryImages = [...new Set([perfume.image, ...(perfume.gallery || [])])].slice(0, 3);
|
||||
|
||||
return (
|
||||
@ -229,15 +219,6 @@ function ProductHero({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProductPurchasePanel
|
||||
perfume={perfume}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={setSelectedSize}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -550,6 +531,33 @@ function ProductRecommendations({ currentSlug, startProductTransition }) {
|
||||
);
|
||||
}
|
||||
|
||||
function MobilePurchaseCTA({ perfume, selectedSize, addToCart, visible }) {
|
||||
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
|
||||
const selectedProductLabel = selectedSize === "sample" ? "Probe" : "50 ml Flakon";
|
||||
|
||||
return (
|
||||
<div className={`mobile-purchase-cta ${visible ? "is-visible" : ""}`}>
|
||||
<div className="mobile-purchase-info">
|
||||
<span>{perfume.name}</span>
|
||||
<strong>{perfume.prices[selectedSize]}</strong>
|
||||
</div>
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--uppercase"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addToCart(
|
||||
selectedProductId,
|
||||
1,
|
||||
`${perfume.name} ${selectedProductLabel} wurde in den Warenkorb gelegt.`
|
||||
).catch(() => {})
|
||||
}
|
||||
>
|
||||
Kaufen
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductDetailContent({ perfumeSlug }) {
|
||||
const { addToCart, subscribeToProduct, user } = useShop();
|
||||
const { activeSlug, phase, startProductTransition } = useProductTransition();
|
||||
@ -565,6 +573,8 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
const [selectedSize, setSelectedSize] = useState("full");
|
||||
const [showReviewDetails, setShowReviewDetails] = useState(false);
|
||||
const [commentPage, setCommentPage] = useState(0);
|
||||
const sidebarRef = useRef(null);
|
||||
const [isPanelVisible, setIsPanelVisible] = useState(true);
|
||||
const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
|
||||
const sampleCredit = user?.sampleCredits?.find(
|
||||
(credit) => credit.slug === perfume.slug && credit.status === "available"
|
||||
@ -621,6 +631,17 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
return () => window.clearInterval(interval);
|
||||
}, [safeCommentPages.length]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = sidebarRef.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setIsPanelVisible(entry.isIntersecting),
|
||||
{ threshold: 0 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const productJsonLd = useMemo(() => buildProductJsonLd(perfume), [perfume]);
|
||||
|
||||
return (
|
||||
@ -638,35 +659,52 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
<SharedNavbar variant="hero" brandMode="back" />
|
||||
|
||||
<main id="main-content" className="shell">
|
||||
<ProductHero
|
||||
perfume={perfume}
|
||||
selectedImage={selectedImage}
|
||||
setSelectedImage={setSelectedImage}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={handleSizeSelection}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
/>
|
||||
<div className="detail-body-grid">
|
||||
<ProductHero
|
||||
perfume={perfume}
|
||||
selectedImage={selectedImage}
|
||||
setSelectedImage={setSelectedImage}
|
||||
/>
|
||||
|
||||
<ProductStorySection perfume={perfume} />
|
||||
<ProductStructureSection perfume={perfume} />
|
||||
<ProductMetaSection perfume={perfume} />
|
||||
<ProductReviews
|
||||
reviewSummary={reviewSummary}
|
||||
safeCommentPages={safeCommentPages}
|
||||
commentPage={commentPage}
|
||||
setCommentPage={setCommentPage}
|
||||
showReviewDetails={showReviewDetails}
|
||||
setShowReviewDetails={setShowReviewDetails}
|
||||
/>
|
||||
<ProductTestingCTA perfume={perfume} addToCart={addToCart} />
|
||||
<ProductRecommendations
|
||||
currentSlug={perfume.slug}
|
||||
startProductTransition={startProductTransition}
|
||||
/>
|
||||
<div className="detail-sidebar" ref={sidebarRef}>
|
||||
<ProductPurchasePanel
|
||||
perfume={perfume}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={handleSizeSelection}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="detail-sections">
|
||||
<ProductStorySection perfume={perfume} />
|
||||
<ProductStructureSection perfume={perfume} />
|
||||
<ProductMetaSection perfume={perfume} />
|
||||
<ProductReviews
|
||||
reviewSummary={reviewSummary}
|
||||
safeCommentPages={safeCommentPages}
|
||||
commentPage={commentPage}
|
||||
setCommentPage={setCommentPage}
|
||||
showReviewDetails={showReviewDetails}
|
||||
setShowReviewDetails={setShowReviewDetails}
|
||||
/>
|
||||
<ProductTestingCTA perfume={perfume} addToCart={addToCart} />
|
||||
<ProductRecommendations
|
||||
currentSlug={perfume.slug}
|
||||
startProductTransition={startProductTransition}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<MobilePurchaseCTA
|
||||
perfume={perfume}
|
||||
selectedSize={selectedSize}
|
||||
addToCart={addToCart}
|
||||
visible={!isPanelVisible}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user