Publishing your Top Wishlisted products using the Swym Javascript API

As the most popular Wishlist app for Shopify stores, we are constantly looking for ways to drive value for marketers by leveraging the rich data we collect as part of our Wishlist platform. In that context, surfacing the most wishlisted products as a featured collection in dynamic fashion, which was a recent feature that we enabled on our premium plans, has proven to be immensely popular with shoppers. The engagement metrics for this metric consistently demonstrate that users are engaging with this content, and using it very effectively as a product discovery aid. There is something to be said for social proof after all. Similar to the featured collections that you are likely promoting across your site, think of the Top Wishlist Products widget as yet another collection that’s dynamically populated based on your site’s wishlist activity. To ensure that you are able to have this widget blend seamlessly into your site, we’ve added support for this capability via our Javascript API and this post outlines the steps you’d follow to consume that API and render this content on your site.

We’ll need to enable the feature for your store as a first step since there are some configuration steps that need to be completed as a pre-requisite for the widget. This feature is available on our Pro, Premium, Plus and Enterprise plans. Please email us if we can help get this set up for your store.

Once the module is enabled, you have a couple of options you can choose from to render the widget:

  1. Choose a default configuration and let Swym render the widget automatically
  2. Define your own template for the widget and use our Javascript API to fetch and render the contents of the widget dynamically

Choose a default configuration and let Swym render the widget

With this option, the layout/template of the widget is pre-defined/fixed but what you can change is the actual position of the widget on your site/page. The definition of the position includes the page on which the widget is rendered (Home, Product, Cart etc.), the layout of the container (grid, carousel etc.) as well as the placement within the page. On the pages where you want the widget displayed, you’ll need to include a container (such as a DIV element) and let Swym know the selector/identifier (Class ID) of that container and the app will automatically render inside that container using the layout that’s specified. The advantage of this approach is that it mostly works out of the box, with very minimal work needed to render the widget. However, you only have limited control over the actual layout of the container and the pre-defined options for the layout template might or might not sit well with your site’s theme and layout.

Create your own custom widget template and use our Javascript API to render the widget

This approach gives you full control over the look and feel of the widget and you can ensure that the rendering of the widget doesn’t compromise your brand consistency, and sits well with the other elements/collections on your page. This is also fairly straight-forward to implement if you are a Javascript developer – you will basically need to include:

  1. A Javascript code snippet that fetches the content
  2. The container template definition (in Liquid) that will invoke that code snippet and render the fetched data as described by the template.
  3. A reference in your page HTML/Liquid that includes the container to be displayed. If your site is on a newer theme that supports sections, this reference can be pre-selected from the list of available sections using the visual editor on your Shopify admin console.

To create this dynamic widget on your site, here are the steps you’ll need to follow:

    1. Go to the theme editor on your Shopify Admin console (Shopify Admin -> Online Store -> Actions -> Edit Code)
    2. In the theme editor, go to Sections and click on “Add a new Section”
    3. Choose a name for the new section – for example, swym-widget (It’ll automatically create a file called swym-widget.liquid)
    4. Copy-paste the following code into your newly created section:
      <script id="swym-top-widget-js">
        window.SwymCallbacks = window.SwymCallbacks || [];
        window.SwymCallbacks.push(function(swat){
          var opts = {
            params: {'type': 'top-wishlist', n: 10, days: 30}, // n - number, days - number of days
            scb: function(response) {
              var products = response.productmetadata;
              // product schema here
              /*
              {
                "vendor": "Docblack",
                "vval1": "New Bejewelled Black Diamond Skull Belt Buckle",
                "tags": "belt buckle, diamonds, jewel, skull",
                "iqty": -1,
                "vkey3": null,
                "compareatprice": null,
                "vkey2": "Size",
                "vval3": null,
                "oiqty": -1,
                "empi": 3774408065,
                "title": "Bejewelled Black Diamond Skull Belt Buckle",
                "prodtype": "Accessories",
                "sku": "DB46-BLK-0-NEW",
                "UpdateTS": "2017-07-03T05:50:46-04:00",
                "pid": "x6Esf7grmmPLM6Rqra7Zk18jK8cclEVyeN1Snq11Wdg=",
                "epi": 24568888705,
                "iu": "https://cdn.shopify.com/s/files/1/1110/2832/products/DB46_SkullBeltBuckle.jpeg?v=1451482324",
                "uri": "http://swym-shop1.myshopify.com/products/bejewelled-black-diamond-skull-belt-buckle?variant=24568888705",
                "vval2": "23",
                "pr": 19.95,
                "vkey1": "Title"
              }
              */
              // Rendering sample
              var renderedHTML = "<div>";
              products.forEach(function(p){
                // SwymUtils.renderTemplate - Utility to handle Mustache template rendering
                renderedHTML += SwymUtils.renderTemplate('swym-widget-product1', p);
              }, this);
              renderedHTML += "</div>";
              document.getElementById("swym-widget-loop").innerHTML = renderedHTML;
            },
            lcb: function() {
              // show loading as needed
            },
            fcb: function() {
              console.log("Error fetching widget", arguments);
            }
          }
          swat.widgetProductsApi.fetch(opts);
        });
      
      </script>
      
      <!-- The snippet below is a sample template for the widget container -->
      <!-- This sample was designed for the "Supply" Shopify theme and might not work with other themes -->
      
      <div class="section-header">
      <p class="h1 section-header--left">Top Wishlisted Products</p>
      </div>
      <style id="swym-top-widget-style">
        .swym-widget-loading {
          text-align: center;
          padding: 20px 0px;
          color: rgba(999);
        }
      </style>
      
      <div id="swym-widget-loop" 
           class="grid grid--uniform grid--view-items">
        <div class="swym-widget-loading">Loading...</div>
      </div>
      
      {% raw %}
      <script id="swym-widget-product1" type="x-tmpl-mustache">
        <div class="grid-item large--one-fifth medium--one-third small--one-half">
            <a class="product-grid-item grid-view-item__link" href="{{ uri }}">
            <div class="product-grid-image" style="height:123px;">
            	<div class="product-grid-image--centered">
              	<img class="grid-view-item__image" src="{{ iu }}" alt="{{ title }}">
              </div>
            </div>
              <p class="grid-view-item__title">{{ title }}</p>
              <div class="product-item--price">
                  <span class="product-price__price">$ {{ pr }}</span>
                  <div class="swym-wishlist-count-container swym-text-color">
                      <i class="swym-wishlist-icon"></i>
                  </div>
              </div>
            </a>
        </div>
      </script>
      {% endraw %}
      
      {% schema %}
        {
          "name": "Swym Widget",
          "settings": [],
          "presets": [
                {
                  "name": "Swym Widget Wishlist",
                  "category": "Collection"
                }
        ]
        }
      {% endschema %}
      
      {% stylesheet %}
      {% endstylesheet %}
      
      {% javascript %}
      {% endjavascript %}
    5. That snippet includes both the JS code to fetch the top wishlisted items as well as a sample container definition. This container we’ve created is referenced as <script id=”swym-widget-product1″ type=”x-tmpl-mustache”> in the above code sample. Note that the definition for this container includes certain dependencies (CSS classes) that are valid for the theme that we created this sample widget on. For your store, you’ll need to suitably alter the definition of the container but just make sure that the names of the mustache variables/attributes aren’t changed – since those variables represent the link between the code snippet that fetches the contents and how they get rendered inside the container.
    6. Once that’s done, the step that remains is including a reference to this section in your page layout. If your site theme supports dynamic sections that can be added via the UI, go to your theme editor (Shopify Admin -> Themes -> Customize Theme), and click on Add section under Sections – and you should see “Swym Widget” show up on the list of pre-configured sections you can choose from. Select the section and drag and drop it where you want the widget to be positioned, and that should be it.If your site is on an older theme that doesn’t support sections, you can go to the template for the page where you are trying to add this widget (Templates/index.liquid, for example) and include a reference to the section we just added in the previous step as follows:
      {% section 'swym-widget' %}

      And that should be it – save your changes, and when you reload your site, the widget should now get displayed on the page(s) you specified and dynamically render the content based on your store’s most popular Wishlist products.

Recommended Posts

Leave a Comment