In Apostrophe CMS, can I access a widgets order index in relation to the previous and next rendered widgets?

Question

I hope someone can help.

On my home page I only have a single widget type feature-widgets, and I have six of them, one after the other. I want to add a down arrow in each widget that links to the next one, I'm guessing the easiest way is to use the widget's order index, like this #section-{{ index + 1 }}.

Any ideas how I access the current widgets order index?

I found a way of doing it by looping through the data.page.home.items on the page template, but that's not the best solution.

Thanks!

Answer 1

Since Apostrophe doesn't pass this information to individual widgets at the template level, or indeed tell widgets anything about something that is external to them, but the information is visible in the DOM, you could use a frontend solution. Since the links have no SEO value there is no harm in adding them with client side JavaScript.

You can write a play method for your widget type that does this. This ought to do it:

// in lib/modules/feature-widgets/public/js/always.js
apos.define('feature-widgets', {
  extend: 'apostrophe-widgets',
  construct: function(self, options) {
    self.play = function($widget, data, options) {
      var $anchor = $('<a data-my-anchor id="' + apos.utils.generateId() + '"></a>');
      $widget.append($anchor);
      var $next = $widget.closest('.apos-area-widget-wrapper').next().find('[data-apos-widget]:first');

      if (!$next.length) {
        return;
      }
      var $link = $('<a data-next href="#">Next</a>');
      $widget.append($link);
      $link.on('click', function() {
        location.hash = '#' + $next.find('[data-my-anchor]').attr('id');
        return false;
      })
    }
  }
})

Notice that we don't need to know what the indexes are, we just assign anchors with ids for all the widgets and update the hash of the URL as needed on the "next" clicks.