Make Shop location switcher a component using a global store

Using two switchers (one in the shop nav and the other in the cart) makes possible to have the switcher over the Cart overlay (over intro)
This commit is contained in:
2021-11-07 22:40:52 +01:00
parent 3198fd8545
commit 5923afed3b
7 changed files with 140 additions and 84 deletions

View File

@@ -0,0 +1,33 @@
<script lang="ts">
import { page } from '$app/stores'
import { shopLocations } from '$utils/stores/shop'
export let isOver: boolean = false
const classes = [
'shop-locationswitcher',
isOver && 'is-over',
$$props.class
].join(' ').trim()
// Quick location change
const quickLocationChange = ({ target: { value }}: any) => {
const newPath = $page.path.split('-')[0] + `-${value}`
// goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
}
</script>
<dl class={classes}>
<dt class="text-label">Shop your city</dt>
<dd>
<svg width="14" height="17" viewBox="0 0 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 11.18a.52.52 0 0 1-.92 0L3.55 6.05a3.46 3.46 0 1 1 6.19 0L7.1 11.18Zm1.2-6.62c0-.91-.73-1.63-1.65-1.63a1.63 1.63 0 1 0 0 3.26c.92 0 1.65-.72 1.65-1.63Zm-2.88 8.18.03.05-.08 1.1 2.98.95v-3.48l.96-1.8v5.28l2.98-.95-.41-5.65-2.31.84.62-1.14 1.91-.7c.3-.09.52.16.55.46l.61 6c.04.42-.21.8-.61.93l-3.82 1.21-3.96-1.21-4.25 1.21a.54.54 0 0 1-.45-.08.4.4 0 0 1-.17-.38l.95-6.53c.04-.16.15-.3.32-.35l1.78-.57.4.77-1.59.51-.82 5.63 3.4-.97.2-2.76c.47.95.78 1.63.78 1.63Z"/>
</svg>
<select on:change={quickLocationChange}>
{#each $shopLocations as { name, slug }}
<option value={slug} selected={slug === $page.params.name}>{name}</option>
{/each}
</select>
</dd>
</dl>