Add Widget

V2 Add Widget GTM

Adding Your Own Widget
======================

Any Product List created in the Yfret portal can be added as a custom widget to the Home Page of your site.

<h2>Creating a Product List</h2>

 - Login to your **Yfret Portal**.
 - Click on **Content** tab and select **product**
 - Select the products by handpicking or by applying filters.
 - Click on **Selected** button, and enter the product list name and click **save**
 - copy the **product list name** from the header, the same will be used to add the custom widget.
 ![enter image description here](http://i.imgur.com/pDcDjnr.png)

<h2>Adding a custom widget to Home Page</h2>

 - Login to your [google tag manager console](https://tagmanager.google.com/#/home)
 - Click on **workspace** tab
 - Click on **Folders**
 - Click on **Home Page** or **Product Page** based on where you want the widget to be added
 - Click on the **Menu** Icon in the right upper corner of the folder, and select **Add New Tag** 
 ![hpw](http://i.imgur.com/iOgfokt.png)
 - In the Create Tag page replace **untitled tag** with any widget name. And click on the **Tag Configuration**
 ![hpw](http://i.imgur.com/tATgb8b.png)
 - In Choose Tag Type page, scroll down and click on **Custom HTML**
 ![hpw](http://i.imgur.com/yyn2iD4.png)
 - In the **HTML** Section, copy and paste the following Widget Code.
```html
<script>
  
  var widget_productlist = "ADD PRODUCT LIST NAME HERE"
  
  //CHANGE THE FOLLOWING LINES TO CUSTOMIZE THE WIDGET
  
  //ADD WIDGET PARENT HERE
  var widget_parent = {{Home_Parent_1}}
  
  //ADD WIDGET CSS HERE
  var widget_css = {{Yfret_widget_css}}
  
  //ADD WIDGET HEADER HERE
  var widget_header = {Default Header}}
  
  var widget = jQuery('<div id="'+widget_productlist+'_widget" style="margin:0 20px;"><br><div class="widget_header_ui recently_viewed_text" style="display:none">'+widget_header+'</div><br></div>')

  var parent = jQuery(widget_parent)
  
  if(parent.length === 0){
    console.log('yfret :: parent css selector not found')
  } else {
  	parent.append(widget)
  }
  

</script>

```

 -  In the widget code, replace **ADD PRODUCT LIST NAME HERE** with the **productlist name** created in the Yfret panel. (Enter the Productlist name within quotes)

![hpwc](http://i.imgur.com/noRHib0.png)
 
 - Click on **Advanced Settings** , In **Tag Firing Priority** set the value as **1**
 
 ![hpwc](http://i.imgur.com/xgcZXuw.png)
 - Click on **Triggering**
 ![hpwc](http://i.imgur.com/PO6A9pa.png)
 - In Choose a Trigger page, Choose on which page the widget should be added **Product Page** or **Home Page**
 ![hpwc](http://i.imgur.com/LJQTBuV.png)
 - Click on **save**
 


----------


 - Click on **Folders**
 - Click on **Home Page** or **Product Page** based on where you added the Widget Code just now.
 - If it is **home page** folder, click on **Home Page Widgets**, else if it is **Product Page** folder click on **Product Page Widgets**

 ![enter image description here](http://i.imgur.com/kbmXN9g.png)
 - Add the **productlist name** in the value field (Enter as comma seperated list). For Example if the **productlist name** is **diwali_collections**
 
![hpw](http://i.imgur.com/2p4u4Mf.png)
 
 - Click on **save**
 - Same steps applies to adding widgets to product page

##Customizations : 
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=6f696be1d0d5780be3965c34d76c4483&filename=V2_Adding_Custom_Header" target="_blank">Adding Your Own Header</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=15e62bf1219d05a34b8c1b0fcb597219&filename=V2_Adding_Custom_CSS" target="_blank">Adding Your CSS Changes</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=c1a727a828d7c62e33e33079c0213e83&filename=v2_Change_the_widget_position" target="_blank">Changing the display position of the widget</a></li>
##Other Steps:
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b28b8929085eb6c6e8b1797b02531567&filename=V2_Publish_the_widgets" target="_blank"> Publish the Widget</a></li>

V2_Add_Widget_GTM

Adding Your Own Widget
======================

Any Product List created in the Yfret portal can be added as a custom widget to the Home Page of your site.

<h2>Creating a Product List</h2>

 - Login to your **Yfret Portal**.
 - Click on **Content** tab and select **product**
 - Select the products by handpicking or by applying filters.
 - Click on **Selected** button, and enter the product list name and click **save**
 - copy the **product list name** from the header, the same will be used to add the custom widget.
 ![enter image description here](http://i.imgur.com/pDcDjnr.png)

<h2>Adding a custom widget to Home Page</h2>

 - Login to your [google tag manager console](https://tagmanager.google.com/#/home)
 - Click on **workspace** tab
 - Click on **Folders**
 - Click on **Home Page** or **Product Page** based on where you want the widget to be added
 - Click on the **Menu** Icon in the right upper corner of the folder, and select **Add New Tag** 
 ![hpw](http://i.imgur.com/iOgfokt.png)
 - In the Create Tag page replace **untitled tag** with any widget name. And click on the **Tag Configuration**
 ![hpw](http://i.imgur.com/tATgb8b.png)
 - In Choose Tag Type page, scroll down and click on **Custom HTML**
 ![hpw](http://i.imgur.com/yyn2iD4.png)
 - In the **HTML** Section, copy and paste the following Widget Code.
```html
<script>
  
  var widget_productlist = "ADD PRODUCT LIST NAME HERE"
  
  //CHANGE THE FOLLOWING LINES TO CUSTOMIZE THE WIDGET
  
  //ADD WIDGET PARENT HERE
  var widget_parent = {{Home_Parent_1}}
  
  //ADD WIDGET CSS HERE
  var widget_css = {{Yfret_widget_css}}
  
  //ADD WIDGET HEADER HERE
  var widget_header = {Default Header}}
  
  var widget = jQuery('<div id="'+widget_productlist+'_widget" style="margin:0 20px;"><br><div class="widget_header_ui recently_viewed_text" style="display:none">'+widget_header+'</div><br></div>')

  var parent = jQuery(widget_parent)
  
  if(parent.length === 0){
    console.log('yfret :: parent css selector not found')
  } else {
  	parent.append(widget)
  }
  

</script>

```

 -  In the widget code, replace **ADD PRODUCT LIST NAME HERE** with the **productlist name** created in the Yfret panel. (Enter the Productlist name within quotes)

![hpwc](http://i.imgur.com/noRHib0.png)
 
 - Click on **Advanced Settings** , In **Tag Firing Priority** set the value as **1**
 
 ![hpwc](http://i.imgur.com/xgcZXuw.png)
 - Click on **Triggering**
 ![hpwc](http://i.imgur.com/PO6A9pa.png)
 - In Choose a Trigger page, Choose on which page the widget should be added **Product Page** or **Home Page**
 ![hpwc](http://i.imgur.com/LJQTBuV.png)
 - Click on **save**
 


----------


 - Click on **Folders**
 - Click on **Home Page** or **Product Page** based on where you added the Widget Code just now.
 - If it is **home page** folder, click on **Home Page Widgets**, else if it is **Product Page** folder click on **Product Page Widgets**

 ![enter image description here](http://i.imgur.com/kbmXN9g.png)
 - Add the **productlist name** in the value field (Enter as comma seperated list). For Example if the **productlist name** is **diwali_collections**
 
![hpw](http://i.imgur.com/2p4u4Mf.png)
 
 - Click on **save**
 - Same steps applies to adding widgets to product page

##Customizations : 
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b9feab6fcec87d4e966d9d095c3ce603&filename=step3_GTM_header" target="_blank">Adding Your Own Header</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b9feab6fcec87d4e966d9d095c3ce603&filename=step3_GTM_header" target="_blank">Adding Your CSS Changes</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b9feab6fcec87d4e966d9d095c3ce603&filename=step3_GTM_header" target="_blank">Changing the display position of the widget</a></li>
##Other Steps:
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=5b4b3ebcf1510a1727d2baacec966921&filename=GTM_step2.1_add_widget_pdp" target="_blank"> Publish the Widget</a></li>