Basket

Overview

Before completing their purchase, the basket page offers users a convenient way to review and manage their selected products and understand the total cost. Users can see a detailed list of everything they've added, with options to adjust quantities or remove products entirely. The clear and comprehensive price summary ensures users know exactly what they're paying for, including the price of each product, taxes, and any applicable discounts. This gives users the confidence to proceed to checkout knowing they have full control over their order.

Key Features

1. Product List:
   1. Displays selected products with interactive product cards.
   2. Users can adjust the basket by deleting items or updating quantities.
2. Price Summary:
   1. Provides a detailed breakdown of costs, including:
      1. Subtotal price before all discounts and additonal costs.
      2. Delivery costs (with estimated information).
      3. Sale and campaign discounts.
      4. Promotion discounts.
      5. Taxes (depending on the shop's tax policy).
      6. Final price.

Product Grouping and Order

Products within the basket are grouped to distinguish between available and unavailable items. In-stock products are displayed first, followed by sold-out items, which are visually marked to avoid confusion. By default, products are arranged according to their creation date as provided by the Storefront API, but the sorting can be customized to better suit specific business needs, such as grouping items by promotion type or category. For further customization options, refer to our Customization Guide.

Product Cards and Variants

Products in the basket are represented by detailed product cards. Each product card includes:

1. Product image and wishlist button.
2. Main product details (name, brand).
3. Specifications like size and color.
4. Quantity selector (limited to 10 or max available stock).
5. Delete button with a confirmation flow.
6. Price breakdown (see Price Component Guide for more details).

Deleting an item triggers a confirmation modal to prevent accidental removal. The modal provides two clear options:

• Cancel to retain the item,
• Confirm removal to proceed with deletion.

Variants

1. Regular Product
   1. Includes all the standard components mentioned above.
2. Subscription Product
   1. Displays additional subscription conditions retrieved from customData.
   2. Changing the quantity affects the number of items included in scheduled deliveries.
   3. The same variant can appear as both a regular and subscription product simultaneously.

   

3. Sold-Out Product
   1. Highlights the sold-out state with grayed-out images and buttons.
   2. Displays a "Sold Out" banner.
   3. Hides the quantity selector.

   

4. Promotional Product
   1. Includes a promotion badge and a discount badge in the pricing.

   

5. Free Product
   1. Free product is a part of the "Buy X, Get Y" promotion.
   2. Displays a "Free" badge for clear identification.

   

Promotions

Promotions are presented in a way that balances visibility and user focus. To minimize distractions during the checkout process, only essential promotional elements are displayed. These include promotion badges on applicable products, discount details integrated into product cards, and a detailed breakdown in the price summary.

For promotions tied to a minimum order value (MOV), a dedicated banner appears at the top of the product list. This banner includes a progress bar to encourage users to add more items to qualify for the discount, providing a clear incentive to continue shopping.

To understand more how promotions work in the Boilerplate, please refer to our Promotion Feature.

Gift

The gift feature (Buy X, get Y) enhances user engagement by allowing eligible customers to select complimentary products. If a user has already added a gift through the PDP using a SFProductPromotionGifts, the gift collection will not be displayed in the basket. However, if the promotion conditions are met and no free product has been added, a collection showcasing the available gifts will appear on the basket page. This feature ensures that users are aware of their eligibility and can easily claim their free items.

Price Summary

The price summary is an integral part of the basket page, offering a clear breakdown of costs and serving as the gateway to the checkout process.

Price Breakdown

1. Subtotal
   1. Cumulative original price of all basket products (before discounts and promotions).
2. Delivery Costs
   1. Currently displayed as "From 0.00" due to delivery pricing being determined at checkout.
   2. Includes a disclaimer about pricing availability in later checkout steps.
3. Sale & Campaign Discounts
   1. Separate cumulative totals for sales and campaigns.
4. Promotions
   1. Displayed in an accordion for a detailed breakdown of discounts by promotion type, with visual support using promotion colors.
5. Final Price and Taxes
   1. The final price includes all discounts and promotions.
   2. The tax inclusion hint depends on shop policy (determined from getBasket > cost > vat > amount).

Copy

<template>
...
    <div>
        <!-- incl. VAT. -->
        <span v-if="tax > 0">{{ $t('basket.including_vat') }}</span>
        <!-- excl. VAT. -->
        <span v-if="tax === 0">{{ $t('basket.excluding_vat') }}</span>
    </div>
...
</template>
<script setup lang="ts">
//...
const tax = computed<number>(() => cost.tax.vat.amount)
//...
</script>

When ready to proceed, by clicking on the "Proceed to Checkout" button logged-in users are redirected to the checkout page, while guests are guided to the sign-in page. This ensures a smooth transition from browsing to purchasing.

Customizating the Basket

To explore the customization options for your Basket page, please refer to our Customization Guideline.