shopping24 documentation

s is for shopping

Widget basics

This page describes the integration of the shopping24 widget in version 6 into your website. Further it describes the attributes for customization.

Requirements

In contrast to previous versions - from v6 on - jQuery is no longer necessary, so there are no dependencies.

Resources

The JavaScript file containing the s24 widget is hosted by shopping24 internet group. To affect your page’s performance as less as necessary, we ship our JavaScript minified and load it asynchronously (non-blocking).

You can access our minified Widget JavaScript here: https://widget.s24.com/js/s24widget.min.js

Integration

The integration consists of three parts: Container, Widget-CSS and the Widget JavaScript.

Widget Container

First you have to define a container in your template in which the widget will be injected. You have to set s24widget as a class for the container. Furthermore you need to specify the app-id and widget-id as data attributes, so we can identify your widget.

Example:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID"></div>

In case you don’t use our feature to provide you with products based on your site content, you can pass us a search term instead. Consequently, you have to add data-search-term="MY SEARCH TERM" to your widget container.

The full integration could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-search-term="MY SEARCH TERM"></div>

Stylesheet

In order to display the widget, we also need a CSS file which is hosted at our widget-assets.s24.com domain.

Your necessary URL is similar to this: https://widget-assets.s24.com/css/widget/APP_ID/WIDGET_ID.css
Example:

<!-- Replace APP_ID and WIDGET_ID with your individual AppID and WidgetID. -->
<link href="https://widget-assets.s24.com/css/widget/APP_ID/WIDGET_ID.css" type="text/css" rel="stylesheet"/>

Widget include

After you have included the Widget-CSS and have defined in which container you like to insert the widget, you are ready to get the ball rolling. The last and final step is to insert our script in your template with this snippet:

<script src="https://widget.s24.com/js/s24widget.min.js" async></script>

Full example

A complete integration in block could look like this:

<!-- The HTML container -->
<div class="s24widget" data-app-id="abcd1234" data-widget-id="987" data-search-term="Blue Jeans"></div>

<!-- The CSS file is necessary. Without it the widget will not be displayed! -->
<link href="https://widget-assets.s24.com/css/widget/abcd1234/987.css" type="text/css" rel="stylesheet"/>

<!-- The Script, which loads the widget plugin, load products and injects the result into the HTML container -->
<script src="https://widget.s24.com/js/s24widget.min.js" async></script>

Custom A/B-Test

We also provide you with the possibility to track conversion of different variants. This could be interesting for you if you p.e. override the widget css or want to test different positions for the widget.

To identify your variants, you have to add the data-campaign attribute to your widget container. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-campaign="VARIANT-A"></div>

User ID

If you track a user ID, you can pass it to the widget via a data-puid attribute. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-puid="USER_ID"></div>

AdBlocker Safety

We also offer you the option to integrate our widget AdBlocker safe. If you’re interested, please email us.