Nikita Kiselev
3cc82e45f0
Some checks are pending
Telegram Mini App Shop Builder / Compute version metadata (push) Waiting to run
Telegram Mini App Shop Builder / Run Frontend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run Backend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Waiting to run
Telegram Mini App Shop Builder / Build module. (push) Blocked by required conditions
Telegram Mini App Shop Builder / release (push) Blocked by required conditions
47 lines
1.7 KiB
Vue
47 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
v-if="blocks.blocks?.length > 0"
|
|
v-for="(block, index) in blocks.blocks"
|
|
>
|
|
<template v-if="blockTypeToComponentMap[block.type]">
|
|
<component
|
|
v-if="block.is_enabled"
|
|
:is="blockTypeToComponentMap[block.type]"
|
|
:block="block"
|
|
/>
|
|
</template>
|
|
|
|
<div v-else-if="blockTypeToComponentMap[block.type] === undefined">
|
|
<div role="alert" class="alert alert-error mx-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<EmptyBlocks v-else/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
|
|
import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
|
|
import {useBlocksStore} from "@/stores/BlocksStore.js";
|
|
import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
|
|
import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
|
|
import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
|
|
import ProductsCarouselBlock from "@/components/MainPage/Blocks/ProductsCarouselBlock.vue";
|
|
|
|
const blockTypeToComponentMap = {
|
|
slider: SliderBlock,
|
|
categories_top: CategoriesTopBlock,
|
|
products_feed: ProductsFeedBlock,
|
|
products_carousel: ProductsCarouselBlock,
|
|
error: ErrorBlock,
|
|
};
|
|
|
|
const blocks = useBlocksStore();
|
|
</script>
|