[wip] Rework Shop
- Change strategy for content fetching - Add a route per page instead of using __layout for all - Change the behaviors of the posters section (add a carousel on small screens) - Change Poster buttons styling and make interactions only for desktop
This commit is contained in:
@@ -1,22 +1,201 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/env'
|
||||
import { getContext, onMount } from 'svelte'
|
||||
import anime from 'animejs'
|
||||
import type { AnimeTimelineInstance } from 'animejs'
|
||||
import { cartOpen } from '$utils/stores/shop'
|
||||
// Components
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
||||
import ButtonCart from '$components/atoms/ButtonCart.svelte'
|
||||
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
|
||||
import PostersGrid from '$components/organisms/PostersGrid.svelte'
|
||||
import PosterLayout from '$components/layouts/PosterLayout.svelte'
|
||||
|
||||
export let product: any
|
||||
export let shopProduct: any
|
||||
|
||||
const { shop, shopLocations, posters } = getContext('shop')
|
||||
|
||||
let introEl: HTMLElement
|
||||
let navObserver: IntersectionObserver
|
||||
let scrolledPastIntro = false
|
||||
|
||||
|
||||
/**
|
||||
* Transition: Anime timeline
|
||||
*/
|
||||
let timeline: AnimeTimelineInstance
|
||||
|
||||
if (browser) {
|
||||
requestAnimationFrame(() => {
|
||||
timeline = anime.timeline({
|
||||
duration: 1600,
|
||||
easing: 'easeOutQuart',
|
||||
autoplay: false,
|
||||
})
|
||||
|
||||
// Hero image
|
||||
timeline.add({
|
||||
targets: '.shop-page__background',
|
||||
scale: [1.06, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 2400,
|
||||
}, 400)
|
||||
|
||||
// Intro top elements
|
||||
timeline.add({
|
||||
targets: '.shop-page__intro .top > *',
|
||||
translateY: [-100, 0],
|
||||
delay: anime.stagger(250),
|
||||
}, 400)
|
||||
|
||||
// Intro navbar
|
||||
timeline.add({
|
||||
targets: '.shop-page__nav .container > *',
|
||||
translateY: [100, 0],
|
||||
delay: anime.stagger(250),
|
||||
}, 700)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Reveal the nav past the Intro
|
||||
navObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
scrolledPastIntro = !entry.isIntersecting
|
||||
})
|
||||
}, {
|
||||
threshold: 0,
|
||||
rootMargin: '0px 0px 0px'
|
||||
})
|
||||
navObserver.observe(introEl)
|
||||
|
||||
// Transition in
|
||||
requestAnimationFrame(() => {
|
||||
timeline.play()
|
||||
})
|
||||
|
||||
|
||||
// Destroy
|
||||
return () => {
|
||||
navObserver && navObserver.unobserve(introEl)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<PosterLayout
|
||||
product={product}
|
||||
shopProduct={shopProduct}
|
||||
<Metas
|
||||
title="Shop – Houses Of"
|
||||
description=""
|
||||
image=""
|
||||
/>
|
||||
|
||||
|
||||
<PageTransition name="shop-page">
|
||||
<section class="shop-page__intro" bind:this={introEl}>
|
||||
<div class="top container">
|
||||
<a href="/" class="back" sveltekit:noscroll>
|
||||
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>Back to Houses Of</span>
|
||||
</a>
|
||||
|
||||
<span class="shop-title">Shop</span>
|
||||
</div>
|
||||
|
||||
<SiteTitle
|
||||
variant="inline"
|
||||
/>
|
||||
|
||||
<nav class="shop-page__nav">
|
||||
<div class="container">
|
||||
<p class="text-label">Shop your city</p>
|
||||
<nav>
|
||||
<ul>
|
||||
{#each shopLocations as { name, slug }}
|
||||
<li class:is-active={slug === product.location.slug}>
|
||||
<a href="/shop/poster-{slug}" sveltekit:prefetch sveltekit:noscroll>
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ButtonCart />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<Image
|
||||
class="shop-page__background"
|
||||
id={shop.page_heroimage.id}
|
||||
alt="photo"
|
||||
sizeKey="hero"
|
||||
sizes={{
|
||||
large: { width: 1800, height: 1200 },
|
||||
medium: { width: 1200, height: 800 },
|
||||
small: { width: 700, height: 700 },
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<nav class="shop-location"
|
||||
class:is-visible={scrolledPastIntro}
|
||||
class:is-overlaid={$cartOpen}
|
||||
>
|
||||
<ShopLocationSwitcher />
|
||||
<ButtonCart />
|
||||
</nav>
|
||||
|
||||
<section class="shop-page__about grid">
|
||||
<div class="description grid text-normal">
|
||||
<div class="description__inner">
|
||||
{@html shop.about}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PosterLayout
|
||||
product={product}
|
||||
shopProduct={shopProduct}
|
||||
/>
|
||||
|
||||
<PostersGrid {posters} />
|
||||
</PageTransition>
|
||||
|
||||
|
||||
<script context="module" lang="ts">
|
||||
import { getRandomElement } from '$utils/functions'
|
||||
|
||||
export async function load ({ page, fetch, session, stuff }) {
|
||||
// Get content from stuff
|
||||
let shopProduct: any
|
||||
|
||||
// Get a random product from the API
|
||||
const productAPI = getRandomElement(stuff.posters)
|
||||
|
||||
// Fetch this product on Swell API
|
||||
if (productAPI) {
|
||||
const shopProductRes = await fetch('/api/swell', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
action: 'getProduct',
|
||||
productId: productAPI.product_id,
|
||||
})
|
||||
})
|
||||
if (shopProductRes.ok) {
|
||||
shopProduct = await shopProductRes.json()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
props: {
|
||||
product: stuff.product,
|
||||
shopProduct: stuff.shopProduct,
|
||||
product: productAPI,
|
||||
shopProduct,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user