Show Galleries
Show galleries are a collection of planned, live, or on-demand live shopping shows. There are three different approaches to displaying shows on your website:
- Use the Sprii markup elements. This implementation provides the fastest and best way to present your video content on your website. The markup elements and their content are constantly maintained by Sprii.
- Use the Sprii Gallery Templates. Bring your own markup and styling alongside templates which Sprii will use to augment your markup with data and custom events.
- Communicate with our REST API to get a list of shows and their status. Use this method only if you have a specific need that does not fit the markup elements approach.
The Sprii Gallery Element
To add a group of shows to your website, create a div element with the class sprii-shows-gallery. You can use data attributes on the element to filter which shows should be shown in the content. Other data attributes can change the look and feel of the shows. Here's an example:
<div
class="sprii-shows-gallery"
data-sprii-statuses="live"></div>Inside this block, you can add elements that will be shown either if there are shows within the filter (sprii-shows-gallery-has-data) or when there are no shows within the filter (sprii-shows-gallery-no-data).
A full example could be:
<div
class="sprii-shows-gallery"
data-sprii-statuses="live">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h3>Live</h3>
<p>Watch our current live show</p>
</div>
<div
class="sprii-shows-gallery-no-data"
style="display: none">
We have no active live shows. Sign up to our newslette to be notified when we go live
</div>
</div>Data properties
The following table is a list of data properties. All properties should have the prefix data-sprii- so, as example statuses will be data-sprii-statuses
| Id | Possible values | Description |
|---|---|---|
| statuses | planned, vod, live, clip | The status of the shows (planned, video on demand, live, clip ) |
| mode | shows, products, shoppables (default: shows) | Should we fetch shows, products or shoppables |
| show-expired | true / false | If true, shows where purchased deadline has expired will still be shows. Link mode can be activated for there events |
| event-ids | commaseperated event ids | Show a specific lidt of events |
| tags | commaseperated list of show tags | If events in sprii have been given tags, you can use these tags to filter. Seperate by comma (,) |
| store-ids | commaseperated list of sprii stores | If you have agreement with other sprii uses to show their shows on your website, you can add a list of those stores. Rememeber, these stores need to whitelist your domain. Seperate by comma (,) |
| product-ids | commaseperated product ids | Use when presentation is products |
| product-categories | commaseperated product categories | Use when presentation is products |
| sort | asc,desc (default: desc) | Sorting direction of shows. Based on the time the show was live or clip was created |
| lang | da,en,no,se,es (default: en) | i18n language |
| presentation | list,swiper (default: list) | Present the shows as a gallery list, or as a swiper |
| page-size | Number | How many shows to fetch per page. "Load more" will be shown when more shows can be fetched |
| display-options | comma-separated key:value pairs | Configure display options for gallery items. Available options:
|
| autoplay | minimized,maximized | Automatically plays the first show in the gallery in the specified view mode (minimized=compact or maximized=full) when the widget loads |
Gallery examples
Go get an idea of how to set up the shows, we have have created some ready-to-use examples
Complete live shopping page.
This example is a landing page where you want 3 sections:
- On top a section if a show is currently live
- After that a section of planned shows
- And last all the on-demand shows that are available
<div class="sprii-shows-gallery-wrapper">
<!-- Block with live shows, if any -->
<div
class="sprii-shows-gallery"
data-sprii-statuses="live">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h4>Watch our live show!</h4>
</div>
</div>
<!-- Block with planned shows. A CTA if no shows are planned -->
<div
class="sprii-shows-gallery"
data-sprii-statuses="planned"
data-sprii-page-size="8">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h4>Upcomming shows</h4>
</div>
<div
class="sprii-shows-gallery-no-data"
style="display: none">
<h4>Want to know when we have new planned shows</h4>
<p>Sign up for our newsletter <a href="#">here</a></p>
</div>
</div>
<!-- Block with on-demand and expired shows-->
<div
class="sprii-shows-gallery"
data-sprii-statuses="vod"
data-sprii-page-size="8"
data-sprii-show-expired="true">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h4>Past shows</h4>
</div>
<div
class="sprii-shows-gallery-no-data"
style="display: none">
<h4>No past shows available</h4>
<p>Check back later for recorded shows</p>
</div>
</div>
</div>Gallery with display options
This example shows how to use display options to customize what content is shown:
<div
class="sprii-shows-gallery"
data-sprii-statuses="vod"
data-sprii-display-options="show-date:false,show-product-image:true,show-campaign-title:false">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h4>Product Gallery (without dates and campaign title)</h4>
</div>
</div>Clips page
A section showing all product clips from a specific product category. Note, Sprii needs to know your product categories.
<div
class="sprii-shows-gallery"
data-sprii-mode="products"
data-sprii-product-category-ids="683829492">
<div
class="sprii-shows-gallery-has-data"
style="display: none">
<h4>Shoes!</h4>
</div>
</div>Show specific element
If you have a landingpage dedicated to a specific show, then this is an example you can use:
<div
class="sprii-shows-gallery"
data-sprii-event-ids="683829492"></div>Gallery areas, and managing content from sprii
You might not be confident in creating these markup sections on your website. Or maintaining the content can be difficult. Therefor we have created the Sprii Gallery setup.
In sprii you can, with the help from your success agent, create galleries. The content in the galleries is setup in Sprii, and you only need to add this section to your website:
<div
data-sprii-gallery-id="liveshopping"
class="sprii-gallery-area" />The data-sprii-gallery-id value is filled directly in sprii. The sdk will look for elements with class sprii-gallery-areaand inject the markup typed in sprii. Screenshot from an exampla setup in Sprii:
For more advanced template customization, see Gallery Templates.