Creating a Custom Module for a Custom Frontend Page in Spryker

Spread the love

To create a custom module for a custom frontend page in Spryker, follow these steps. This module will handle a simple “Custom Page” that displays a message. Here’s a detailed breakdown of the steps:

Step 1: Create CustomPageFactory.php

Create the factory class in src/Pyz/Yves/CustomPage/CustomPageFactory.php

<?php
/**
* Copyright © 2016-present Spryker Systems GmbH. All rights reserved.
* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.
*/
namespace Pyz\Yves\CustomPage;
use Spryker\Yves\Kernel\AbstractFactory;
class CustomPageFactory extends AbstractFactory
{
/**
* @return string[]
*/
public function getHomePageWidgetPlugins(): array
{
return [];
}
} ?>

<?php

/**

* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.

namespace Pyz\Yves\CustomPage;

use Spryker\Yves\Kernel\AbstractFactory;

class CustomPageFactory extends AbstractFactory

{

/**

* @return string[]

public function getHomePageWidgetPlugins(): array

{

return [];

}

} ?>

Step 2: Create CustomPageDependencyProvider.php

This file defines the dependencies for the module. It should be placed in src/Pyz/Yves/CustomPage/CustomPageDependencyProvider.php

<?php
/**
* Copyright © 2016-present Spryker Systems GmbH. All rights reserved.
* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.
*/
namespace Pyz\Yves\CustomPage;
use Spryker\Yves\Kernel\AbstractBundleDependencyProvider;
class CustomPageDependencyProvider extends AbstractBundleDependencyProvider
{
}
?>

<?php

/**

* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.

namespace Pyz\Yves\CustomPage;

use Spryker\Yves\Kernel\AbstractBundleDependencyProvider;

class CustomPageDependencyProvider extends AbstractBundleDependencyProvider

{

}

Step 3: Create the Twig Template for the Custom Page

Next, you need to create a view template file that will render the custom page in your theme. This file goes in src/Pyz/Yves/CustomPage/Theme/default/views/custom/custom.twig

{% extends template('page-critical-path') %}
{% block content %}
<div class="box">
<h2>{{ helloMessage }}</h2> <!-- Show the Hello message here -->
</div>
{% endblock %}

{% extends template('page-critical-path') %}

{% block content %}

<h2>{{ helloMessage }}</h2>

</div>

{% endblock %}

Step 4: Define a Custom Controller in CustomPageControllerProvider.php

The next step is to define a controller that will handle the route for the custom page. Create the controller provider in src/Pyz/Yves/CustomPage/Plugin/Provider/CustomPageControllerProvider.php

<?php
/**
* Copyright © 2016-present Spryker Systems GmbH. All rights reserved.
* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.
*/
namespace Pyz\Yves\CustomPage\Plugin\Provider;
use Silex\Application;
use SprykerShop\Yves\ShopApplication\Plugin\Provider\AbstractYvesControllerProvider;
/**
* @deprecated Use {@link \SprykerShop\Yves\HomePage\Plugin\Router\HomePageRouteProviderPlugin} instead.
*/
class CustomPageControllerProvider extends AbstractYvesControllerProvider
{
public const ROUTE_CUSTOM = 'custom-page';
/**
* @param \Silex\Application $app
*
* @return void
*/
protected function defineControllers(Application $app)
{
$this->addCustomRoute();
}
/**
* @return $this
*/
protected function addCustomRoute()
{
$this->createController('/{root}', self::ROUTE_CUSTOM, 'CustomPage', 'Index')
->assert('root', $this->getAllowedLocalesPattern())
->value('root', '');
return $this;
}
}
?>

<?php

/**

* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.

namespace Pyz\Yves\CustomPage\Plugin\Provider;

use Silex\Application;

use SprykerShop\Yves\ShopApplication\Plugin\Provider\AbstractYvesControllerProvider;

/**

* @deprecated Use {@link \SprykerShop\Yves\HomePage\Plugin\Router\HomePageRouteProviderPlugin} instead.

class CustomPageControllerProvider extends AbstractYvesControllerProvider

{

public const ROUTE_CUSTOM = 'custom-page';

/**

* @param \Silex\Application $app

* @return void

protected function defineControllers(Application $app)

{

$this->addCustomRoute();

}

/**

* @return $this

protected function addCustomRoute()

{

$this->createController('/{root}', self::ROUTE_CUSTOM, 'CustomPage', 'Index')

->assert('root', $this->getAllowedLocalesPattern())

->value('root', '');

return $this;

}

Step 5: Add Routes via CustomPageRouteProviderPlugin.php

Create a route provider plugin to add the route for your custom page. This will be in src/Pyz/Yves/CustomPage/Plugin/Router/CustomPageRouteProviderPlugin.php

<?php
/**
* Copyright © 2016-present Spryker Systems GmbH. All rights reserved.
* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.
*/
namespace Pyz\Yves\CustomPage\Plugin\Router;
use Spryker\Yves\Router\Plugin\RouteProvider\AbstractRouteProviderPlugin;
use Spryker\Yves\Router\Route\RouteCollection;
class CustomPageRouteProviderPlugin extends AbstractRouteProviderPlugin
{
/**
* @deprecated Use {@link \SprykerShop\Yves\HomePage\Plugin\Router\HomePageRouteProviderPlugin::ROUTE_NAME_HOME} instead.
*/
protected const ROUTE_CUSTOM = 'custom-page';
public const ROUTE_NAME_CUSTOM = 'custom-page';
/**
* Specification:
* - Adds Routes to the RouteCollection.
*
* @api
*
* @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection
*
* @return \Spryker\Yves\Router\Route\RouteCollection
*/
public function addRoutes(RouteCollection $routeCollection): RouteCollection
{
$routeCollection = $this->addCustomRoute($routeCollection);
return $routeCollection;
}
/**
* @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection
*
* @return \Spryker\Yves\Router\Route\RouteCollection
*/
protected function addCustomRoute(RouteCollection $routeCollection): RouteCollection
{
/* $route = $this->buildRoute('/', 'CustomPage', 'Index', 'indexAction');
$routeCollection->add(static::ROUTE_NAME_CUSTOM, $route);
return $routeCollection;*/
$route = $this->buildRoute('/custom-page', 'CustomPage', 'Index', 'indexAction');
$routeCollection->add(static::ROUTE_NAME_CUSTOM, $route);
return $routeCollection;
}
}
?>

<?php

/**

* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.

namespace Pyz\Yves\CustomPage\Plugin\Router;

use Spryker\Yves\Router\Plugin\RouteProvider\AbstractRouteProviderPlugin;

use Spryker\Yves\Router\Route\RouteCollection;

class CustomPageRouteProviderPlugin extends AbstractRouteProviderPlugin

{

/**

* @deprecated Use {@link \SprykerShop\Yves\HomePage\Plugin\Router\HomePageRouteProviderPlugin::ROUTE_NAME_HOME} instead.

protected const ROUTE_CUSTOM = 'custom-page';

public const ROUTE_NAME_CUSTOM = 'custom-page';

/**

* Specification:

* - Adds Routes to the RouteCollection.

* @api

* @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection

* @return \Spryker\Yves\Router\Route\RouteCollection

public function addRoutes(RouteCollection $routeCollection): RouteCollection

{

$routeCollection = $this->addCustomRoute($routeCollection);

return $routeCollection;

}

/**

* @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection

* @return \Spryker\Yves\Router\Route\RouteCollection

protected function addCustomRoute(RouteCollection $routeCollection): RouteCollection

{

/* $route = $this->buildRoute('/', 'CustomPage', 'Index', 'indexAction');

$routeCollection->add(static::ROUTE_NAME_CUSTOM, $route);

return $routeCollection;*/

$route = $this->buildRoute('/custom-page', 'CustomPage', 'Index', 'indexAction');

$routeCollection->add(static::ROUTE_NAME_CUSTOM, $route);

return $routeCollection;

}

Step 6: Create the Controller

The IndexController.php should be placed in src/Pyz/Yves/CustomPage/Controller/IndexController.php.

This controller will render the custom page with the template.

<?php
/**
* Copyright © 2016-present Spryker Systems GmbH. All rights reserved.
* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.
*/
namespace Pyz\Yves\CustomPage\Controller;
use Spryker\Shared\Storage\StorageConstants;
use SprykerShop\Yves\ShopApplication\Controller\AbstractController;
/**
* @method \SprykerShop\Yves\HomePage\HomePageFactory getFactory()
*/
class IndexController extends AbstractController
{
/**
* @return \Spryker\Yves\Kernel\View\View
*/
public function indexAction()
{
$viewData = [
'helloMessage' => 'Hello, Welcome to the Custom Page!',
];
// Pass the view template string as the first argument, and the data as the second
return $this->renderView(
'@CustomPage/views/custom/custom.twig', // The view template path
$viewData // The data to pass to the template
);
}
}
?>

<?php

/**

* Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file.

namespace Pyz\Yves\CustomPage\Controller;

use Spryker\Shared\Storage\StorageConstants;

use SprykerShop\Yves\ShopApplication\Controller\AbstractController;

/**

* @method \SprykerShop\Yves\HomePage\HomePageFactory getFactory()

class IndexController extends AbstractController

{

/**

* @return \Spryker\Yves\Kernel\View\View

public function indexAction()

{

$viewData = [

'helloMessage' => 'Hello, Welcome to the Custom Page!',

];

// Pass the view template string as the first argument, and the data as the second

return $this->renderView(

'@CustomPage/views/custom/custom.twig', // The view template path

$viewData // The data to pass to the template

);

}

Step 7: Modify RouterDependencyProvider.php

Ensure that the CustomPageRouteProviderPlugin is added to the RouterDependencyProvider. Update src/Pyz/Yves/Router/RouterDependencyProvider.php as follows:

<?php
namespace Pyz\Yves\Router;
use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;
use Pyz\Yves\CustomPage\Plugin\Router\CustomPageRouteProviderPlugin;
class RouterDependencyProvider extends SprykerRouterDependencyProvider
{
/**
* @return array<\Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface>
*/
protected function getRouteProvider(): array
{
return [
new CustomPageRouteProviderPlugin(),
];
}
}
?>

<?php

namespace Pyz\Yves\Router;

use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;

use Pyz\Yves\CustomPage\Plugin\Router\CustomPageRouteProviderPlugin;

class RouterDependencyProvider extends SprykerRouterDependencyProvider

{

/**

* @return array<\Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface>

protected function getRouteProvider(): array

{

return [

new CustomPageRouteProviderPlugin(),

];

}

Step 8: Clear Cache and Rebuild

Finally, run the following command to clear the cache and re-enable the modules:

docker/sdk cli

console c:e,

To access the custom page you just created in Spryker, open your browser and navigate to the following URL:http://yves.us.spryker.local/en/custom-page

Final Thoughts:

By following these steps, you’ve created a custom module that displays a custom page at /custom-page. This page will use a Twig template to render a simple message.

Make sure to adjust the route, controller logic, and views as needed for your specific business logic.