45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/shop-locationswitcher";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { goto } from '$app/navigation'
|
|
import { getContext, tick } from 'svelte'
|
|
import { shopCurrentProductSlug } from '$utils/stores/shop'
|
|
import { smoothScroll } from '$utils/stores'
|
|
|
|
export let isOver: boolean = false
|
|
|
|
const { shopLocations }: any = getContext('shop')
|
|
|
|
const classes = [
|
|
'shop-locationswitcher',
|
|
isOver && 'is-over',
|
|
$$props.class
|
|
].join(' ').trim()
|
|
|
|
|
|
// Quick location change
|
|
const quickLocationChange = async ({ target: { value }}: any) => {
|
|
const pathTo = `/shop/poster-${value}`
|
|
goto(pathTo, { replaceState: true, noscroll: true, keepfocus: true })
|
|
|
|
// Scroll to anchor
|
|
await tick()
|
|
$smoothScroll.scrollTo('#poster', { duration: 2 })
|
|
}
|
|
</script>
|
|
|
|
<dl class={classes}>
|
|
<dt class="text-label">Choose a city</dt>
|
|
<dd>
|
|
<svg width="18" height="18">
|
|
<use xlink:href="#icon-map-pin" />
|
|
</svg>
|
|
<select on:change={quickLocationChange}>
|
|
{#each shopLocations as { name, slug }}
|
|
<option value={slug} selected={slug === $shopCurrentProductSlug}>{name}</option>
|
|
{/each}
|
|
</select>
|
|
</dd>
|
|
</dl> |