Skip to content

Commit

Permalink
[project-base] removed neccesary space in product box (#3632)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chlebektomas
chlebektomas authored Dec 16, 2024
2 parents 6d9b504 + 4d937cd commit e1a87fb
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 53 deletions.
1 change: 1 addition & 0 deletions storefront/components/Blocks/Product/LastVisitedProducts/LastVisitedProductsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const LastVisitedProductsContent: FC<LastVisitedProductsProps> = ({ produ
productItemProps={{
visibleItemsConfig: productItemStyleProps.visibleItemsConfig,
size: productItemStyleProps.size,
textSize: 'xs',
}}
/>
) : (
Expand Down
81 changes: 45 additions & 36 deletions storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export type ProductItemProps = {
visibleItemsConfig?: ProductVisibleItemsConfigType;
size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
onClick?: (product: TypeListedProductFragment, index: number) => void;
textSize?: 'xs' | 'sm';
} & FunctionComponentProps;

export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
Expand All @@ -58,6 +59,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
className,
visibleItemsConfig = PREDEFINED_VISIBLE_ITEMS_CONFIGS.largeItem,
size = 'large',
textSize = 'sm',
onClick,
},
ref,
Expand Down Expand Up @@ -92,7 +94,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
)}

<ExtendedNextLink
className="flex select-none flex-col gap-2.5 text-text no-underline hover:text-link hover:no-underline"
className="flex h-full select-none flex-col gap-2.5 text-text no-underline hover:text-link hover:no-underline"
draggable={false}
href={product.slug}
type={product.isMainVariant ? 'productMainVariant' : 'product'}
Expand All @@ -109,18 +111,29 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
>
<ProductListItemImage product={product} size={size} visibleItemsConfig={visibleItemsConfig} />

<div className="line-clamp-3 min-h-[3.75rem] font-secondary text-sm font-semibold group-hover:text-link group-hover:underline">
<div
className={twJoin(
'grow overflow-hidden break-words font-secondary font-semibold group-hover:text-link group-hover:underline',
textSize === 'xs' ? 'text-xs' : 'text-sm',
)}
>
{product.fullName}
</div>

<div className="min-h-6 sm:min-h-7">
{visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
<ProductPrice
isPriceFromVisible={visibleItemsConfig.priceFromWord}
productPrice={product.price}
/>
)}
</div>
{product.__typename === 'MainVariant' && (
<div className="flex w-fit items-center gap-1.5 whitespace-nowrap rounded-md bg-background px-2.5 py-1.5 font-secondary text-xs group-hover:text-text">
<VariantIcon className="size-3 text-textAccent" />
{product.variantsCount} {t('variants count', { count: product.variantsCount })}
</div>
)}

{visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
<ProductPrice
className="min-h-6 sm:min-h-7"
isPriceFromVisible={visibleItemsConfig.priceFromWord}
productPrice={product.price}
/>
)}

{visibleItemsConfig.storeAvailability && (
<ProductAvailability
Expand All @@ -132,33 +145,29 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
)}
</ExtendedNextLink>

<div className="flex w-full items-center justify-between gap-1 sm:justify-normal sm:gap-2.5">
{visibleItemsConfig.addToCart && (
<ProductAction
gtmMessageOrigin={gtmMessageOrigin}
gtmProductListName={gtmProductListName}
listIndex={listIndex}
product={product}
/>
)}

{visibleItemsConfig.productListButtons && (
<>
<ProductCompareButton
isProductInComparison={isProductInComparison}
toggleProductInComparison={toggleProductInComparison}
/>
<ProductWishlistButton
isProductInWishlist={isProductInWishlist}
toggleProductInWishlist={toggleProductInWishlist}
{(visibleItemsConfig.addToCart || visibleItemsConfig.productListButtons) && (
<div className="flex w-full items-center justify-between gap-1 sm:justify-normal sm:gap-2.5">
{visibleItemsConfig.addToCart && (
<ProductAction
gtmMessageOrigin={gtmMessageOrigin}
gtmProductListName={gtmProductListName}
listIndex={listIndex}
product={product}
/>
</>
)}
</div>
{product.__typename === 'MainVariant' && (
<div className="flex w-fit items-center gap-1.5 whitespace-nowrap rounded-md bg-background px-2.5 py-1.5 font-secondary text-xs">
<VariantIcon className="size-3 text-textAccent" />
{product.variantsCount} {t('variants count', { count: product.variantsCount })}
)}

{visibleItemsConfig.productListButtons && (
<>
<ProductCompareButton
isProductInComparison={isProductInComparison}
toggleProductInComparison={toggleProductInComparison}
/>
<ProductWishlistButton
isProductInWishlist={isProductInWishlist}
toggleProductInWishlist={toggleProductInWishlist}
/>
</>
)}
</div>
)}
</li>
Expand Down
35 changes: 18 additions & 17 deletions storefront/components/Blocks/Product/ProductsList/ProductListItemPlaceholder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,13 @@ export const ProductListItemPlaceholder: FC<ProductListItemPlaceholderProps> = (
{product.fullName}
</div>

<div className="min-h-6 sm:min-h-7">
{visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
<ProductPrice
isPriceFromVisible={visibleItemsConfig.priceFromWord}
productPrice={product.price}
/>
)}
</div>
{visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
<ProductPrice
className="min-h-6 sm:min-h-7"
isPriceFromVisible={visibleItemsConfig.priceFromWord}
productPrice={product.price}
/>
)}

{visibleItemsConfig.storeAvailability && (
<ProductAvailability
Expand All @@ -60,16 +59,18 @@ export const ProductListItemPlaceholder: FC<ProductListItemPlaceholderProps> = (
)}
</ExtendedNextLink>

<div className="flex w-full items-center justify-between gap-1 sm:justify-normal sm:gap-2.5">
{visibleItemsConfig.addToCart && <Skeleton className="h-9" containerClassName="w-1/2" />}
{(visibleItemsConfig.addToCart || visibleItemsConfig.productListButtons) && (
<div className="flex w-full items-center justify-between gap-1 sm:justify-normal sm:gap-2.5">
{visibleItemsConfig.addToCart && <Skeleton className="h-9" containerClassName="w-1/2" />}

{visibleItemsConfig.productListButtons && (
<>
<Skeleton className="size-6" />
<Skeleton className="size-6" />
</>
)}
</div>
{visibleItemsConfig.productListButtons && (
<>
<Skeleton className="size-6" />
<Skeleton className="size-6" />
</>
)}
</div>
)}
</li>
);
};
1 change: 1 addition & 0 deletions storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchProductsResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const AutocompleteSearchProductsResult: FC<AutocompleteSearchProductsResu
visibleSliderItems={VISIBLE_SLIDER_ITEMS_AUTOCOMPLETE}
productItemProps={{
size: 'small',
textSize: 'xs',
visibleItemsConfig: { price: true },
onClick: (product) => {
onProductDetailRedirectHandler(product);
Expand Down
Binary file modified ...x/matrixTest.cy.ts/[Matrix] (matrix page) matrix page visit with screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sWithScreenshots.cy.ts/[Homepage] (homepage) homepage visit with screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...y.ts/[Product Detail] (product detail) product detail visit with screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e1a87fb

Please sign in to comment.