Install the Cart feature
Edit on GitHubThe 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 | 202404.0 | Install the Spryker Core feature |
1) Install the required modules
composer require spryker-feature/cart 202404.0 --update-with-dependencies
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
- 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
- Import data:
console data:import glossary
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 | 202404.0 | Install the Spryker Core feature |
1) Install the required modules
composer require spryker-feature/cart 202404.0 --update-with-dependencies
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 the loading of cart items via AJAX. | SprykerShop\Yves\CartPage |
CartPageConfig::IS_LOADING_UPSELLING_PRODUCTS_VIA_AJAX_ENABLED | Enables the loading of upselling products via AJAX. | SprykerShop\Yves\CartPage |
CartPageConfig::IS_CART_ACTIONS_ASYNC_MODE_ENABLED | Enables the performing of cart actions via AJAX. | SprykerShop\Yves\CartPage |
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;
}
Make sure the following applies:
- 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.
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(),
];
}
}
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 widgets
- 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,
];
}
}
- Enable Javascript and CSS changes:
console frontend:yves:build
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.
Thank you!
For submitting the form