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)

src/routes/shop/__layout.svelte

@@ -3,13 +3,14 @@
     import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
     // Components
     import Metas from '$components/Metas.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import Image from '$components/atoms/Image.svelte'
     import ButtonCart from '$components/atoms/ButtonCart.svelte'
-    import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
     import NotificationCart from '$components/molecules/NotificationCart.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
+    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte';
     import Cart from '$components/organisms/Cart.svelte'
 
     export let shop: any
@@ -18,15 +19,23 @@
     export let product: any
     export let productShop: any
 
-    let navEl: HTMLElement, introEl: HTMLElement
+    let introEl: HTMLElement
     let navObserver: IntersectionObserver
+    let scrolledPastIntro = false
+
+    // Locations with an existing poster product
+    $shopLocations = locations.filter(({ slug }: any) => {
+        if (posters.find((poster: any) => poster.location.slug === slug)) {
+            return true
+        }
+    })
 
 
     onMount(async () => {
         // Reveal the nav past the Intro
         navObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
-                navEl.classList.toggle('is-visible', !entry.isIntersecting)
+                scrolledPastIntro = !entry.isIntersecting
             })
         }, {
             threshold: 0,
@@ -48,6 +57,7 @@
     image=""
 />
 
+{#key product}
 <main class="shop-page">
     <Cart />
 
@@ -66,12 +76,10 @@
                 <p class="text-label">Shop your city</p>
                 <nav>
                     <ul>
-                        {#each locations as { name, slug }}
-                            {#if posters.find(poster => poster.location.slug === slug )}
-                                <li class:is-active={slug === product.location.slug}>
-                                    <a href="/shop/poster-{slug}">{name}</a>
-                                </li>
-                            {/if}
+                        {#each $shopLocations as { name, slug }}
+                            <li class:is-active={slug === product.location.slug}>
+                                <a href="/shop/poster-{slug}">{name}</a>
+                            </li>
                         {/each}
                     </ul>
                 </nav>
@@ -92,17 +100,11 @@
         />
     </section>
 
-    <nav class="shop-location" bind:this={navEl}>
-        <dl class="shop-location__left">
-            <dt class="text-label">shop your city</dt>
-            <dd>
-                <img src="/images/icons/pin.svg" alt="">
-                <select name="" id="">
-                    <option value="melbourne">Melbourne</option>
-                </select>
-            </dd>
-        </dl>
-
+    <nav class="shop-location"
+        class:is-visible={scrolledPastIntro}
+        class:is-overlaid={$cartOpen}
+    >
+        <ShopLocationSwitcher />
         <ButtonCart />
 
         <div class="shop-location__notifications">
@@ -141,6 +143,7 @@
         </div>
     </section>
 </main>
+{/key}
 
 <slot />