Cart page performance configuration

Cart page performance is crucial for providing a smooth and efficient shopping experience for your customers. This guideline outlines best practices and configurations to help you optimize the performance of the cart, basket, and checkout pages in Spryker-based projects.

1. Prerequisites

Before implementing performance configurations, ensure that you have installed the latest packages and modules in your Spryker project. These include:

composer require spryker/cart:"^7.16.0" \
    spryker/merchant-product-offer:"^1.11.0" \
    spryker/money:"^2.15.0" \
    spryker/price-cart-connector:"^6.13.0" \
    spryker/price-product:"^4.49.0" \
    spryker/product-bundle:"^7.27.0" \
    spryker/product-relation-storage:"^2.6.0" \
    spryker-shop/cart-page:"^3.56.0" \
    spryker-shop/merchant-widget:"^1.5.0" \
    spryker-shop/product-alternative-widget:"^1.6.0" \
    spryker-shop/product-detail-page:"^3.27.0" \
    spryker-shop/product-relation-widget:"^1.4.0" \
    spryker-shop/product-replacement-for-widget:"^1.6.0" \
    spryker-shop/shop-application:"^1.16.0" \
    spryker-shop/shop-ui:"^1.100.0 

2. Configurations

To enhance cart page performance, implement the following configurations:

2.1 Enable Caching

By default, the cart page recalculates on every request. To improve performance, enable caching for the cart page by configuring the cache settings in the CartPageConfig class.

To disable cart recalculation on a cart page request, use the following configuration:

    public function isQuoteValidationEnabled(): bool
    {
        return false;
    }

To disable cart recalculation on every AJAX request, use the following configuration:

    public function isQuoteValidationEnabledForAjaxCartItems(): bool
    {
        return false;
    }

Note: In both cases, the cart recalculates only when items are added or removed. Ensure that your project requirements permit disabling cart recalculation.

To enable cart recalculation while improving performance, set a time limit for recalculation:

    public function getQuoteValidationCacheTtl(): int
    {
        return 300; // Time in seconds
    }

In this case, the cart recalculates when items are added or removed and when the customer opens the cart after five minutes (300 seconds).

2.2 Enable widget caching (for the Merchant feature only)

If you use the Merchant feature, enable widget caching to reduce server load and improve response times. Configure this setting in the ShopApplicationDependencyProvider class.

    protected function getWidgetCacheKeyGeneratorStrategyPlugins(): array
    {
        return [
            // other plugins
            new SoldByMerchantWidgetCacheKeyGeneratorStrategyPlugin(),
        ];
    }

2.3 Configure Product Relations feature

If your cart page displays product relations (for example, related products or upsells), ensure that the Product Relations feature is properly configured to optimize performance.

Limit the number of product relations loaded on the cart page in the ProductRelationStorageConfig class:

    public function getUpsellingProductLimit(): int
    {
        return 25;
    }

Update product relation widgets on the cart page to use carousel rendering to improve loading times and enhance user experience.

• ProductAlternativeListWidget:

        {% widget 'ProductAlternativeListWidget' args [data.product] with {
            data: {
                isNewCarouselRenderingEnabled: true
            }
        } only %}

• ProductReplacementForListWidget:

        {% widget 'ProductReplacementForListWidget' args [data.product.sku] with {
            data: {
                isNewCarouselRenderingEnabled: true,
            }
        } only %}

• SimilarProductsWidget:

        {% widget 'SimilarProductsWidget' args [data.product] with {
            data: {
                isNewCarouselRenderingEnabled: true,
            }
        } only %}

Verify that these widgets are present in your project Twig templates, and update them as needed.