Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 4x 4x 4x | import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { KsCard, Slider } from 'ag-ems-ui-library';
import { formatToPrice } from '../../helpers';
import { STRAPI_URL } from '../../configs/config';
import { LocalizedLink as Link } from 'gatsby-theme-i18n'
const styles = require('./UpsellProducts.module.css');
export const UpsellProduct: FC<{ product: any }> = ({ product }) => {
const { t } = useTranslation();
return (
<KsCard
classes={styles.UpsellProduct}
link={'/' + product.strapiProduct.slug}
image={
<img
draggable={false}
src={STRAPI_URL + product.strapiProduct.thumbnail.formats.thumbnail.url}
alt={product.strapiProduct.name}
/>
}
title={product.name}
linkComponent={Link}
desktopView={false}
>
<p className={styles.UpsellProductName}>{product.strapiProduct.name}</p>
<p className={styles.UpsellProductPrice}>
{`${t('from')} ${formatToPrice(product.price.regularPrice.amount.value)}`}
</p>
</KsCard>
);
};
export const UpsellProducts: FC<{ products: any[] }> = ({ products }) => {
const { t } = useTranslation();
console.groupCollapsed('Upsell Products');
console.log(products);
console.groupEnd();
const newProducts = new Array(12).fill(products[0]);
return <div className={styles.UpsellProducts}>
<h3 className={styles.UpsellProductsTitle}>{t('otherOffers')}</h3>
<div className={styles.UpsellProductsContent}>
<Slider breakpoint={1025} spaceBetween={20}>
{newProducts.map(product => (
<UpsellProduct key={product.sku} product={product} />
))}
</Slider>
</div>
</div>;
};
|