Initial commit

2025-10-02 08:54:03 +02:00
commit ea54638227
1642 changed files with 53677 additions and 0 deletions
--- a/frontend/src/lib/components/pagebuilder/product/ProductPageMobile.svelte
+++ b/frontend/src/lib/components/pagebuilder/product/ProductPageMobile.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import TopRightCrinkle from "../../widgets/TopRightCrinkle.svelte"
+    import DynamicRows from "./DynamicRows.svelte"
+    import ProductConfigurator from "./ProductConfigurator.svelte"
+    import ProductExtendableBoxes from "./ProductExtendableBoxes.svelte"
+    import ProductImagePreview from "./ProductImagePreview.svelte"
+    import ProductSummary from "./ProductSummary.svelte"
+    import RecommendedProducts from "./RecommendedProducts.svelte"
+    import ProductRatings from "./widgets/ProductRatings.svelte"
+
+    export let product: BKDFProduct
+    let previewImages: Image[] = [],
+        selectedVariant: BKDFProductVariant | null = null
+</script>
+
+<div class="crinkle">
+    <TopRightCrinkle
+        edges="{false}"
+        brightColor="{false}"
+        bigVersion="{true}"
+    >
+        <svg
+            slot="icon"
+            width="72"
+            height="71"
+            viewBox="0 0 72 71"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                id="Vector 3"
+                d="M72 0V71L0 0H72Z"
+                fill="#0d0c0c"></path>
+        </svg>
+    </TopRightCrinkle>
+</div>
+<section id="productPage">
+    {#if previewImages?.length}
+        <ProductImagePreview
+            previewImages="{previewImages}"
+            mobileView="{true}"
+        />
+    {/if}
+    <div class="content-wrapper">
+        <ProductSummary
+            product="{product}"
+            productTitleAsHeading="{true}"
+        />
+        <ProductConfigurator
+            product="{product}"
+            on:colorChange="{(e) => {
+                previewImages = e.detail.previewImages
+            }}"
+            on:variantChange="{(e) => {
+                selectedVariant = e.detail.variant
+                previewImages = e.detail.previewImages
+            }}"
+            mobileFormat="{true}"
+        />
+        {#if product}
+            <DynamicRows bigCommerceProductId="{Number(product.id)}" />
+        {/if}
+        <ProductExtendableBoxes product="{product}" />
+        {#if product}
+            <ProductRatings bigCommerceProductId="{Number(product.id)}" />
+            <RecommendedProducts product="{product}" />
+        {/if}
+    </div>
+</section>
+
+<style lang="less">
+    .crinkle {
+        width: calc(100% + 5px);
+        height: 0px;
+        overflow: visible;
+        display: flex;
+        justify-content: flex-end;
+
+        top: 84px;
+        width: 100%;
+        position: -webkit-sticky;
+        position: sticky;
+        z-index: 1000;
+    }
+    #productPage {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 3rem;
+        align-items: center;
+        max-width: 100%;
+        overflow: hidden;
+
+        .content-wrapper {
+            padding: 0 var(--horizontal-default-margin);
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            width: 100%;
+            max-width: var(--normal-max-width);
+            position: relative;
+            margin-bottom: 2.4rem;
+        }
+    }
+</style>