Okendo
  • Introduction
  • Merchant REST API
    • Quick Start
    • Endpoints
  • On Site
    • On Site Widgets
      • Reviews Widget
      • Star Rating
      • Questions Widget
      • Reviews Carousel Widget
      • Media Grid Widget
      • Media Carousel Widget
      • Reviews Badge Widget
      • Reviews Modal Trigger
    • Storefront Javascript API
      • Widget Plus Window API
      • Surveys - Connect Window API
      • Quizzes - Connect Window API
      • Referrals Window API
      • Inspiration
    • Storefront REST API
      • Quick Start
      • Endpoints
    • Advanced Widget Installs
      • Installing Widget Plus on Headless Instances
      • Installing Connect Surveys on Headless Instances
      • Stores Running an Existing Vue App
      • Installing Quizzes on Headless Instances
  • Okendo Shopify Hydrogen Support
Powered by GitBook
On this page
  1. On Site
  2. Storefront Javascript API

Inspiration

Here are some common ways that the Storefront Javascript API can be used to build custom on-site features.

PreviousReferrals Window APINextStorefront REST API

Last updated 11 months ago

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:

1. Navigate to the store's theme: Sales Channels -> Online Store -> Themes and press the menu item with the three vertical dots. Press "Edit Code" from the menu which appears: