kontextwerk/frontend/src/lib/components/pagebuilder/cart/OverlayCart.svelte

<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>