jcreek/SvelteKitSaasBoilerplate
1
0
Fork 0
mirror of https://github.com/jcreek/SvelteKitSaasBoilerplate.git synced 2026-07-15 12:03:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Add basket functionality to all pages

Browse Source
This commit is contained in:
Josh Creek
2024-05-05 12:36:08 +01:00
parent 5d9576f21f
commit f0448d2506
1 changed files with 26 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+26 -30
View File
@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import 'tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { basket, type Basket, type Item } from '$lib/stores/basket.js';
import { user } from '$lib/stores/user.js'; import { user } from '$lib/stores/user.js';
import { type User } from '@supabase/auth-js'; import { type User } from '@supabase/auth-js';
import SignIn from '$lib/components/SignIn.svelte'; import SignIn from '$lib/components/SignIn.svelte';
@@ -16,6 +17,12 @@
}); });
onDestroy(unsubscribe); onDestroy(unsubscribe);
let localBasket: Basket;
const unsubscribeToBasket = basket.subscribe((value) => {
localBasket = value;
});
onDestroy(unsubscribeToBasket);
onMount(async () => { onMount(async () => {
await getUser(); await getUser();
}); });
@@ -67,7 +74,7 @@
<ul <ul
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
> >
<li><a href="/">Item 1</a></li> <li><a href="/products">Products</a></li>
<li> <li>
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a>Parent</a> <a>Parent</a>
@@ -83,7 +90,7 @@
</div> </div>
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<li><a href="/">Item 1</a></li> <li><a href="/products">Products</a></li>
<li> <li>
<details> <details>
<summary>Parent</summary> <summary>Parent</summary>
@@ -97,35 +104,24 @@
</ul> </ul>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div class="dropdown dropdown-end"> <a href="/checkout" class="btn btn-ghost btn-circle">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle"> <div class="indicator">
<div class="indicator"> <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
class="h-5 w-5" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke="currentColor"
stroke="currentColor" ><path
><path stroke-linecap="round"
stroke-linecap="round" stroke-linejoin="round"
stroke-linejoin="round" stroke-width="2"
stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg
/></svg >
> <span class="badge badge-sm indicator-item">{localBasket.items.length}</span>
<span class="badge badge-sm indicator-item">8</span>
</div>
</div> </div>
<div class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow"> </a>
<div class="card-body">
<span class="font-bold text-lg">8 Items</span>
<span class="text-info">Subtotal: $999</span>
<div class="card-actions">
<a class="btn btn-primary btn-block" href="/checkout">View basket</a>
</div>
</div>
</div>
</div>
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar"> <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full"> <div class="w-10 rounded-full">