Placing widgets on a product page is the same as placing widgets in other locations, but the Additional Parameters Code must be configured either in the page’s <head> element or before the Widget Embed Code.
Widget embed code
To place a widget previously created in the Widget editor of the Photoslurp control panel, all you have to do is insert the code below into the page where you would like the widget displayed.
<!-- 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 in the data-config value with the widget ID
Widget Configuration parameters for a Product Page Widget
Mandatory parameters:
- lang - (language code for this store page).
If the store is available in different languages, this parameter will determine in what language the widget’s texts will be displayed. Its value must match the corresponding language code in your Photoslurp catalog.
- productId - (identifier/SKU of the product in your Photoslurp catalog).
In order for a widget to first display images related to a specific product (SKU), the productId additional parameter must be added to the widget. When there are no more images that match this parameter, the widget will display the rest of approved images. This value should be set dynamically, using your e-commerce platform templating engine, to match the current product page.
Optional parameters:
- productType - (values specified in the product_types field of the product feed). If you choose to feature more content in addition to the product featured on the page, you can use this parameter to display content related to the product type (categories). In order to use this parameter you will need to have product_types data in your product feed.
Its value is a comma separated list of categories (Men, Shoes), a list with angular brackets to show hierarchy (Men > Shoes) or a combination of both. For more information on the product types feature you can check this guide.
Widget Configuration Code
These parameters are to be added in a separate section in your product page template before the Widget Embed Code.
<!-- Start Photoslurp Widget Configuration Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
lang: 'INSERT LANGUAGE CODE HERE',
productId: ['INSERT PRODUCT SKU HERE'],
// UNCOMMENT AND FILL THIS FIELD IF NEEDED
// productType: ['PRODUCT TYPE 1', 'PRODUCT TYPE 2', '...']
};
</script>
<!-- End Photoslurp Widget Configuration Code -->Make sure you have inserted the necessary data for the parameters you need in the code above, and uncommented them, before saving.