Product feature integration

Last updated:
Edit on GitHub
You are browsing a previous version of the document. The latest version is 202212.0.

The 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

Prerequisites

Please overview and install the necessary features before beginning the integration step.

Name Version
Spryker Core 202009.0
Prices 202009.0

1) Install the required modules using Composer

Run the following command to install the required modules:

composer require spryker-feature/product:"202009.0" --update-with-dependencies
Verification

Make sure that the following modules were installed:

Module Expected Directory
Product spryker/product
ProductAttribute spryker/product-attribute
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

Run the following commands to apply database changes and generate entity and transfer changes:

console transfer:generate
console propel:install
console transfer:generate
Verification

Make sure that 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
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

Run the following console command to import data:

console data:import glossary
Verification

Make sure that the configured data is added to the spy_glossary table in the database.

2) Configure Export to Redis and Elasticsearch

Add to cart from catalog page configuration:

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;
    }
}
Verification

Make sure that abstract products eligible for adding to cart have additional add_to_cart_sku field at Elasticsearch document.

Product Concrete Search Configuration

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. None Spryker\Zed\ProductPageSearch\Communication\Plugin\Event\Subscriber
ProductImageProductConcretePageMapExpanderPlugin Expands product concrete page map with images field. None Spryker\Zed\ProductPageSearch\Communication\Plugin\PageMapExpander
ProductImageProductConcretePageDataExpanderPlugin Expands product concrete page data with images data. None Spryker\Zed\ProductPageSearch\Communication\Plugin\PageMapExpander

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(),
        ];
    }
}
Verification
  1. Make sure that after console sync:data product_concrete command execution product data including images is synced to Elasticsearch product concrete documents.
  2. Also check that when product or its images updated via Zed UI, product data including images is synced at respective Elasticsearch product concrete documents.
Storage type Target entity Example expected data identifier
Elasticsearch ProductConcrete product_concrete:de:de_de:1

Example expected data fragment

{ 
   "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"
   }
}

Install feature frontend

Prerequisites

Overview and install the necessary features before beginning the integration step.

Name Version
Spryker Core 202009.0

1) Install the required modules using Composer

Run the following command to install the required modules:

composer require spryker-feature/product:"202009.0" --update-with-dependencies
Verification

Make sure that the following modules are installed:

Module Expected Directory
ProductSearchWidget spryker-shop/product-search-widget
### 2) Set up Widgets Register the following plugins to enable widgets:
Plugin Description Prerequisites Namespace
ProductConcreteSearchWidget Allows customers to search for concrete products on the Cart page. None SprykerShop\Yves\ProductSearchWidget\Widget
ProductConcreteSearchWidget Incorporates ProductConcreteSearchWidget and allows customers to search for concrete products and quickly add them to the Cart with the desired quantity. None SprykerShop\Yves\ProductSearchWidget\Widget
ProductConcreteSearchGridWidget Allows to output list of concrete products from search filtered by criteira. None 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 string[]
     */
    protected function getGlobalWidgets(): array
    {
        return [
            ProductConcreteSearchWidget::class,
            ProductConcreteAddWidget::class,
            ProductConcreteSearchGridWidget::class,
        ];
    }
}
Verification

Make sure that the following widgets are registered:

Module Test
ProductConcreteSearchWidget Go to the Cart page and make sure the “Quick add to Cart” section is present, so you can search for concrete products by typing their SKU.
ProductConcreteAddWidget Go to the Cart page and make sure the “Quick add to Cart” section is present, so you can add the found products to the Cart with the desired Quantity.
ProductConcreteSearchGridWidget Could be checked on slot edit page of Configurator.