spoko-design-system 0.2.67 → 0.2.68

package/index.ts

@@ -25,6 +25,9 @@ export { default as ProductModels } from './src/components/Product/ProductModels
 export { default as ProductName } from './src/components/Product/ProductName.vue';
 export { default as ProductPositions } from './src/components/Product/ProductPositions.vue';
 export { default as ProductNumber } from './src/components/Product/ProductNumber.astro';
+export { default as ProductLink } from './src/components/Product/ProductLink.astro';
+export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
+
 
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
 export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';
@@ -55,7 +58,7 @@ export { default as getShorterDescription } from './src/utils/seo/getShorterDesc
 // Utils: Text
 
 export { getTranslation, text2paragraphs, countWords, firstSentence, removeSemicolon } from './src/utils/text';
-export { apiInfo } from './src/utils/getData';
+export { apiInfo, getData } from './src/utils/getData';
 export { default as formatDate } from './src/utils/text/formatDate';
 export { default as formatLocaleNumber } from './src/utils/text/formatLocaleNumber';
 export { default as formatPad } from './src/utils/text/formatPad';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.67",
+  "version": "0.2.68",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Product/ProductCarousel.astro

@@ -0,0 +1,36 @@
+---
+import ProductLink from "./Product/ProductLink.astro";
+
+// Get the product directly from the prop on render
+const { locale, class: className, products, isShopProduct = false, ...rest } = Astro.props;
+
+---
+
+
+{
+    products && products.length && (
+         <swiper-container slides-per-view="auto" space-between="0" class="flex"
+            itemscope itemtype="https://schema.org/ItemList">
+            {
+                products.map((product, index) => (
+                    <swiper-slide class="product-carousel" 
+                      itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" >
+                        <ProductLink productObject={product} locale={locale} index={index+1} bigTile loading="eager" isShopProduct={isShopProduct} />
+                        <div class="swiper-lazy-preloader"></div>
+                    </swiper-slide>
+                ))
+            }
+            </swiper-container>
+    )
+  }
+  
+  <style>
+    .similar-section {
+      @apply relative z-20;
+
+      &:hover {
+        content-visibility: visible;
+      }
+    }
+    
+  </style>

package/src/components/Product/ProductLink.astro

@@ -0,0 +1,101 @@
+---
+import type { Product } from 'types/index';
+
+interface Props {
+  productId?: number;
+  productObject?: Product;
+  locale: string;
+  index: number;
+  bigTile?: boolean;
+  loading?: "eager" | "lazy";
+  isShopProduct?: boolean;
+}
+
+const {
+  productId,
+  productObject,
+  bigTile,
+  locale,
+  index,
+  loading = "lazy",
+  isShopProduct = false,
+} = Astro.props;
+
+import { getProductById } from '@utils/product/getProductById';
+import { getShopProductById } from '@utils/product/getShopProductById';
+import { getProductUrl } from "@utils/product/getProductUrl";
+import { getShopProductUrl } from "@utils/product/getShopProductUrl";
+import { getProductTranslation } from "@utils/product/getProductTranslation";
+import { getImageUrl } from '@utils/getImageUrl';
+import i18next, { t } from "i18next";
+import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from "spoko-design-system";
+
+// Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
+const product = productObject || (productId ? (isShopProduct ? await getShopProductById(productId) : await getProductById(productId)) : null);
+
+// Określenie URL miniatury produktu
+const thumb = product ? (
+  isShopProduct
+    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
+    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
+) : "";
+
+// Tłumaczenie nazwy produktu jeśli dostępne
+const productTranslation = i18next.exists(`parts.${product?.number}.name`)
+  ? null
+  : productId ? await getProductTranslation(productId, product?.number || "") : null;
+ 
+// const productName = product ? (
+//   isShopProduct
+//     ? (locale === "pl" ? product.name_pl : product.name_en)
+//     : productTranslation?.name || t(`parts.${product.number}.name`)
+// ) : "";
+
+const productName = product.name || 'NO NAME';
+
+const nameFormatted = removeSemicolon(productName.toString());
+---
+
+{product && (
+  <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
+    {product.photo !== null && thumb ? (
+      <ProductImage
+        imagesApiUrl="https://api.polo.blue"
+        imageObject={{
+          src: thumb,
+          alt: productName,
+          height: '180',
+          width: '240',
+          loading
+        }}
+      />
+    ) : (
+      <img src="/1x1.png" class="bg-gray-100/70" alt={productName} />
+    )}
+  </div>
+
+  <div class={bigTile ? '' : 'sm:pl-4'}>
+    {product.price_pln && (
+      <p class="block mb-2 font-600 font-headbold text-5">
+        {getPriceFormatted(product)}
+      </p>
+    )}
+
+    <a 
+      class="product-link--url"
+      href={isShopProduct ? getShopProductUrl(product.slug, locale) : getProductUrl(product.number, locale)}
+      itemprop="url"
+      title={product.number}
+      set:html={nameFormatted}
+    />
+
+    <ProductNumber productNumber={product.number} copyDisabled={true} />
+    
+    {index !== null && (
+      <>
+        <meta itemprop="position" content={index.toString()} />
+        <meta itemprop="name" content={nameFormatted} />
+      </>
+    )}
+  </div>
+)}