107 lines
3.0 KiB
Svelte
107 lines
3.0 KiB
Svelte
<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>
|