Making the Legacy Demoshop Compatible with the Atomic Frontend

The following guide will help migrating an existing Demoshop project to Atomic Frontend.

  1. Update assets/Yves/default/app/index.js

    Append the following lines to the end of the file:

    var app = require('ShopUi/app');
  2. Update assets/Yves/default/vendor.entry.js

    Remove the following lines::

    // es6 promise fix (webpack 2)

    Line to add:

  3. Update package.json by replacing the following sections with the lines specified below:
  4. Update src/Pyz/Yves/Application/Theme/default/layout/layout.twig

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

    <!-- add here -->
    <link rel="stylesheet" href="/assets/default/css/vendor.css" />
    <link rel="stylesheet" href="/assets/default/css/app.css" />

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

    <!-- add here -->
    <script src="/assets/default/js/vendor.js"></script>
    <script src="/assets/default/js/app.js"></script>
  5. Delete the assets/Yves/default/build/ folder.
  6. Download the Migration Package, unpack it and copy to your project following the folder structure of the package.
  7. Replace

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

  8. with

    // define relative urls to site host (/)
    const urls = {
         // assets base url
         assets: '/assets/default'
  9. Run the installation script
    install -s frontend
    console cache:empty-all


See also: