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 & Checkout:
   1. Provides a detailed breakdown of costs, including:
      1. Subtotal price before all discounts and additional 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.
   2. Includes Standard and Express Checkout CTAs

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 and / or Campaign Product
   1. Includes a promotion and / or campaign 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 promotion 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 Storefront Application, 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. Since delivery fees aren’t provided by the basket endpoint, they can be configured in the SCAYLE Panel.
   2. A disclaimer will inform users that delivery costs may change in later checkout steps.
   3. See more details in our Customization Guide.
3. Sale Discounts
   1. Separate cumulative totals for sales.
4. Promotions & Campaigns
   1. Displayed in an accordion for a detailed breakdown of discounts by promotion or campaign type, with visual support using promotion or campaign colors.
5. Final Price and Taxes
   1. The final price includes all discounts and promotions.
   2. The tax inclusion hint depends on the 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>

Checkout Options

On the Basket page, your customers have clear options to proceed with their purchase. The Storefront Application provides both a standard "Go to Checkout" button for the traditional multi-step flow and convenient Express Checkout options for a faster purchasing journey.

Standard Checkout

The "Go to Checkout" button initiates the traditional, multi-step checkout process. This flow guides the user through distinct stages for shipping, payment, and final review, offering comprehensive control and information.

Express Checkout Options

Express Checkout options offer a significantly faster way for customers to complete their purchase by leveraging digital wallets (like PayPal or Klarna). These options streamline the process by pre-filling information and reducing the number of steps.

Express Checkout buttons are displayed prominently on the Basket page, near the "Go to Checkout" button, and are part of the <scayle-express-checkout> Web Component. These buttons are only shown for express payment methods that you have configured and enabled in your SCAYLE Panel's payment settings.

To understand the full functionality and user flow of the Express Checkout feature, please refer to the comprehensive Express Checkout Guide.

Adding Express Checkout to existing projects

To add the Express Checkout feature with minimal effort, use the @scayle/storefront-cli to import the required files into your existing project. As a prerequisite, ensure your project is using @scayle/storefront-nuxt version ≥ 8.38.0.

1. Run npx @scayle/storefront-cli features add basket in your project root and copy SFExpressCheckout.client.vue and useCheckoutWebComponent.ts
2. Install the @nuxt/scripts package and add it to the modules list in nuxt.config.ts
3. First, you need to tell ESLint to ignore this custom component to avoid vue/no-undef-components errors.
   In your ESLint configuration file, add scayle-express-checkout to the ignorePatterns array for that rule://...
   typescript

   Copy
4. Next, inform the Vue compiler that this is a custom element and not a Vue component it should try to resolve.
   In your nuxt.config.ts file, add a check for the component inside the vue.compilerOptions.
   typescript

   Copy
5. To be able to resolve the correct path to the order review page, we need to add the getExpressCheckoutRoute function to the useRouteHelpers composable and return it with the other functions.
   typescript

   Copy
6. The express checkout can be used by users without an account. Therefore, we need to update middleware/authGuard.global.ts to allow users without a login to access the checkout page when using the express checkout.
   typescript

   Copy
7. Now that the checkout page can be opened without login when coming from the express checkout, we need to update pages/checkout.vue to also consume the transactionId and render when it's present.
   html

   Copy
   
   Additionally fetchCheckoutToken() can be removed from the onBeforeMount hook, since this is now automatically called by useCheckoutWebComponent().
8. With the setup complete, the last step is to use the new component.
   Place the components/basket/SFExpressCheckout.client.vue component anywhere on your basket page where you want the Express Checkout button to appear.

Customizing the Basket

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