Install the Product feature
Edit on GitHubThe following feature integration guide expects the basic feature to be in place. This guide only describes the Product Concrete Search and Add to cart from the Catalog page integration.
Install feature core
Follow the steps below to install the feature core.
Prerequisites
Install the required features:
NAME | VERSION | INSTALLATION GUIDE |
---|---|---|
Spryker Core | 202410.0 | Install the Spryker Core feature |
Prices | 202410.0 | Install the Prices feature |
1) Install the required modules
- Install the required modules using Composer:
composer require spryker-feature/product:"202410.0" --update-with-dependencies
Make sure that the following modules have been installed:
MODULE | EXPECTED DIRECTORY |
---|---|
Product | spryker/product |
ProductAttribute | spryker/product-attribute |
ProductAttributeExtension | spryker/product-attribute-extension |
ProductAttributeGui | spryker/product-attribute-gui |
ProductCategoryFilter | spryker/product-category-filter |
ProductCategoryFilterGui | spryker/product-category-filter-gui |
ProductCategoryFilterStorage | spryker/product-category-filter-storage |
ProductImageStorage | spryker/product-image-storage |
ProductManagement | spryker/product-management |
ProductPageSearch | spryker/product-page-search |
ProductQuantityStorage | spryker/product-quantity-storage |
ProductSearch | spryker/product-search |
ProductStorage | spryker/product-storage |
ProductSearchConfigStorage | spryker/product-search-config-storage |
- Apply database changes and generate entity and transfer changes:
console propel:install
console transfer:generate
Make sure the following changes have been applied in transfer objects:
TRANSFER | TYPE | EVENT | PATH |
---|---|---|---|
ProductImageFilter | class | created | src/Generated/Shared/Transfer/ProductImageFilterTransfer |
ProductConcretePageSearch.images | property | added | src/Generated/Shared/Transfer/ProductConcretePageSearchTransfer |
2) Add translations
- Append glossary according to your configuration:
src/data/import/glossary.csv
quick-order.input.placeholder,Search by SKU or Name,en_US
quick-order.input.placeholder,Suche per SKU oder Name,de_DE
product_quick_add_widget.form.quantity,"# Qty",en_US
product_quick_add_widget.form.quantity,"# Anzahl",de_DE
quick-order.search.no_results,Item cannot be found,en_US
quick-order.search.no_results,Das produkt konnte nicht gefunden werden.,de_DE
product_search_widget.search.no_results,Products were not found.,en_US
product_search_widget.search.no_results,Products were not found.,de_DE
- Import data:
console data:import glossary
Make sure that the configured data has been added to the spy_glossary
table in the database.
3) Add configuration
Add the following configuration.
Enable multiselect product attributes
Expand available attribute types:
src/Pyz/Zed/ProductAttribute/ProductAttributeConfig.php
<?php
namespace Pyz\Zed\ProductAttribute;
use Spryker\Shared\ProductAttribute\ProductAttributeConfig as SharedProductAttributeConfig;
use Spryker\Zed\ProductAttribute\ProductAttributeConfig as SprykerProductAttributeConfig;
class ProductAttributeConfig extends SprykerProductAttributeConfig
{
/**
* @return array<string, string>
*/
public function getAttributeAvailableTypes(): array
{
return array_merge(
parent::getAttributeAvailableTypes(),
[
SharedProductAttributeConfig::INPUT_TYPE_MULTISELECT => SharedProductAttributeConfig::INPUT_TYPE_MULTISELECT,
],
);
}
}
Make sure that, on the Create a Product Attribute page, a mutliselect input type is available: https://backoffice.de.b2b-demo-shop.local/product-attribute-gui/attribute/create
.
Configure export to Redis and Elasticsearch
Add the configuration for adding products to cart from the catalog page:
src/Pyz/Zed/ProductPageSearch/ProductPageSearchConfig.php
<?php
namespace Pyz\Zed\ProductPageSearch;
use Spryker\Zed\ProductPageSearch\ProductPageSearchConfig as SprykerProductPageSearchConfig;
class ProductPageSearchConfig extends SprykerProductPageSearchConfig
{
/**
* @return bool
*/
public function isProductAbstractAddToCartEnabled(): bool
{
return true;
}
}
Make sure that abstract products that can be added to cart have the add_to_cart_sku
field in the ElasticSearch document.
4) Set up behavior
Enable the following behaviors by registering the plugins:
PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE |
---|---|---|---|
ProductConcretePageSearchProductImageEventSubscriber | Registers listeners that are responsible for publishing product concrete image entity changes to search when a related entity change event occurs. | Spryker\Zed\ProductPageSearch\Communication\Plugin\Event\Subscriber | |
ProductImageProductConcretePageMapExpanderPlugin | Expands the product concrete page map with the images field. | Spryker\Zed\ProductPageSearch\Communication\Plugin\PageMapExpander | |
ProductImageProductConcretePageDataExpanderPlugin | Expands product concrete page data with the images data. | Spryker\Zed\ProductPageSearch\Communication\Plugin\PageMapExpander | |
ProductConcretePublisherTriggerPlugin | Triggers the concrete products resource to be published. | Spryker\Zed\ProductPageSearch\Communication\Plugin\Publisher | |
MultiSelectProductAttributeDataFormatterPlugin | Formats product attributes with input type multiselect to array. |
Spryker\Zed\ProductAttribute\Communication\Plugin\ProductAttribute |
src/Pyz/Zed/Event/EventDependencyProvider.php
<?php
namespace Pyz\Zed\Event;
use Spryker\Zed\Event\EventDependencyProvider as SprykerEventDependencyProvider;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\Event\Subscriber\ProductConcretePageSearchProductImageEventSubscriber;
class EventDependencyProvider extends SprykerEventDependencyProvider
{
public function getEventSubscriberCollection()
{
$eventSubscriberCollection = parent::getEventSubscriberCollection();
$eventSubscriberCollection->add(new ProductConcretePageSearchProductImageEventSubscriber());
return $eventSubscriberCollection;
}
}
src/Pyz/Zed/ProductPageSearch/ProductPageSearchDependencyProvider.php
<?php
namespace Pyz\Zed\ProductPageSearch;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\PageDataExpander\ProductImageProductConcretePageDataExpanderPlugin;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\PageMapExpander\ProductImageProductConcretePageMapExpanderPlugin;
use Spryker\Zed\ProductPageSearch\ProductPageSearchDependencyProvider as SprykerProductPageSearchDependencyProvider;
class ProductPageSearchDependencyProvider extends SprykerProductPageSearchDependencyProvider
{
/**
* @return \Spryker\Zed\ProductPageSearchExtension\Dependency\Plugin\ProductConcretePageMapExpanderPluginInterface[]
*/
protected function getConcreteProductPageMapExpanderPlugins(): array
{
return [
new ProductImageProductConcretePageMapExpanderPlugin(),
];
}
/**
* @return \Spryker\Zed\ProductPageSearchExtension\Dependency\Plugin\ProductConcretePageDataExpanderPluginInterface[]
*/
protected function getProductConcretePageDataExpanderPlugins(): array
{
return [
new ProductImageProductConcretePageDataExpanderPlugin(),
];
}
}
src/Pyz/Zed/Publisher/PublisherDependencyProvider.php
<?php
namespace Pyz\Zed\Publisher;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\Publisher\CategoryStore\CategoryStoreProductAbstractPageSearchWritePublisherPlugin;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\Publisher\Product\ProductConcretePageSearchWritePublisherPlugin;
use Spryker\Zed\ProductPageSearch\Communication\Plugin\Publisher\ProductConcretePublisherTriggerPlugin;
class PublisherDependencyProvider extends SprykerPublisherDependencyProvider
{
/**
* @return array<\Spryker\Zed\PublisherExtension\Dependency\Plugin\PublisherPluginInterface>
*/
protected function getPublisherPlugins(): array
{
return [
new ProductConcretePublisherTriggerPlugin(),
new CategoryStoreProductAbstractPageSearchWritePublisherPlugin(),
];
}
}
Make sure the following applies:
- Executing the
console sync:data product_concrete
command, syncs the product data, including images, to Elasticsearch product concrete documents. - When a product or its images are updated in the Back Office, these changes are synced to respective Elasticsearch product concrete documents.
STORAGE TYPE | TARGET ENTITY | EXAMPLE EXPECTED DATA IDENTIFIER |
---|---|---|
Elasticsearch | ProductConcrete | product_concrete:de:de_de:1 |
Expected data fragment example
{
"store":"DE",
"locale":"de_DE",
"type":"product_concrete",
"is-active":true,
"search-result-data":{
"id_product":1,
"fkProductAbstract":2,
"abstractSku":"222",
"sku":"222_111",
"type":"product_concrete",
"name":"HP 200 280 G1",
"images":[
{
"idProductImage":1,
"idProductImageSetToProductImage":1,
"sortOrder":0,
"externalUrlSmall":"//images.icecat.biz/img/gallery_mediums/img_29406823_medium_1480596185_822_26035.jpg",
"externalUrlLarge":"//images.icecat.biz/img/gallery_raw/29406823_8847.png"
}
]
},
"full-text-boosted":[
"HP 200 280 G1",
"222_111"
],
"suggestion-terms":[
"HP 200 280 G1",
"222_111"
],
"completion-terms":[
"HP 200 280 G1",
"222_111"
],
"string-sort":{
"name":"HP 200 280 G1"
}
}
src/Pyz/Zed/ProductAttribute/ProductAttributeDependencyProvider.php
<?php
namespace Pyz\Zed\ProductAttribute;
use Spryker\Zed\ProductAttribute\Communication\Plugin\ProductAttribute\MultiSelectProductAttributeDataFormatterPlugin;
use Spryker\Zed\ProductAttribute\ProductAttributeDependencyProvider as SprykerProductAttributeDependencyProvider;
class ProductAttributeDependencyProvider extends SprykerProductAttributeDependencyProvider
{
/**
* @return list<\Spryker\Zed\ProductAttributeExtension\Dependency\Plugin\ProductAttributeDataFormatterPluginInterface>
*/
protected function getProductAttributeDataFormatterPlugins(): array
{
return [
new MultiSelectProductAttributeDataFormatterPlugin(),
];
}
}
Make sure that you can manage “multiselect” product attributes at https://zed.de.demo-spryker.com/product-attribute-gui/view/product-abstract?id-product-abstract={id-product-abstract}}
.
Install feature frontend
Follow the steps below to install the Product feature frontend.
Prerequisites
Install the required features:
NANE | VERSION | INSTALLATION GUIDE |
---|---|---|
Spryker Core | 202410.0 | Install the Spryker Core feature |
1) Install the required modules
Install the required modules using Composer:
composer require spryker-feature/product:"202410.0" --update-with-dependencies
Make sure that the following modules have been installed:
MODULE | EXPECTED DIRECTORY |
---|---|
ProductSearchWidget | spryker-shop/product-search-widget |
ProductSearchWidgetExtension | vendor/spryker-shop/product-search-widget-extension |
2) Set up widgets
To enable widgets, register the following plugins:
PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE |
---|---|---|---|
ProductConcreteSearchWidget | Enables customers to search for concrete products on the Cart page. | SprykerShop\Yves\ProductSearchWidget\Widget | |
ProductConcreteSearchWidget | Incorporates ProductConcreteSearchWidget and enables customers to search for concrete products and add them to cart with a selected quantity. |
SprykerShop\Yves\ProductSearchWidget\Widget | |
ProductConcreteSearchGridWidget | Enables the output list of concrete products from search filtered by criteria. | SprykerShop\Yves\ProductSearchWidget\Widget |
src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php
<?php
namespace Pyz\Yves\ShopApplication;
use SprykerShop\Yves\ProductSearchWidget\Widget\ProductConcreteAddWidget;
use SprykerShop\Yves\ProductSearchWidget\Widget\ProductConcreteSearchWidget;
use SprykerShop\Yves\ProductSearchWidget\Widget\ProductConcreteSearchGridWidget;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;
class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
/**
* @return list<string>
*/
protected function getGlobalWidgets(): array
{
return [
ProductConcreteSearchWidget::class,
ProductConcreteAddWidget::class,
ProductConcreteSearchGridWidget::class,
];
}
}
Verify the following widgets have been registered:
MODULE | TEST |
---|---|
ProductConcreteSearchWidget | Go to the Cart page. Make sure the Quick add to Cart section is displayed and you can search for concrete products by entering a SKU. |
ProductConcreteAddWidget | Go to the Cart page. Make sure that, in the Quick add to Cart section, you find a product, select a quantity and add it to cart. |
ProductConcreteSearchGridWidget | Can be checked on the slot edit page of Configurator. |
Thank you!
For submitting the form