Install the Cart feature

Last updated:
Edit on GitHub

The following feature integration guide expects the basic feature to be in place.

The current feature installation guide only adds the Add product to cart from the Catalog page and Dynamic cart page update functionality.

Install feature core

Follow the steps below to install the core of the functionality.

Prerequisites

Install the required features:

NAME VERSION INSTALLATION GUIDE
Spryker Core 202410.0 Install the Spryker Core feature

1) Install the required modules

composer require spryker-feature/cart 202410.0 --update-with-dependencies
Verification

Make sure that the following modules have been installed:

MODULE EXPECTED DIRECTORY
Calculation vendor/spryker/calculation
Cart vendor/spryker/cart
CartNote vendor/spryker/cart-note
CartVariant vendor/spryker/cart-variant
PersistentCart vendor/spryker/persistent-cart

2) Add translations

  1. Append glossary according to your configuration:

src/data/import/glossary.csv

global.add-to-cart,In den Warenkorb,de_DE
global.add-to-cart,Add to Cart,en_US
cart_page.error_message.unexpected_error,Unexpected error occurred.,en_US
cart_page.error_message.unexpected_error,Ein unerwarteter Fehler aufgetreten.,de_DE
  1. Import data:
console data:import glossary
Verification

Make sure the keys with translations have been added to the spy_glossary_key and spy_glossary_translation tables.

Install feature frontend

Follow the steps below to install the frontend of the functionality.

Prerequisites

Install the required features:

NAME VERSION INSTALLATION GUIDE
Spryker Core 202410.0 Install the Spryker Core feature

1) Install the required modules

composer require spryker-feature/cart 202410.0 --update-with-dependencies
Verification

Make sure the following modules have been installed:

MODULE EXPECTED DIRECTORY
CartPage vendor/spryker-shop/cart-page
CartNoteWidget vendor/spryker-shop/cart-note-widget

2) Set up configuration

Set up the following configuration:

CONFIGURATION SPECIFICATION NAMESPACE
CartPageConfig::IS_CART_CART_ITEMS_VIA_AJAX_LOAD_ENABLED Enables cart items to be loaded via AJAX. SprykerShop\Yves\CartPage
CartPageConfig::IS_LOADING_UPSELLING_PRODUCTS_VIA_AJAX_ENABLED Enables upselling products to be loaded via AJAX. SprykerShop\Yves\CartPage
CartPageConfig::IS_CART_ACTIONS_ASYNC_MODE_ENABLED Enables cart actions to be performed via AJAX. SprykerShop\Yves\CartPage
CatalogPageConfig::IS_MINI_CART_ASYNC_MODE_ENABLED Enables mini cart to be rendered async during the AJAX add to cart action. SprykerShop\Yves\CatalogPage

src/Pyz/Yves/CartPage/CartPageConfig.php

<?php

namespace Pyz\Yves\CartPage;

use SprykerShop\Yves\CartPage\CartPageConfig as SprykerCartPageConfig;

class CartPageConfig extends SprykerCartPageConfig
{
    /**
     * @var bool
     */
    protected const IS_CART_CART_ITEMS_VIA_AJAX_LOAD_ENABLED = true;

    /**
     * @var bool
     */
    protected const IS_LOADING_UPSELLING_PRODUCTS_VIA_AJAX_ENABLED = true;

    /**
     * @var bool
     */
    protected const IS_CART_ACTIONS_ASYNC_MODE_ENABLED = true;
}
Verification

Make sure the following applies on the Cart page:

  • Cart items are loaded via AJAX.
  • Upselling products are loaded via AJAX.
  • Cart actions, like changing item quantity or removing an item, are performed via AJAX.

src/Pyz/Yves/CatalogPage/CatalogPageConfig.php

<?php

namespace Pyz\Yves\CatalogPage;

use SprykerShop\Yves\CatalogPage\CatalogPageConfig as SprykerCatalogPageConfig;

class CatalogPageConfig extends SprykerCatalogPageConfig
{
    /**
     * @var bool
     */
    protected const IS_MINI_CART_ASYNC_MODE_ENABLED = true;
}
Verification

Make sure that, on the Catalog page, cart actions, like changing item quantity or removing an item, are performed via AJAX.

3) Enable controllers

Register the following route providers on the Storefront:

PROVIDER NAMESPACE
CartPageRouteProviderPlugin SprykerShop\Yves\CartPage\Plugin\Router
CartPageAsyncRouteProviderPlugin SprykerShop\Yves\CartPage\Plugin\Router
CartNoteWidgetRouteProviderPlugin SprykerShop\Yves\CartNoteWidget\Plugin\Router
CartNoteWidgetAsyncRouteProviderPlugin SprykerShop\Yves\CartNoteWidget\Plugin\Router

src/Pyz/Yves/Router/RouterDependencyProvider.php

<?php

namespace Pyz\Yves\Router;

use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;
use SprykerShop\Yves\CartNoteWidget\Plugin\Router\CartNoteWidgetAsyncRouteProviderPlugin;
use SprykerShop\Yves\CartNoteWidget\Plugin\Router\CartNoteWidgetRouteProviderPlugin;
use SprykerShop\Yves\CartPage\Plugin\Router\CartPageAsyncRouteProviderPlugin;
use SprykerShop\Yves\CartPage\Plugin\Router\CartPageRouteProviderPlugin;

class RouterDependencyProvider extends SprykerRouterDependencyProvider
{
    /**
     * @return list<\Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface>
     */
    protected function getRouteProvider(): array
    {
        return [
            new CartPageRouteProviderPlugin(),
            new CartPageAsyncRouteProviderPlugin(),
            new CartNoteWidgetRouteProviderPlugin(),
            new CartNoteWidgetAsyncRouteProviderPlugin(),
        ];
    }
}
Verification
PLUGIN VERIFICATION
CartPageRouteProviderPlugin` https://mysprykershop.com/cart page is accessible

| CartPageAsyncRouteProviderPlugin | You can perform cart actions, like changing item quantity or removing an item, with AJAX mode enabled. |

| CartNoteWidgetRouteProviderPlugin | You can add a cart note. |

| CartNoteWidgetAsyncRouteProviderPlugin | You can add a cart item note with AJAX mode enabled. |

4) Set up behavior

  1. Activate the following plugins:
PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
CartBlockMiniCartViewExpanderPlugin Expands the provided MiniCartView.content with a mini cart view. SprykerShop\Yves\CartPage\Plugin\CartPage

src/Pyz/Yves/Router/RouterDependencyProvider.php

<?php

namespace Pyz\Yves\CartPage;

use SprykerShop\Yves\CartPage\CartPageDependencyProvider as SprykerCartPageDependencyProvider;
use SprykerShop\Yves\CartPage\Plugin\CartPage\CartBlockMiniCartViewExpanderPlugin;

class CartPageDependencyProvider extends SprykerCartPageDependencyProvider
{
    /**
     * @return array<\SprykerShop\Yves\CartPageExtension\Dependency\Plugin\MiniCartViewExpanderPluginInterface>
     */
    protected function getMiniCartViewExpanderPlugins(): array
    {
        return [
            new CartBlockMiniCartViewExpanderPlugin(),
        ];
    }
}
  1. B2C Shop: Add the following configuration:

src/Pyz/Yves/CartPage/CartPageConfig.php

<?php

namespace Pyz\Yves\CartPage;

use SprykerShop\Yves\CartPage\CartPageConfig as SprykerCartPageConfig;

class CartPageConfig extends SprykerCartPageConfig
{
    /**
     * @var string
     */
    protected const CART_BLOCK_MINI_CART_VIEW_TEMPLATE_PATH = '@ShopUi/components/organisms/navigation-top-async/navigation-top-async.twig';
}
Verification

Make sure that, on the Cart page, cart actions, like changing item quantity or removing an item, are reflected in the mini cart.

5) Set up widgets

  1. Register the following widgets:
PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
ProductAbstractAddToCartButtonWidget Displays a button for adding a product abstract to cart in case the product is eligible. SprykerShop\Yves\CartPage\Widget

src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php

<?php

namespace Pyz\Yves\ShopApplication;

use SprykerShop\Yves\CartPage\Widget\ProductAbstractAddToCartButtonWidget;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
    /**
     * @return string[]
     */
    protected function getGlobalWidgets(): array
    {
        return [
            ProductAbstractAddToCartButtonWidget::class,
        ];
    }
}
  1. Enable Javascript and CSS changes:
console frontend:yves:build
Verification

Go to the catalog and find an abstract product with a single concrete product. The button for adding this concrete product to the cart should be displayed on the catalog page.