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

Create shop page

Browse Source 
Make components: poster, poster product
This commit is contained in:
Shelby Kay
2021-10-27 22:48:31 +02:00
parent ad1b57fef2
commit 68f9743f17
9 changed files with 492 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/shop.svelte
View File

@@ -1 +0,0 @@
<h1>Let's sell shit</h1>

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

@@ -0,0 +1,120 @@
<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>