создаю телегу товаров

components/PhotoModel.vue

@@ -0,0 +1,57 @@
+<template>
+  <UPopover
+    :mode="isMobile ? 'click' : 'hover'"
+    :ui="{ content: '--reka-popper-transform-origin: 50% -20px;' }"
+  >
+    <UButton
+      icon="i-mdi-human-handsdown"
+      label="фотомодель"
+      class="model-btn"
+    />
+
+    <template #content>
+      <div class="model-info">
+        <div
+          v-for="parameter in photoModel"
+          :key="parameter?.split(': ')[0]"
+        >
+          {{ parameter?.split(': ')[0] }} <strong>{{ parameter?.split(': ')[1] }}</strong>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const { photoModel } = useProduct()
+const isMobile = useMediaQuery('(max-width: 1280px)')
+</script>
+
+ <style scoped lang="scss">
+ .model-btn {
+  display: inline-flex !important;
+  align-self: flex-start;
+}
+
+.model-info {
+  width: 140px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 15px;
+  font-size: 14px;
+  line-height: 1.3;
+  white-space: nowrap;
+
+  & > * {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.model-info strong {
+  font-weight: 600;
+}
+</style>

components/ProductImages.vue

@@ -6,6 +6,10 @@
     >
       <img width="100%" :src="image?.src" :alt="image?.src">
     </div>
+
+    <div class="product-images__model">
+      <PhotoModel />
+    </div>
   </div>
 
   <Swiper
@@ -43,5 +47,11 @@ const { currentVariantImages } = useCurrentProduct()
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+
+  &__model {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
 }
 </style>

composables/useProduct.ts

@@ -28,6 +28,8 @@ export const useProduct = (variantId) => {
   const material = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.option)
   const size = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.option)
 
+  const photoModel = computed(() => productsData?.value?.meta_data?.find(meta => meta?.key === 'photoModel').value?.split(','))
+
   function getIdentifier(productVariant) {
     const color = getAttribute(productVariant?.attributes, 'color')?.option
     const material = getAttribute(productVariant?.attributes, 'material')?.option
@@ -68,6 +70,8 @@ export const useProduct = (variantId) => {
     material,
     size,
 
+    photoModel,
+
     variations,
 
     getAttribute,

pages/product/[id].vue

@@ -6,9 +6,7 @@
       <div class="product-info__title">
         <ProductPrice :price="currentVariant?.options[0]?.price || 0" />
 
-        <div>
+        <PhotoModel />
-          фотомодель
-        </div>
       </div>
 
       <h1>