Setting up ShopUiCompatibility module in the Legacy Demoshop

Last updated:
Edit on GitHub

The ShopUiCompatibility module is the main module necessary for the Atomic Frontend. This module is provided in SCOS by default. The following guide describes how to set up the ShopUICompatibility in the Legacy Demoshop.

To install ShopUiCompatibility module in the Legacy Demoshop, follow the instructions below:

  1. ShopUiCompatibility requires ShopUi module of a version no older than 1.7.0. If you don’t have it, run the following code:
composer require composer require spryker-shop/shop-ui "^1.7.0"
  1. Add the following line to ./src/Pyz/Yves/Application/YvesBootstrap.php:
use SprykerEco\Yves\ShopUiCompatibility\Plugin\Provider\ShopUiCompatibilityTwigServiceProvider;
  1. Add the following line to ./src/Pyz/Yves/Application/YvesBootstrap.php, at the very end of the protected function registerServiceProviders() {:
$this->application->register(new ShopUiCompatibilityTwigServiceProvider());
  1. Add the following section to ./package.json:
"config": {
"shopUiCompatibilityPath": "./vendor/spryker-eco/shop-ui-compatibility/assets/Yves",
"yvesPath": "./assets/Yves/default",
"zedPath": "./node_modules/@spryker/oryx-for-zed"
},
  1. Replace the script section in ./package.json with this:
"engines": {
"node": ">=6.0.0"
},
  1. Change ./src/Pyz/Yves/Application/Theme/default/layout/layout.twig as follows:
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<meta name="description" content="{{ page_description | default('') | trans }}" />
	<meta name="keywords" content="{{ page_keywords | default('') | trans }}" />
	<meta name="generator" content="spryker" />
	{% block page_meta %}{% endblock %}

	<link rel="stylesheet" href="/assets/default/shopui/css/yves_default.app.css" /> <!-- add this line here, before any other style -->
	<link rel="stylesheet" href="/assets/default/css/vendor.css" />
	<link rel="stylesheet" href="/assets/default/css/app.css" />
	{% block stylesheets %}{% endblock %}

	<script src="/assets/default/shopui/js/yves_default.runtime.js"></script>  <!-- add this line here, before any other script -->

	<title>{% block page_title %}{{ page_title | default('global.spryker.shop') | trans }}{% endblock %}</title>
</head>
  1. Add the following lines to ./src/Pyz/Yves/Application/Theme/default/layout/layout.twig, at the very end of the body, after any other script:
<script src="/assets/default/js/vendor.js"></script>
	<script src="/assets/default/js/app.js"></script>
	<script src="/assets/default/shopui/js/yves_default.es6-polyfill.js"></script> <!-- add this line here, after any other script -->
	<script src="/assets/default/shopui/js/yves_default.vendor.js"></script> <!-- add this line here, after any other script -->
	<script src="/assets/default/shopui/js/yves_default.app.js"></script> <!-- add this line here, after any other script -->
	{% block javascript %}{% endblock %}
</body>
  1. Add all the files from this ZIP-archive to the root of your project. Files in folders must be copied to the same folders.