Basic Cart functionality

Add test-api function for contact page
This commit is contained in:
Michał Gdula 2024-04-30 14:48:32 +01:00
parent e2e68ab1fb
commit b7bc7da366
8 changed files with 142 additions and 24 deletions

View file

@ -1,9 +1,11 @@
<script>
import { get } from 'svelte/store';
import Router from 'svelte-spa-router';
import { replace, link } from 'svelte-spa-router';
import active from 'svelte-spa-router/active'
import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
import Cart from '%/lib/cart.ts';
import routes from '%/routes.js';
import Logo from '/LogoAlt.svg';
@ -14,6 +16,11 @@
cart: {path: '/cart', className: 'active'},
}
let cartLen = 0;
Cart.subscribe((value) => {
cartLen = Cart.getLength();
});
let scrollY = 0;
let width = 0;
@ -56,14 +63,18 @@
<span><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start">
<li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link>Cart</a></li>
<li use:active={links.cart}><a href="/cart" use:link>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
</ul>
{:else}
<ul>
<li use:active={links.home}><a href="/" use:link>Home</a></li>
<li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
<li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link>Cart</a></li>
<li use:active={links.cart}><a href="/cart" use:link>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
</ul>
{/if}
</nav>