Initial commit
This commit is contained in:
200
frontend/src/lib/components/pagebuilder/cart/OverlayCart.svelte
Normal file
200
frontend/src/lib/components/pagebuilder/cart/OverlayCart.svelte
Normal file
@@ -0,0 +1,200 @@
|
||||
<script
|
||||
lang="ts"
|
||||
context="module"
|
||||
>
|
||||
import "simplebar"
|
||||
import "simplebar/dist/simplebar.css"
|
||||
import ResizeObserver from "resize-observer-polyfill"
|
||||
if (typeof window !== "undefined") window.ResizeObserver = ResizeObserver
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { mdiCartCheck } from "@mdi/js"
|
||||
import { getCart } from "../../../functions/CommerceAPIs/bigCommerce/cart"
|
||||
import { deleteCookie, getCookie } from "../../../functions/utils"
|
||||
import Icon from "../../widgets/Icon.svelte"
|
||||
import CartProducts from "./CartProducts.svelte"
|
||||
import Loader from "../Loader.svelte"
|
||||
import { newNotification } from "../../../store"
|
||||
import { minimumForFreeShipping } from "../../../../config"
|
||||
|
||||
const cartId = getCookie("cartId")
|
||||
export let cart: BKDFCart | null = null,
|
||||
hideActions = false,
|
||||
showQuantity: boolean = false,
|
||||
shippingIncludedInTotal = false
|
||||
|
||||
let loading = false
|
||||
async function setCart(id: string) {
|
||||
loading = true
|
||||
cart = await getCart(id).catch(() => {
|
||||
loading = false
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Fehler beim Laden des Warenkorbs. Bitte laden Sie die Seite neu.`,
|
||||
})
|
||||
deleteCookie("cartId")
|
||||
})
|
||||
loading = false
|
||||
}
|
||||
|
||||
async function refetchCartAndGoToCheckout() {
|
||||
loading = true
|
||||
cart = await getCart(cartId).catch(() => {
|
||||
loading = false
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Fehler beim Laden des Warenkorbs. Bitte laden Sie die Seite neu.`,
|
||||
})
|
||||
deleteCookie("cartId")
|
||||
})
|
||||
loading = false
|
||||
if (cart) {
|
||||
window.location.href = cart.checkoutUrl
|
||||
}
|
||||
}
|
||||
if (cartId && !cart) setCart(cartId)
|
||||
</script>
|
||||
|
||||
{#if cart}
|
||||
<div
|
||||
class="product-listing-wrapper"
|
||||
data-simplebar
|
||||
>
|
||||
<section class="product-listing-inner">
|
||||
<CartProducts
|
||||
bind:cart="{cart}"
|
||||
on:removeCart="{() => (cart = null)}"
|
||||
hideActions="{hideActions}"
|
||||
showQuantity="{showQuantity}"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<section
|
||||
class="cart-summary"
|
||||
style="{cart.checkoutUrl ? '' : 'height: unset'} "
|
||||
>
|
||||
{#if Number(cart.cost.discountedAmount.amount) > 0}
|
||||
<div class="discount">
|
||||
<div>Rabatt</div>
|
||||
<div>-{cart.cost.discountedAmount.amount} €</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if Number(cart?.cost?.couponDiscount?.amount || 0) > 0}
|
||||
<div class="discount">
|
||||
<div>Rabatt Codes</div>
|
||||
<div>-{cart.cost.couponDiscount.amount} €</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="discount">
|
||||
<div>Versand</div>
|
||||
<div>
|
||||
{#if Number(cart.cost.amount.amount) >= minimumForFreeShipping}
|
||||
<span>Kostenfrei</span>
|
||||
{:else}
|
||||
<span>5,00 €</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<em>Gesamt</em>
|
||||
<div>
|
||||
{(
|
||||
Number(cart.cost.amount.amount) +
|
||||
(Number(cart.cost.amount.amount) >= minimumForFreeShipping || shippingIncludedInTotal ? 0 : 5)
|
||||
).toFixed(2)} €
|
||||
</div>
|
||||
</div>
|
||||
{#if cart.checkoutUrl}
|
||||
<button
|
||||
class="checkout"
|
||||
on:click="{() => refetchCartAndGoToCheckout()}"
|
||||
><Icon path="{mdiCartCheck}" /> <span>Zur Kasse</span></button
|
||||
>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if loading}
|
||||
<Loader size="3" />
|
||||
{:else}
|
||||
<p class="no-products">Keine Produkte im Warenkorb</p>
|
||||
{/if}
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../assets/css/variables.less";
|
||||
.no-products {
|
||||
padding-left: 90px;
|
||||
@media @mobile {
|
||||
padding-left: 38px;
|
||||
}
|
||||
}
|
||||
.product-listing-wrapper {
|
||||
width: 100%;
|
||||
max-height: calc(100% - 255px);
|
||||
@media @mobile {
|
||||
max-height: calc(100% - 200px);
|
||||
}
|
||||
flex-grow: 1;
|
||||
.product-listing-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 24px 1rem 24px 90px;
|
||||
@media @mobile {
|
||||
padding: 24px 2.8rem 24px 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-summary {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
padding: 24px 1rem 24px 90px;
|
||||
@media @mobile {
|
||||
padding: 24px 2rem 24px 38px;
|
||||
}
|
||||
border-top: 1px solid var(--text-300);
|
||||
height: 255px;
|
||||
@media @mobile {
|
||||
height: 200px;
|
||||
padding-top: 1.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
}
|
||||
.discount,
|
||||
.total {
|
||||
padding: 0.6rem 1.2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.discount {
|
||||
border-bottom: 1px solid var(--text-300);
|
||||
}
|
||||
.total {
|
||||
background-color: var(--bg-100);
|
||||
color: var(--neutral-white);
|
||||
em {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 0.7rem;
|
||||
}
|
||||
}
|
||||
.checkout {
|
||||
width: 100%;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--neutral-white);
|
||||
font-size: 1rem;
|
||||
line-height: 0.7rem;
|
||||
background-color: var(--primary-100);
|
||||
box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 35px 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user