How to Configure Mini Basket?

The Mini Basket is a compact and user-friendly shopping cart interface typically located in the header of a website. It provides a quick summary of the items in a user's shopping cart and can be accessed by clicking on the shopping cart icon. This feature enhances the user experience by offering quick navigation and access to cart details without navigating to a separate page.

The Mini Basket can be displayed in two styles:

1. Classic Style: The default compact view that opens below the shopping cart icon.

2. Large Sidebar Style: An expanded version that slides in from the side of the screen.

Mini Basket Classic Style​

The classic style appears as a small dropdown directly below the shopping cart icon when clicked. This style is ideal for users who prefer a compact and minimalistic design, offering quick access to their cart without taking up much screen space.

The classic style is enabled by default, and no additional configuration or modifications are required to implement it.

Mini Basket Large Sidebar Style​

The large sidebar style is designed to provide users with a comprehensive and detailed view of the items in their shopping cart. Unlike the compact dropdown style, this layout slides in from the side of the screen, occupying a significant portion of the viewport. It is particularly useful for users who wish to view their cart's contents in greater detail without leaving their current page.

To implement the large sidebar style, modify the return block in the MiniBasket() function in the src/views/header/mini-basket.tsx file as shown below.

Adjusting the Mini Basket Width If you need to modify the width of the large Mini Basket view, update the md:w-[38.5625rem] value in the CSS class definition.

Updated Code for Large Sidebar Style​

return (
    <>
      <div
        className={clsx(
          miniBasketOpen ? 'opacity-30 visible' : 'opacity-0 invisible',
          'fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-80 transition-all duration-300'
        )}
        onClick={() => {
          dispatch(closeMiniBasket());
        }}
      />
      <div
        className={clsx(
          miniBasketOpen
            ? 'flex flex-col opacity-100 visible scroll-lock p-4'
            : 'opacity-0 invisible translate-x-full md:translate-y-0',
          'fixed  bottom-0 right-0 w-full md:w-[38.5625rem] h-screen flex flex-col bg-gray-25 z-50 transition-all duration-300'
        )}
      >
        <header className="flex items-center gap-2 pb-3 border-b">
          <h3 className="text-xl font-bold">
            {t('basket.mini_basket.my_bag')}
          </h3>
          <span>
            {totalQuantity}
            {t('basket.mini_basket.items')}
          </span>
          <Icon
            name="close"
            size={16}
            className="ml-auto fill-primary hover:cursor-pointer"
            onClick={() => dispatch(closeMiniBasket())}
          />
        </header>
        {isLoading && <LoaderSpinner />} {/* TODO: Fix spinner position */}
        {isSuccess && (
          <ul
            ref={miniBasketList}
            className="overflow-y-auto lg:max-h-64 flex flex-col"
          >
            {sortedBasket.map((basketItem) => (
              <MiniBasketItem
                key={basketItem.id}
                basketItem={basketItem}
                highlightedItem={highlightedItem}
                miniBasketListRef={miniBasketList}
              />
            ))}
          </ul>
        )}
        <footer className="flex flex-col gap-3 mt-auto lg:mt-3 lg:flex-1">
          <div className="flex self-center gap-1 text-xs font-semibold">
            <span>{t('basket.mini_basket.subtotal')}</span>
            <Price value={basket?.total_amount} />
          </div>
          {/* TODO: Fix link styles */}
          <Link
            onClick={() => {
              dispatch(closeMiniBasket());
            }}
            href={ROUTES.BASKET}
            data-testid="mini-basket-view-bag"
            className="w-full flex items-center justify-center bg-primary text-primary-foreground border border-primary h-8 font-semibold transition-all hover:bg-primary-foreground hover:text-primary"
          >
            {t('basket.mini_basket.view_bag')}
          </Link>
          <Link
            href="/"
            className="h-auto p-0 font-semibold underline self-center"
            data-testid="mini-basket-continue-shopping"
          >
            {t('basket.mini_basket.continue_shopping')}
          </Link>
        </footer>
      </div>
    </>
  );