Making Demoshop Compatible with Shop App, Atomic Design, P&S

Infrastructure Preparation

This has to be done only once for Demoshop (not for every feature.)

 

Shop App

These steps are required to install features which use the new shop pages and widgets i.e. the shop app.

 

Add infrastructure modules

To use the spryker-shop modules, you need to add new modules required by infrastructure.

Update all the existing modules:

composer update "spryker/*"

Remove the Event-Behavior module to avoid the version constraint problems:

composer remove spryker/event-behavior

Remove

$config[EventBehaviorConstants::EVENT_BEHAVIOR_TRIGGERING_ACTIVE] = false;

from config_default.php

Remove

new EventBehaviorTriggerTimeoutConsole(),

from \Pyz\Zed\Console\ConsoleDependencyProvider

Install the required modules for Shop-App:

composer require "spryker/kernel":"^3.24.0" spryker-shop/shop-router:"^1.0.0" 
spryker-shop/shop-application:"^1.3.0" spryker-shop/shop-ui:"^1.0.0" --update-with-all-dependencies

Install the required modules for Publish&Synchronize:

composer require spryker/availability-storage:"^1.0.0" spryker/category-page-search:"^1.0.0"
spryker/category-storage:"^1.0.0" spryker/cms-block-category-storage:"^1.0.0"
spryker/cms-block-product-storage:"^1.0.0" spryker/cms-block-storage:"^1.0.0"
spryker/cms-page-search:"^1.0.0" spryker/cms-storage:"^1.0.0" spryker/glossary-storage:"^1.0.0"
spryker/navigation-storage:"^1.0.0" spryker/price-product-storage:"^1.0.0"
spryker/product-category-filter-storage:"^1.0.0"
spryker/product-category-storage:"^1.0.0" spryker/product-group-storage:"^1.0.0"
spryker/product-image-storage:"^1.0.0" spryker/product-label-search:"^1.0.0"
spryker/product-label-storage:"^1.0.0" spryker/product-measurement-unit:"^0.2.0"
spryker/product-measurement-unit-storage:"^0.2.0" spryker/product-option-storage:"^1.0.0"
spryker/product-page-search:"^1.0.0" spryker/product-relation-storage:"^1.0.0"
spryker/product-review-search:"^1.0.0" spryker/product-review-storage:"^1.0.0"
spryker/product-search-config-storage:"^1.0.0" spryker/product-set-page-search:"^1.0.0"
spryker/product-set-storage:"^1.0.0" spryker/product-storage:"^1.0.0"
spryker/url-storage:"^1.0.0" spryker/product-quantity-storage:"^0.1.1" --update-with-all-dependencies

Add namespace to configuration

To let the kernel find your files within the SprykerShop Organization namespace, you need to add SprykerShop as a new namespace to Spryker\Shared\Kernel\KernelConstants::CORE_NAMESPACES in your ./config/Shared/config_default.php

$config[\Spryker\Shared\Kernel\KernelConstants::CORE_NAMESPACES] = [ 'SprykerEco', 'Spryker', 'SprykerShop' ];

 

Add service providers

To make all the features available from the newly added Modules, you need to add the following lines to Pyz\Yves\Application\YvesBootstrap::registerServiceProviders() between the registration of the TwigServiceProvider and the SprykerTwigServiceProvider.

 

Inherit YvesBootstrap

You need to inherit YvesBootstrap from SprykerShop\Yves\ShopApplication\YvesBootstrap

 

Adopt routers in YvesBootstrap

You will also need to change the applied SilexRouter so that the new controllers from the SprykerShop namespace can be used.

// use Pyz\Shared\Application\Business\Routing\SilexRouter;
use SprykerShop\Yves\ShopRouter\Plugin\Router\SilexRouter;

 

Change layout for new shop app modules

The new shop app modules use a new layout which is not supported in Demoshop. To make them compatible, you need to switch to the existing layout.

Create a file page-layout-main.twig and add the following code.

Don't forget to flush the cache afterwards.

console cache:empty-all

 

Publish & Synchronize

By following this document and adjusting all the necessary changes in Demoshop, you will be able to set up the infrastructure for Publish & Synchronize. If you need to learn more about any requirements needed and changes made to each particular feature, then read their own installation guides.

 

Add infrastructure modules

We need to adjust the composer.json to get the latest version of the storage and search modules. By executing this code you will be able to update the library you need for running Publish & Synchronize

composer update "spryker/*" composer remove spryker/event-behavior composer require spryker/availability-storage:"^1.0.0" spryker/category-page search:"^1.0.0" spryker/category-storage:"^1.0.0" spryker/cms-block-category-storage:"^1.0.0" spryker/cms-block-product-storage:"^1.0.0" spryker/cms-block-storage:"^1.0.0"
spryker/cms-page-search:"^1.0.0" spryker/cms-storage:"^1.0.0" spryker/glossary-storage:"^1.0.0"
spryker/navigation-storage:"^1.0.0" spryker/price-product-storage:"^1.0.0"
spryker/product-category-filter-storage:"^1.0.0" spryker/product-category-storage:"^1.0.0"
spryker/product-group-storage:"^1.0.0" spryker/product-image-storage:"^1.0.0"
spryker/product-label-search:"^1.0.0" spryker/product-label-storage:"^1.0.0"
spryker/product-measurement-unit:"^0.2.0" spryker/product-measurement-unit-storage:"^0.2.0"
spryker/product-option-storage:"^1.0.0" spryker/product-page-search:"^1.0.0" spryker/product-relation-storage:"^1.0.0"
spryker/product-review-search:"^1.0.0" spryker/product-review-storage:"^1.0.0"
spryker/product-search-config-storage:"^1.0.0" spryker/product-set-page-search:"^1.0.0"
spryker/product-set-storage:"^1.0.0" spryker/product-storage:"^1.0.0"
spryker/url-storage:"^1.0.0" spryker/product-quantity-storage:"^0.1.1"
--update-with-dependencies composer require "spryker/synchronization-behavior":"^1.0.0"

Configure the queue

Adjust queues before you start running the cron jobs, open QueueDependencyProvider.php

This only works if the queue is installed on the current server.

Activate cron jobs

Add the following jobs to jobs.php:

Then restart Jenkins:

vendor/bin/console setup:jenkins:generate

Config

We need to enable event behavior in config_default.php

// ---------- EventBehavior
$config[EventBehaviorConstants::EVENT_BEHAVIOR_TRIGGERING_ACTIVE] = true;

Zed

Add EventBehaviorServiceProvider to all the ServiceProviders methods in ApplicationDependencyProvider.php

Console

Add EventBehaviorPostHookPlugin to the getConsolePostRunHookPlugins() method in ConsoleDependencyProvider.php

DataImporter

Add DataImportPublisherPlugin and DataImportEventBehaviorPlugin to Pyz\Zed\DataImport\DataImportDependencyProvider

Overwrite the core methods:

/**
 * @return array
 */
protected function getDataImportBeforeImportHookPlugins(): array
{
    return [
        new DataImportEventBehaviorPlugin(),
    ];
}
 
/**
 * @return array
 */
protected function getDataImportAfterImportHookPlugins(): array
{
    return [
        new DataImportEventBehaviorPlugin(),
        new DataImportPublisherPlugin(),
    ];
}

You can find all the changes in the following branch:

https://github.com/spryker/demoshop/tree/tech/compatibility-pub-sync

Collector data with P&S features

To be able to use the data structure provided by the collectors from Redis, you need to use your own module in a compatibility mode. You can simply do this by updating the `ModuleStorageConfig::isCollectorCompatibilityMode()` method of your storage module and return true.

 

Frontend

Atomic Frontend: integration guide for demoshop

index.js

Append the following lines:

vendor.entry.js

Remove the following lines:

Append the following lines:

package.js

Update the script section as follows:

Update the engine section as follows:

Update the dependencies section as follows:

Update the devDependencies section as follows:

layout.twig

Add <script src="/assets/default/js/runtime.js"></script> to <head>:

Add <script src="/assets/default/js/es6-polyfill.js"></script> at the very bottom of your page, before app and vendor js:

Delete build folder

Delete the ./assets/Yves/default/build/ folder

Add new files

Copy the contents of integration.zip into your project according to the folder structure defined in the zip file.

Fix the assets/Yves/default/build/settings.js file

Replace

// define relative urls to site host (/)
const urls = {
    // assets base url
    assets: '/assets'
};

to

// define relative urls to site host (/)
const urls = {
    // assets base url
    assets: '/assets/default'
};

Run the installation script

install -s frontend
console cache:empty-all

 

See also:

 

Last review date: November 1st, 2018