Alexandr SaVBaD Waltz
761fecf67f
Fixes: 1) Replace `ElNotification` calls with `useNotification` utility across all authentication and user-related composables; 2) Add missing semicolons in multiple index exports and styled components; 3) Resolve issues with reactivity in `useStore` composable by renaming and restructuring product variables; Extra: 1) Refactor localized strings and translations for better readability and maintenance; 2) Tweak styles including scoped styles, z-index adjustments, and SCSS mixins; 3) Remove unused components and imports to streamline storefront layout.
537 lines
No EOL
12 KiB
Vue
537 lines
No EOL
12 KiB
Vue
<template>
|
|
<div class="product" v-if="product">
|
|
<div class="container">
|
|
<div class="product__wrapper">
|
|
<h1 class="product__title">{{ product.name }}</h1>
|
|
<div class="product__block">
|
|
<div class="product__images">
|
|
<div class="product__images-gallery">
|
|
<div
|
|
v-for="(image, idx) in images"
|
|
:key="idx"
|
|
@click="selectImage(image)"
|
|
:class="[{ active: image === selectedImage }]"
|
|
>
|
|
<nuxt-img
|
|
:src="image"
|
|
:alt="product.name"
|
|
format="webp"
|
|
densities="x1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<nuxt-img
|
|
:src="selectedImage"
|
|
:alt="product.name"
|
|
class="product__images-main"
|
|
format="webp"
|
|
densities="x1"
|
|
/>
|
|
</div>
|
|
<div class="product__center">
|
|
<p class="product__center-description">{{ product.description }}</p>
|
|
<p
|
|
class="product__center-characteristic"
|
|
@click="scrollTo('characteristics')"
|
|
>
|
|
{{ t('product.characteristics') }}
|
|
</p>
|
|
</div>
|
|
<div class="product__info">
|
|
<div class="product__info-inner">
|
|
<div class="product__info-top">
|
|
<p>{{ t('cards.product.stock') }} {{ product.quantity }}</p>
|
|
<nuxt-img
|
|
:src="product.brand.smallLogo"
|
|
:alt="product.brand.name"
|
|
format="webp"
|
|
densities="x1"
|
|
/>
|
|
</div>
|
|
<el-rate
|
|
class="white"
|
|
v-model="rating"
|
|
allow-half
|
|
disabled
|
|
/>
|
|
<div class="product__info-price">{{ product.price }}</div>
|
|
<div class="product__info-bottom">
|
|
<ui-button
|
|
class="product__info-button"
|
|
>
|
|
{{ t('buttons.addToCart') }}
|
|
</ui-button>
|
|
<div class="product__info-wishlist">
|
|
<icon name="mdi:cards-heart-outline" size="28" />
|
|
<!-- <icon name="mdi:cards-heart" size="28" />-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<client-only>
|
|
<div class="characteristics" id="characteristics">
|
|
<div class="characteristics__wrapper">
|
|
<h6 class="characteristics__title">{{ t('product.characteristics') }}</h6>
|
|
<div class="characteristics__list">
|
|
<div
|
|
class="characteristics__column"
|
|
v-for="group in attributes"
|
|
:key="group.uuid"
|
|
>
|
|
<h6 class="characteristics__column-title">{{ group.name }}</h6>
|
|
<p
|
|
class="characteristics__item"
|
|
v-for="item in group.items"
|
|
:key="item.uuid"
|
|
>
|
|
<span class="characteristics__item-label"><span>{{ item.name }}</span></span>
|
|
<span class="characteristics__item-value">{{ item.valuesStr }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
<div class="similar">
|
|
<h6 class="similar__title">{{ t('product.similar') }}</h6>
|
|
<div class="similar__inner">
|
|
<div class="similar__button prev" ref="prevButton">
|
|
<icon name="material-symbols:arrow-back-ios-new-rounded" size="30" />
|
|
</div>
|
|
<swiper
|
|
class="similar__swiper"
|
|
:modules="[Navigation]"
|
|
:spaceBetween="30"
|
|
:breakpoints="{
|
|
200: {
|
|
slidesPerView: 4
|
|
}
|
|
}"
|
|
:navigation="{ prevEl: prevButton, nextEl: nextButton }"
|
|
>
|
|
<swiper-slide
|
|
v-for="prod in products"
|
|
:key="prod.node.uuid"
|
|
>
|
|
<cards-product
|
|
:product="prod.node"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div class="similar__button next" ref="nextButton">
|
|
<icon name="material-symbols:arrow-back-ios-new-rounded" size="30" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useProductBySlug, useProducts} from "~/composables/products";
|
|
import {usePageTitle} from "~/composables/utils";
|
|
import {useRouteParams} from "@vueuse/router";
|
|
import {useScrollTo} from "~/composables/scrollTo";
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import 'swiper/css';
|
|
import 'swiper/css/navigation';
|
|
import {Navigation} from "swiper/modules";
|
|
|
|
const route = useRoute();
|
|
const {t} = useI18n();
|
|
|
|
const { setPageTitle } = usePageTitle();
|
|
const { scrollTo } = useScrollTo();
|
|
|
|
const slug = useRouteParams<string>('slug');
|
|
|
|
const { product } = await useProductBySlug(slug.value);
|
|
const { products, getProducts } = await useProducts();
|
|
await getProducts({
|
|
categoriesSlugs: product.value?.category.slug
|
|
})
|
|
|
|
const images = computed<string[]>(() =>
|
|
product.value
|
|
? product.value.images.edges.map(e => e.node.image)
|
|
: []
|
|
);
|
|
|
|
const rating = computed(() => {
|
|
return product.value?.feedbacks.edges[0]?.node?.rating ?? 3;
|
|
});
|
|
|
|
const attributes = computed(() => {
|
|
const edges = product.value?.attributeGroups.edges ?? [];
|
|
|
|
const mainIndex = edges.findIndex(e => e.node.name === 'Основные характеристики');
|
|
const ordered = mainIndex >= 0
|
|
? [edges[mainIndex], ...edges.slice(0, mainIndex), ...edges.slice(mainIndex + 1)]
|
|
: edges;
|
|
|
|
return ordered.map(groupEdge => {
|
|
const { node } = groupEdge
|
|
return {
|
|
uuid: node.uuid,
|
|
name: node.name,
|
|
items: node.attributes.map(attr => ({
|
|
uuid: attr.uuid,
|
|
name: attr.name,
|
|
valuesStr: attr.values.map(v => v.value).join(', ')
|
|
}))
|
|
};
|
|
});
|
|
});
|
|
|
|
const selectedImage = ref<string>(images.value[0] ?? '');
|
|
const selectImage = (image: string) => {
|
|
selectedImage.value = image;
|
|
};
|
|
|
|
const prevButton = ref<HTMLElement | null>(null);
|
|
const nextButton = ref<HTMLElement | null>(null);
|
|
|
|
setPageTitle(product.value?.name ?? 'Product');
|
|
|
|
watch(
|
|
() => route.params.slug,
|
|
async (newSlug) => {
|
|
if (typeof newSlug === 'string') {
|
|
const { product } = await useProductBySlug(newSlug);
|
|
setPageTitle(product.value?.name ?? 'Product');
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.product {
|
|
margin-top: 25px;
|
|
|
|
&__title {
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #5743b5;
|
|
color: #5743b5;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__block {
|
|
margin-top: 25px;
|
|
border-radius: $default_border_radius;
|
|
background-color: $white;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 50px;
|
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&__images {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
|
|
&-gallery {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
& div {
|
|
cursor: pointer;
|
|
width: 75px;
|
|
height: 75px;
|
|
padding: 5px;
|
|
border-radius: $default_border_radius;
|
|
background-color: $white;
|
|
border: 2px solid $white;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
box-shadow: 0 0 10px 1px $accent;
|
|
|
|
&.active {
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
border: 2px solid $accent;
|
|
}
|
|
|
|
& img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: $default_border_radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-main {
|
|
width: 400px;
|
|
height: 400px;
|
|
border-radius: $default_border_radius;
|
|
object-fit: contain;
|
|
border: 2px solid $accent;
|
|
}
|
|
}
|
|
|
|
&__center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
|
|
&-description {
|
|
color: $accent;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&-characteristic {
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
color: $accent;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
|
|
@include hover {
|
|
color: $accentDark;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__info {
|
|
width: 400px;
|
|
flex-shrink: 0;
|
|
border-radius: $default_border_radius;
|
|
background-color: $accent;
|
|
padding: 5px;
|
|
|
|
&-inner {
|
|
border-radius: $default_border_radius;
|
|
border: 2px solid $white;
|
|
padding: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
}
|
|
|
|
&-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
|
|
& p {
|
|
color: $white;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
& img {
|
|
width: 75px;
|
|
border-radius: $default_border_radius;
|
|
}
|
|
}
|
|
|
|
&-price {
|
|
width: fit-content;
|
|
background-color: $accentDark;
|
|
border-radius: $default_border_radius;
|
|
border: 1px solid $white;
|
|
padding: 7px 20px;
|
|
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
color: $white;
|
|
}
|
|
|
|
&-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&-button {
|
|
width: unset !important;
|
|
padding-inline: 25px !important;
|
|
background-color: $white !important;
|
|
color: $accent !important;
|
|
|
|
font-size: 20px !important;
|
|
|
|
@include hover {
|
|
background-color: #e3e3e3 !important;
|
|
}
|
|
}
|
|
|
|
&-wishlist {
|
|
cursor: pointer;
|
|
width: 41px;
|
|
height: 41px;
|
|
flex-shrink: 0;
|
|
background-color: $white;
|
|
border-radius: $default_border_radius;
|
|
display: grid;
|
|
place-items: center;
|
|
transition: 0.2s;
|
|
|
|
font-size: 22px;
|
|
color: $accent;
|
|
|
|
@include hover {
|
|
background-color: #e3e3e3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.characteristics {
|
|
padding-top: 100px;
|
|
|
|
&__wrapper {
|
|
background-color: $white;
|
|
border-radius: $default_border_radius;
|
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
|
padding: 20px;
|
|
}
|
|
|
|
&__title {
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid $accentDark;
|
|
color: $black;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&__list {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit,minmax(100px, 30%));
|
|
gap: 40px;
|
|
}
|
|
|
|
&__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
&-title {
|
|
margin-bottom: 5px;
|
|
color: $black;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
display: grid;
|
|
grid-template-columns: repeat(2,1fr);
|
|
width: 100%;
|
|
gap: 5px;
|
|
font-size: 14px;
|
|
|
|
&-label {
|
|
position: relative;
|
|
font-weight: 500;
|
|
|
|
& span {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: $white;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
&::after {
|
|
border-bottom: 1px dashed $accent;
|
|
content: "";
|
|
min-width: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 1em;
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
& span {
|
|
&:first-child {
|
|
& span {
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.similar {
|
|
margin-top: 100px;
|
|
background-color: $white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
padding: 25px 10px 0 10px;
|
|
border-radius: $default_border_radius;
|
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
|
|
|
&__title {
|
|
padding-bottom: 10px;
|
|
margin-inline: 15px;
|
|
border-bottom: 2px solid $accentDark;
|
|
color: $black;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&__inner {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
&__swiper {
|
|
padding-block: 25px;
|
|
padding-inline: 25px;
|
|
}
|
|
|
|
&__button {
|
|
cursor: pointer;
|
|
height: fit-content;
|
|
margin-block: auto;
|
|
flex-shrink: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
padding-inline: 10px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background-color: $white;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
background-color: $accentLight;
|
|
|
|
& span {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
& span {
|
|
transition: 0.2s;
|
|
color: $accent;
|
|
}
|
|
|
|
&.next {
|
|
& span {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |