flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add some data on Shop page

Browse Source
This commit is contained in:
Félix Péault
2021-10-29 23:47:40 +02:00
parent 356b63166d
commit e3fcfacdbe
3 changed files with 118 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/routes/shop/index.svelte
View File

@@ -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>