Placing widgets on your product pages is a process that closely mirrors the process for placing widgets in other locations. There is one additional step that includes adding an extra parameter to make these widgets feature content of that specific product. Please see the process outlined below.
Widget embed code
To place a widget previously created in the Widget editor (See Widget Editor) of the Photoslurp control panel, you would need to insert the code shown below into your product page template.
<!-- Start Photoslurp Embed Code -->
<div class="ps-container">
<ps-widget data-config="COPY HERE THE WIDGET ID FOR THIS WIDGET"></ps-widget>
<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
</div>
<!-- End Photoslurp Embed Code -->Please note that you must fill the data-config value with the Widget ID of the widget.
Product Widget Related Parameters
The most important additional parameter for your product pages is 'productId'. This is the parameter in which you will set up dynamic filtering by SKU.
- productId (identifier/SKU of the product in your Photoslurp catalog).
This parameter is used to display only those images to which the specified product SKU has been assigned in your campaign. This value must be dynamically set using your e-commerce platform templating engine to match the product being currently browsed.
You may also need to use the following parameter if you have a multi-language store and catalogue.
- lang (language code for this store view)
This parameter informs our widget about the language it has to retrieve products. Its value must match the corresponding language code for this language in your Photoslurp catalog.
Finally, if you choose to feature more content besides that of the product featured on this page, you can use the following parameter to show content related to the product type. In order to use this parameter you will need to have product type data in your product feed.
- productType (values stated in the product_types field of the product feed).
Photoslurp Product types feature enables you to show only content related to specific categories in a Photoslurp widget. This parameter takes as it's input a comma separated list of categories, or a list with angular brackets to show hierarchy: Men > Shoes.
For more information on Product Types, visit this guide.
Additional Parameters Insertion
These parameters are to be added in a separate section in your product page template before the Widget embed code:
<!-- Start Photoslurp Additional Parameters Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
// lang: 'INSERT LANGUAGE CODE HERE',
// productId: ['INSERT PRODUCT SKU HERE'],
// productType: ['PRODUCT TYPE 1', 'PRODUCT TYPE 2', '...']
};
</script>
<!-- End Photoslurp Additional Parameters Code -->Ensure that you have inserted the necessary data for the parameters that you require in the code above, and uncomment them before saving.