Add some data on Shop page
This commit is contained in:
0
src/routes/shop/[product].svelte
Normal file
0
src/routes/shop/[product].svelte
Normal file
118
src/routes/shop/__layout.svelte
Normal file
118
src/routes/shop/__layout.svelte
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// Components
|
||||||
|
import Metas from '$components/Metas.svelte'
|
||||||
|
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
||||||
|
import Image from '$components/atoms/Image.svelte'
|
||||||
|
import PosterProduct from '$components/organisms/PosterProduct.svelte'
|
||||||
|
import Poster from '$components/molecules/Poster.svelte'
|
||||||
|
import EmailForm from '$components/molecules/EmailForm.svelte'
|
||||||
|
|
||||||
|
export let shop: any
|
||||||
|
export let locations: any
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Metas
|
||||||
|
title="Houses Of"
|
||||||
|
description=""
|
||||||
|
image=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main class="shop-page">
|
||||||
|
<section class="shop-page__intro">
|
||||||
|
<a href="/" class="back">
|
||||||
|
Back to Houses Of
|
||||||
|
</a>
|
||||||
|
<span class="shop-title">Shop</span>
|
||||||
|
|
||||||
|
<SiteTitle
|
||||||
|
variant="inline"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<header class="shop-page__header">
|
||||||
|
<div class="container">
|
||||||
|
<p class="text-label">Shop your city</p>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
{#each locations as { name, slug }}
|
||||||
|
<li>
|
||||||
|
<a href="/shop/poster-{slug}">{name}</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<button class="cart">
|
||||||
|
<span>2</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<Image
|
||||||
|
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>
|
||||||
|
|
||||||
|
<section class="shop-page__about grid">
|
||||||
|
<p class="description text-normal">
|
||||||
|
Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<PosterProduct />
|
||||||
|
|
||||||
|
<section class="shop-page__posters grid">
|
||||||
|
<h3>View all of our available posters</h3>
|
||||||
|
<div class="set">
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
<Poster slug="melbourne" />
|
||||||
|
</div>
|
||||||
|
<div class="subscribe">
|
||||||
|
<p>Subscribe to be notified when new posters become available</p>
|
||||||
|
<EmailForm />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
import { fetchAPI } from '$utils/api'
|
||||||
|
|
||||||
|
export async function load ({ page, fetch, session, stuff }) {
|
||||||
|
const res = await fetchAPI(`
|
||||||
|
query {
|
||||||
|
shop {
|
||||||
|
page_heroimage { id }
|
||||||
|
}
|
||||||
|
|
||||||
|
location (
|
||||||
|
filter: { has_poster: { _eq: true }},
|
||||||
|
sort: "name"
|
||||||
|
) {
|
||||||
|
name
|
||||||
|
slug
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
const { data } = res
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
shop: data.shop,
|
||||||
|
locations: data.location,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { getContext } from 'svelte'
|
|
||||||
import { page } from '$app/stores'
|
|
||||||
// Components
|
|
||||||
import Metas from '$components/Metas.svelte'
|
|
||||||
import SiteTitle from '$components/atoms/SiteTitle.svelte';
|
|
||||||
import Image from '$components/atoms/Image.svelte';
|
|
||||||
import PosterProduct from '$components/organisms/PosterProduct.svelte';
|
|
||||||
import Poster from '$components/molecules/Poster.svelte';
|
|
||||||
import Newsletter from '$components/organisms/Newsletter.svelte';
|
|
||||||
import EmailForm from '$components/molecules/EmailForm.svelte';
|
|
||||||
|
|
||||||
export let photos: any
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Metas
|
|
||||||
title="Houses Of"
|
|
||||||
description=""
|
|
||||||
image=""
|
|
||||||
/>
|
|
||||||
|
|
||||||
<main class="shop-page">
|
|
||||||
<header class="shop-page__header">
|
|
||||||
<p class="text-label">Shop your city</p>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="#">Bordeaux</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Brisbane</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Melbourne</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Montpellier</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Occitanie</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Toulouse</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div class="cart">
|
|
||||||
<span>2 items</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="shop-page__intro">
|
|
||||||
<Image
|
|
||||||
id="d439adf1-2391-415b-bb24-232839f142d4"
|
|
||||||
sizeKey="photo-list"
|
|
||||||
width={1600}
|
|
||||||
height={1000}
|
|
||||||
alt="photo"
|
|
||||||
/>
|
|
||||||
<SiteTitle
|
|
||||||
variant="inline"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="shop-page__about grid">
|
|
||||||
<p class="description text-normal">Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.</p>
|
|
||||||
</section>
|
|
||||||
<PosterProduct />
|
|
||||||
|
|
||||||
<section class="shop-page__posters grid">
|
|
||||||
<h3>View all of our available posters</h3>
|
|
||||||
<div class="set">
|
|
||||||
<Poster />
|
|
||||||
<Poster />
|
|
||||||
<Poster />
|
|
||||||
<Poster />
|
|
||||||
<Poster />
|
|
||||||
<Poster />
|
|
||||||
</div>
|
|
||||||
<div class="subscribe">
|
|
||||||
<p>Subscribe to be notified when new posters become available</p>
|
|
||||||
<EmailForm />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<script context="module" lang="ts">
|
|
||||||
import { fetchAPI } from '$utils/api'
|
|
||||||
|
|
||||||
export async function load ({ page, fetch, session, stuff }) {
|
|
||||||
const res = await fetchAPI(`
|
|
||||||
query {
|
|
||||||
photo (limit: 11, sort: ["-date_created"]) {
|
|
||||||
slug
|
|
||||||
title
|
|
||||||
city
|
|
||||||
location {
|
|
||||||
name
|
|
||||||
slug
|
|
||||||
country {
|
|
||||||
slug
|
|
||||||
name
|
|
||||||
flag { id }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
image { id }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
const { data } = res
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
photos: data.photo,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user