Dynamic frame implementation instruction

Version with client’s function

Adding a container

Div element with a special id describing the functionality of the frame. Sample Id
“ylDynamicRecommendedMainPage”.

1. Class is always ” yldynamiccontent” .
2. Div element should be placed wherever the frame should be dispaled 
3. Example: <div id=”ylDynamicRecommendedProductsPage” class=”yldynamiccontent”></div>

Dodawanie funkcji i obsługa zdarzeń

1. Global function that display product based on the Aliases received(Product ID). The form of implementation depends on you, but the following code is required after clicking on the product:
   ylData = window.ylData = window.ylData || [];
ylData.push({ 'event': { 'eventName': 'clickRecommendedProductPage', 'params': 'id=$$clickedProductId$$' } });
2. Full event description
   http://youlead.gitlab.io/#section/event
3. Example function: window.personalizeContent = function (target, products Id, param)

Event handling

Sending an event can be handled by adding the class “yl-redirect-eventName” to the link. After clicking on such link, an event named “eventName” will be forwarded.
In the same way, you can add event parameters, use the “data-yl-parameter” attribute. It can be used to pass the product alias that was clicked on.
Example:
<a class="yl-redirect-clickRecommenedProductPage"  data-yl-parameter="alias=ProductId" href="product_url">product</a>

Function call

1. We call the function as follows: window.personalizeContent(‘yl-productsRecommendedMainPage’, [‘alias1′,’alias2’,’alias3’], 1);
2. Name ‘yl-productsRecommendedMainPage’ is only example.

Version with YouLead’s function

Adding a container

1. Div element with a special id describing the functionality of the frame. Sample Id
   “ylDynamicRecommendedMainPage”.
2. Class is always ” yldynamiccontent” . 
3. Div element should be placed wherever the frame should be dispaled  . 
4. Example: <div id=”ylDynamicRecommendedProductsPage” class=”yldynamiccontent”></div>