Step 5 - Integrate a widget on category pages

Create the new category page widget in the Photoslurp widget editor by following the same procedure as for the home page and product page widgets in the previous steps. Once you configured the category page widget on Photoslurp head to "Moderation -> HTML and JavaScript snippets" on Idosell's panel top menu.

You will be presented with a list of campaign which host the snippets of code that you want to run on specific pages of your site. Click on the button "Add a campaign" located at the top of the campaigns list, enter a name for your new campaign (e.g. "Photoslurp widgets"), make the campaign active, and select the sites where you want the campaign to be active. After you save the settings click you can return to the campaigns list by clicking on the link "Back to campaigns list".

Now click on the link "edit the snippets" of the Photoslurp campaign just created and click on the button "New Snippet". The snippet settings form will load:

Follow these steps to configure the widget:

1. Give the snippet a descriptive name (e.g. "Category page widget")
2. Set "Active" to "Yes"
3. Set "Snippet type" to "JavaScript"
4. Check all the screen size boxes in "Display on devices"
5. Set "Automatic control and deactivation" to "No"
6. Set "Display in" to "Body section end"
7. Set "Show on subpages" to "Selected" and check the box next to "Search results".
8. Set "Entered discount code" to "no"

After you have configured the settings click on the "Edit JS" tab of the code editor, and paste the following code:

Note: You must edit the code to include the ID of your category widget from the Photoslurp widget editor. Lines 2 and 4 of the code are commented with instructions to set the widget ID, and to optionally modify the widget position on the page.

let widgetAttributes = {};

// PASTE THE ID OF YOUR CATEGORY WIDGET FROM THE PHOTOSLURP WIDGET EDITOR IN THIS VALUE
widgetAttributes.id = "PASTE THE WIDGET ID HERE";

// CHANGE THIS VALUE TO A VALID CSS SELECTOR TO MODIFY THE WIDGET POSITION
widgetAttributes.positionBefore = "footer";


let targetNode = document.querySelector(widgetAttributes.positionBefore);
let container = document.createElement('div');
container.setAttribute("class", "ps-container");
let widget = document.createElement('ps-widget');
widget.setAttribute("data-config", widgetAttributes.id);
container.appendChild(widget);
let widgetInsert = document.querySelector(widgetAttributes.positionBefore);
widgetInsert.parentNode.insertBefore(container, widgetInsert);
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings[widgetAttributes.id] = {
    lang: document.documentElement.lang,
    productType: document.querySelector(".breadcrumbs .bc-active").innerText
};
if (!photoSlurpWidgetSettings) {
    var photoSlurpWidgetSettings = {};
}
var script = document.createElement('script');
script.async = true;
script.src = 'https://static.photoslurp.com/widget/v3/loader.js';
var entry = document.getElementsByTagName('script')[0];
targetNode.parentNode.insertBefore(script, targetNode);

To finish, click on the button "Duplicate in all languages" located at the top right corner of the editor to make the widget display in all the available languages of your store, and click on the "Add" button at the bottom of the page to save the changes.

The widget should show up on those category pages which have images connected to products from the category browsed after a few minutes.