Customization

The basket page represents a critical opportunity to optimize the user experience and drive business results. By customizing its elements, tenants can effectively guide users toward completing their purchases, improve conversion rates, and reinforce brand loyalty. The following detailed suggestions outline how to meet both user needs and business objectives.

Price Summary: A Unified Discount Approach

The price summary section can be optimized by combining all discounts — including sale, campaign, and promotional discounts — into a single line item. This approach simplifies the pricing breakdown, making it easier for users to see their total savings at a glance.

For those who prefer more detailed insights, an expandable section can be still included to provide a breakdown of the combined discounts. This level of customization allows for a more streamlined user experience, reducing visual clutter while still providing transparency for users who want more details.

Example of a unified discount calculation:

html

Copy

<template>
  <section class="flex flex-col gap-4 text-base font-semi-bold-variable leading-3.5">
    <ul class="flex flex-col gap-4">
      <li class="flex justify-between text-red">
        <h2>{{ $t('basket.summary.reduction') }}</h2>
        <span data-testid="basket-discount-total">
          {{ formatCurrency(-Math.abs(totalReduction)) }}
        </span>
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { BasketTotalPrice } from '@scayle/storefront-nuxt'
import { useFormatHelpers } from '#storefront/composables'

const { formatCurrency } = useFormatHelpers()

const { cost } = defineProps<{
  cost: BasketTotalPrice
}>()

const totalReduction = computed(() => {
  return cost.appliedReductions.reduce(
    (total, { amount }) => total + amount.absoluteWithTax,
    0,
  )
})
</script>

Product Sorting: Based on Promotions, Product Name, and Size

Customizing the product sorting logic allows for better organization of the basket contents. For example:

• Promotions: Sort products by active promotions, such as "Buy One, Get One Free" or "Seasonal Discounts," and visually separate them with headers.
• Product Name: Alphabetical sorting by product name ensures a tidy and predictable layout.
• Size: Especially for fashion or footwear stores, sorting products by size within the same category can make it easier for users to review their selections.

These grouping methods can be dynamically enabled based on the nature of the shop or user preferences.

Example of items sorted by name:

typescript

Copy

import { getFirstAttributeValue } from '@scayle/storefront-nuxt'

// ...

const groupedBasketItems = computed(() => {
  const sortedBasketItems = (basketItems.value || []).toSorted(
    (itemA, itemB) => {
      const nameA =
        getFirstAttributeValue(itemA.product?.attributes, 'name')?.label ?? ''
      const nameB =
        getFirstAttributeValue(itemB.product?.attributes, 'name')?.label ?? ''
      return nameA.localeCompare(nameB)
    },
  )
  return Object.groupBy(sortedBasketItems, (item) => item.status)
})

Adding Payment Method Icons

To build trust and improve transparency, adding icons for available payment methods at the bottom of the basket page is a valuable customization. These icons can include widely recognized methods such as credit cards, PayPal, or local payment solutions. Ensuring the icons are up-to-date and styled to match the page's design will maintain a polished appearance.

To add a new icon, place it in the /nuxt/assets/icons directory. The icon will then be accessible as a component named Icon<IconFileName>. For example, if you add an icon named CreditCard-MasterCard.svg, you can use it like this:

html

Copy

<section class="flex flex-col gap-4">
  <!-- ... -->
  <SFButton size="xl" is-full-width variant="accent" @click="goToCheckout">
    {{ $t('basket.checkout_label') }}
  </SFButton>
  <div id="paymentProvider" class="flex justify-between">
    <IconCreditCardMasterCard />
    <!-- ... -->
  </div>
</section>

Deleting Items: Enhancing the Flow

The item deletion flow can be redesigned to improve usability and efficiency. Instead of using a separate modal for confirmation, consider integrating the delete option directly into the product card layout. A confirmation step could take the form of an "Undo" option that temporarily keeps the item visible in the basket after removal. This approach offers a seamless experience while still safeguarding against accidental deletions. The undo action should include a timer (e.g., 5–10 seconds) for users to act before the item is permanently removed.