Tutorial: Different stores, different logic - landing pages - Spryker Commerce OS

Edit on GitHub

This tutorial is also available on the Spryker Training website. For more information and hands-on exercises, visit the Spryker Training website.

Challenge description

Spryker supports a possibility of having multi-stores. Not just that, it also supports having different logic for different stores in a very elegant and simple way.

Just extend the functionality for a specific store and postfix the module name with your store name.

In this task, you simply implement different home pages for the Backend Office for different stores.

You can use the same steps for any other logic in the shop.

Extend the DE store

Override the current home page. There is a set of steps you need to follow in order to override the current homepage:

  1. In the Communication layer of the Application module in Zed in src/Pyz/Zed, add the Controller directory.
  2. Inside the Controller directory, extend the IndexController to return just a string when calling the indexAction().
namespace Pyz\Zed\Application\Communication\Controller;

use Spryker\Zed\Application\Communication\Controller\IndexController as SprykerIndexController;

class IndexController extends SprykerIndexController
	 * @return string
	public function indexAction()
		return 'Hello DE Store!';
  1. Check the Backend Office (https://zed.mysprykershop.com/) to see the new message for the DE store.

Add the new DEMO store

Add a new store and a new home page for it.

  1. Add a new store and call it DEMO by adding a new array key to the store configuration file in config/Shared/stores.php.
$stores['DEMO'] = $stores['DE'];
  1. Create a config_default_DEMO.php and a config_default_development_DEMO.php. You can copy other config files.
  2. Add a new Zed module to src/Pyz/Zed and call it ApplicationDEMO. This naming is a convention in Spryker.

To extend the logic for a specific shop, the module name should be $moduleName$shopName.

  1. Inside the new module, add a Communication layer directory and a Controller directory inside.
  2. Add a new IndexController for the DEMO store.

The main difference between the IndexController in step 1 and this controller is the namespace, and of course the output.

namespace Pyz\Zed\ApplicationDEMO\Communication\Controller;

use Spryker\Zed\Kernel\Communication\Controller\AbstractController;

class IndexController extends AbstractController
	 * @return string
	public function indexAction()
		return 'Hello DEMO Store!!!';
  1. The shop is ready to support both landing pages for both stores. Now, modify the virtual machine to redirect you to the right store. For this, change the store in Nginx config for zed:

    1. Copy nginx config for DE store with a new name sudo cp /etc/nginx/sites-available/DE_development_zed /etc/nginx/sites-available/DEMO_development_zed.
    2. Open the config file sudo vim /etc/nginx/sites-available/DEMO_development_zed.
    3. Change $application_store to DEMO.
    4. Change the server_name to ~^zed\\.demo\\..+\\.local$.
    5. If you use devVM, add a new host to /etc/hosts with ip VM.
    6. Save the changes.
  2. Restart Nginx by running sudo /etc/init.d/nginx restart.

  3. Finally, run console data:import:store. This command will create a store record in our spy_store database table.

Check the Backend Office (https://zed.mysprykershop.com/) again to see the new message for the DEMO store.