Merge branch 'main' of github.com:plentymarkets/storefront-nuxt3-boil…

…erplate into feat/paypal-test
plentymarkets · Jun 10, 2024 · a9fd5ce · a9fd5ce
2 parents 8377d3e + ca9aff5
commit a9fd5ce
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/apps/web/components/ProductAttributes/AttributeImage/AttributeImage.vue b/apps/web/components/ProductAttributes/AttributeImage/AttributeImage.vue
@@ -10,25 +10,30 @@
       >
     </label>
     <div :id="'attribute-' + productAttributeGetters.getAttributeId(attribute)" class="w-full flex gap-4 flex-wrap">
-      <div
+      <SfTooltip
         v-for="item in productAttributeGetters.getAttributeValues(attribute)"
         :key="productAttributeGetters.getAttributeValueId(item)"
-        class="p-2 border border-zinc-300 rounded-md cursor-pointer hover:bg-[#3C3C4226]"
-        :class="{
-          'text-zinc-300 border-dashed': productAttributeGetters.isAttributeValueDisabled(item),
-          '!border-primary-700 bg-zinc-100': value === productAttributeGetters.getAttributeValueId(item),
-          '!ring-negative-700 !border-negative-700 ring-1': Boolean(errors['selectedValue']),
-        }"
-        @click="doUpdateValue(item)"
+        :label="getLabel(item)"
+        strategy="absolute"
+        :show-arrow="true"
+        placement="top"
       >
-        <SfTooltip :label="getLabel(item)" strategy="absolute" :show-arrow="true" placement="top">
+        <div
+          class="p-2 border border-zinc-300 rounded-md cursor-pointer hover:bg-[#3C3C4226]"
+          :class="{
+            'text-zinc-300 border-dashed': productAttributeGetters.isAttributeValueDisabled(item),
+            '!border-primary-700 bg-zinc-100': value === productAttributeGetters.getAttributeValueId(item),
+            '!ring-negative-700 !border-negative-700 ring-1': Boolean(errors['selectedValue']),
+          }"
+          @click="doUpdateValue(item)"
+        >
           <NuxtImg
             :src="getImagePath(item)"
             :alt="productAttributeGetters.getAttributeValueName(item)"
             loading="lazy"
           />
-        </SfTooltip>
-      </div>
+        </div>
+      </SfTooltip>
     </div>
     <VeeErrorMessage as="span" name="selectedValue" class="flex text-negative-700 text-sm mt-2" />
   </div>
@@ -52,7 +57,9 @@ const runtimeConfig = useRuntimeConfig();
 const domain = runtimeConfig.public?.domain ?? '';
 
 const getLabel = (item: VariationMapProductAttributeValue): string => {
-  return productAttributeGetters.isAttributeValueDisabled(item) ? t('productAttributes.seeAvailableOptions') : '';
+  return productAttributeGetters.isAttributeValueDisabled(item)
+    ? t('productAttributes.seeAvailableOptions')
+    : productAttributeGetters.getAttributeValueName(item);
 };
 
 const getImagePath = (item: VariationMapProductAttributeValue): string => {

diff --git a/docs/changelog/changelog_de.md b/docs/changelog/changelog_de.md
@@ -6,6 +6,7 @@
 
 ### Behoben
 
+- Bilder-Komponente zum Auswählen von Artikelattributen verfügt nun über einen Tooltip.
 - Wunschlisten-Button Arien-Etikett
 - PayPal-Bereich im "Artikel zum Warenkorb hinzugefügt"-Dialog und Gast-Login wird nur noch angezeigt, wenn PayPal verbunden ist.
 - Registration ohne Cloudflare Turnstile-Konfiguration ist jetzt möglich.

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -6,6 +6,7 @@
 
 ### Fixed
 
+- The image component for selecting item attributes has a tooltip.
 - Wish list button aria label
 - Hydration errors under guest login and cart
 - PayPal area in the quick checkout dialog and guest login is only displayed if PayPal is connected.