Inspiration
Here are some common ways that the Storefront Javascript API can be used to build custom on-site features.
Create a Reviews Page With a Product/Group Review Switcher
This recipe will guide you through setting up a dedicated page which can switch between showing reviews for different products or groups.
2. Create a new file in the page folder of your theme called page.okendo-reviews-switcher (This will be the template name for your dedicated reviews page template).
3. Copy/paste the markup below:
<style type="text/css">
.reviews-page-wrapper {
padding-top: 2em;
}
.orc-allReviewsCollections .orc-collectionControlsLabel {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.orc-allReviewsCollections .orc-collectionControls {
-ms-flex-align: stretch;
align-items: stretch;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -3px -9px
}
.orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
-ms-flex-align: center;
align-items: center;
border: 1px solid #c2c2c2;
border-radius: 4px;
cursor: pointer;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 0;
padding: 8px 16px;
text-align: center
}
.orc-allReviewsCollections .orc-collectionControls-item-input--checked+.orc-collectionControls-item-label,.orc-allReviewsCollections .orc-collectionControls-item-input:checked+.orc-collectionControls-item-label {
border: 1px solid #535565;
box-shadow: 0 0 0 1px #535565
}
.orc-allReviewsCollections .orc-collectionControls-item {
box-sizing: border-box;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
padding: 3px 9px
}
.orc-allReviewsCollections .orc-collectionControls-item-label-heading {
display: block;
-ms-flex-preferred-size: 66.66%;
flex-basis: 66.66%;
font-size: 18px;
font-weight: 400;
text-align: left
}
.orc-allReviewsCollections .orc-collectionControls-item-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.orc-allReviewsCollections .orc-collectionControls-item-label-background {
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
display: block;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
height: 50px;
margin: 0
}
@media only screen and (min-width: 800px) {
.orc-allReviewsCollections .orc-collectionControls {
margin:-9px
}
.orc-allReviewsCollections .orc-collectionControls-item {
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: 9px
}
.orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
padding: 16px
}
.orc-allReviewsCollections .orc-collectionControls-item-label-heading {
-ms-flex-preferred-size: auto;
flex-basis: auto;
margin-bottom: 16px;
text-align: center
}
.orc-allReviewsCollections .orc-collectionControls-item-label-background {
background-position: 50%;
-ms-flex-preferred-size: auto;
flex-basis: auto;
height: 150px;
margin-top: auto;
width: auto
}
}
@media only screen and (min-width: 1200px) {
.orc-allReviewsCollections .orc-collectionControls-item {
-ms-flex:1 1 25%;
flex: 1 1 25%
}
}
@media all and (min-width: 1200px) {
.orc-allReviewsCollections .orc-collectionControls-item {
-ms-flex: 1 1 25%;
flex: 1 1 15%;
}
.orc-allReviewsCollections .orc-collectionControls-item-label-heading {
font-size: 16px;
}
}
.orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
border: 0;
}
#orc-collection-control {
margin-bottom: 4em;
}
</style>
<div class="reviews-page-wrapper">
<div class="orc-allReviewsCollections">
<div id="orc-collection-control" style="display: none">
<div id="orc-collection-controls-label" class="orc-collectionControlsLabel">Select a product range</div>
<div class="orc-collectionControls" role="radiogroup" aria-labelledby="orc-collection-controls-label">
<div class="orc-collectionControls-item">
<input
id="orc-reviews-control-0"
class="orc-collectionControls-item-input orc-collectionControls-item-input--checked js-orc-collectionRadio"
type="radio"
checked
value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
name="orc-reviews-collection-control"
/>
<label for="orc-reviews-control-0" class="orc-collectionControls-item-label">
<span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
<span
class="orc-collectionControls-item-label-background"
style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
></span>
</label>
</div>
<div class="orc-collectionControls-item">
<input
id="orc-reviews-control-1"
class="orc-collectionControls-item-input js-orc-collectionRadio"
type="radio"
value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
name="orc-reviews-collection-control"
/>
<label for="orc-reviews-control-1" class="orc-collectionControls-item-label">
<span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
<span
class="orc-collectionControls-item-label-background"
style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
></span>
</label>
</div>
<!-- Add More orc-collectionControls-item elements if you want to switch between more items -->
</div>
</div>
**<!-- SET THE data-oke-reviews-product-id attribute to shopify-<YOUR PRODUCT ID> OR data-oke-reivews-group-id to the GUID you wish to default the widget to when the page loads (usually the first radio value in the list above -->**
<div id="orc-widget-snippet" class="drp-okendo-reviews" data-oke-widget data-oke-reviews-group-id="<**YOUR DEFAULT GROUP ID GOES HERE>**"></div>
</div>
<script type="text/javascript">
((document, window) => {
const okeRenderedHandler = function(e) {
if (e.detail.widget === 'reviews-widget') {
setupCollectionControls();
}
}
document.addEventListener('oke-rendered', okeRenderedHandler);
if (!String.prototype.startsWith) {
Object.defineProperty(String.prototype, 'startsWith', {
value: function(search, rawPos) {
var pos = rawPos > 0 ? rawPos|0 : 0;
return this.substring(pos, pos + search.length) === search;
}
});
}
function setupCollectionControls() {
const snippetEl = document.querySelector('#orc-widget-snippet');
const controlEl = document.querySelector('#orc-collection-control');
const collectionRadioElements = Array.prototype.slice.call(document.querySelectorAll('.js-orc-collectionRadio'));
controlEl.style.display = 'block';
collectionRadioElements.forEach(function (radioElement) {
radioElement.addEventListener('change', function () {
if (radioElement.value) {
if(radioElement.value.toLowerCase().startsWith('shopify-')) {
snippetEl.removeAttribute('data-oke-reviews-group-id');
window.okeWidgetApi.setProduct(snippetEl, radioElement.value);
}
else {
snippetEl.removeAttribute('data-oke-reviews-product-id');
window.okeWidgetApi.setGroup(snippetEl, radioElement.value);
}
} else {
snippetEl.removeAttribute('data-oke-reviews-group-id');
snippetEl.removeAttribute('data-oke-reviews-product-id');
snippetEl.innerHTML = '';
window.okeWidgetApi.initWidget(snippetEl, true);
}
collectionRadioElements.forEach(function (element) {
element.classList.remove('orc-collectionControls-item-input--checked');
});
radioElement.classList.add('orc-collectionControls-item-input--checked');
});
});
document.removeEventListener('oke-rendered', okeRenderedHandler);
}
})(document, window);
</script>4. Modify the product/group IDs in the markup. For each group or product you wish to filter the reviews down by you will create a new orc-collectionControls-item. The value of the radio button will be either the Group ID (a group ID is in the form of a GUID) or the Product ID (a product ID is in the format shopify-<YOUR PRODUCT ID>:
<div class="reviews-page-wrapper">
<div class="orc-allReviewsCollections">
<div id="orc-collection-control" style="display: none">
<div id="orc-collection-controls-label" class="orc-collectionControlsLabel">Select a product range</div>
<div class="orc-collectionControls" role="radiogroup" aria-labelledby="orc-collection-controls-label">
<div class="orc-collectionControls-item">
<input
id="orc-reviews-control-0"
class="orc-collectionControls-item-input orc-collectionControls-item-input--checked js-orc-collectionRadio"
type="radio"
checked
value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
name="orc-reviews-collection-control"
/>
<label for="orc-reviews-control-0" class="orc-collectionControls-item-label">
<span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
<span
class="orc-collectionControls-item-label-background"
style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
></span>
</label>
</div>
<div class="orc-collectionControls-item">
<input
id="orc-reviews-control-1"
class="orc-collectionControls-item-input js-orc-collectionRadio"
type="radio"
value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
name="orc-reviews-collection-control"
/>
<label for="orc-reviews-control-1" class="orc-collectionControls-item-label">
<span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
<span
class="orc-collectionControls-item-label-background"
style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
></span>
</label>
</div>
<!-- Add More orc-collectionControls-item elements if you want to switch between more items -->
</div>
</div>
**<!-- SET THE data-oke-reviews-product-id attribute to shopify-<YOUR PRODUCT ID> OR data-oke-reivews-group-id to the GUID you wish to default the widget to when the page loads (usually the first radio value in the list above -->**
<div id="orc-widget-snippet" class="drp-okendo-reviews" data-oke-widget data-oke-reviews-group-id="<**YOUR DEFAULT GROUP ID GOES HERE>**"></div>
</div>5. Save the page template and exit the theme code editor.
6. Navigate to Online Store -> Pages and assign the page template to a given page in the Shopify: Admin:
7. View the page and confirm the switching is correct:
Last updated
