Integrating Econda front end

Edit on GitHub
Check [this article](/docs/scos/user/intro-to-spryker/b2b-suite.html) to learn about Spryker Commerce OS (SCOS).

Include Econda Libraries and Scripts for Tracking and Cross-sell

Econda scripts are recommended to be connected at all the shop pages. To implement that:

  1. Place Econda libraries into project/frontend/assets/scripts folder.
  2. Add path to folder to webpack in frontend/configs/development.js.


            from: `${appSettings.paths.assets}/scripts`,
			to: 'scripts',
			ignore: ['*.gitkeep']
  1. Extend page-layout-main.twig scripts block.


{% block footerScripts %}
        {{ parent() }}
            <script src="{{publicPath('scripts/emos2.js')}}"></script>
		    <script src="{{publicPath('scripts/json/json2.js')}}"></script>
		    <script src="{{publicPath('scripts/ecwidget/econdawidget.js')}}"></script>
		    <script src="{{publicPath('scripts/econda-recommendations.js')}}"></script>
{% endblock %}

Econda Cross Sell Integration

Extend ProductController on the project level.



namespace Pyz\Yves\ProductDetailPage\Controller;

use Spryker\Shared\Config\Config;
use SprykerEco\Shared\Econda\EcondaConstants;
use SprykerShop\Yves\ProductDetailPage\Controller\ProductController as SprykerProductController;
use Symfony\Component\HttpFoundation\Request;

class ProductController extends SprykerProductController
	 * @param array $productData
	 * @param \Symfony\Component\HttpFoundation\Request $request
	 * @return array
	protected function executeDetailAction(array $productData, Request $request): array
		$productViewTransfer = $this->getFactory()
			->mapProductStorageData($productData, $this->getLocale(), $this->getSelectedAttributes($request));


		return [
			'product' => $productViewTransfer,
			'productUrl' => $this->getProductUrl($productViewTransfer),
			'econdaAccountId' => Config::get(EcondaConstants::ACCOUNT_ID),

Add a new field econdaAccountId to the pdp.twig file on the project level and extend product-detail molecule calling:

{% define data = {
	product: _view.product,
	productUrl: _view.productUrl,
	econdaAccountId: _view.econdaAccountId,
} %}

{% include molecule('product-detail', 'ProductDetailPage') with {
	class: 'box',
	data: {
		description: data.product.description,
		attributes: data.product.attributes,
		product: data.product,
		econdaAccountId: data.econdaAccountId
} only %}

To add Cross Sell Widget you should include Econda Cross-sell-widget molecule to the product detail page in product-detail.twig and add required data field:


{% define data = {
	product: required,
	econdaAccountId: required,
	category: {name: 'test'}
} %}

{% include molecule('econda-cross-sell-widget', 'Econda') with {
	data: {
		product: data.product,
		category: data.category,
		econdaAccountId: data.econdaAccountId
} only %}

Econda Analytics

As Econda analytic script emos2.js is connected, it will automatically send default statistic (visits, activity). To specify statistics:

Include econda-tracker.twig molecule to the page you need to track and pass specific data to send to analytics. For example product views analytic on product detail page: product -detail.twig

product -detail.twig

{% include molecule('econda-tracker', 'Econda') with {
	data: {
		product: data.product,
		content: '/catalog/' ~ ((data.category is not null) ? ~ '/' : '') ~,
		category: data.category
} only %}

This implementation will collect product information, viewed page, category and send it to econda product views statistics.

You can refer to data contract in econda-tracker.twig to send another specific information.