Integrating Econda front end

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.

development.js

CopyWebpackPlugin([
    ...
        {
            from: `${appSettings.paths.assets}/scripts`,
			to: 'scripts',
			ignore: ['*.gitkeep']
		}
    ...

3. Extend page-layout-main.twig scripts block.

page-layout-main.twig

{% 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.

ProductController

<?php

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()
			->getProductStorageClient()
			->mapProductStorageData($productData, $this->getLocale(), $this->getSelectedAttributes($request));

		$this->assertProductRestrictions($productViewTransfer);

		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:

product-detail.twig

{% 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) ? data.category.name ~ '/' : '') ~ data.product.name,
		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.