Accotabs



Add the same tabs to all products

To add the same tabs to all products, add this code before the plugin code. Then set tabs URL in tabsOptions.

<!-- Plugin Accotabs - Add Tabs To Product Additional Section -->
<script>
(function() {
////////////////////////////////////////////////////////////////////////////////


var tabsOptions = {
  url: 'tabs-url', // Tabs URL
  design: false // Tabs Design ('accordion', 'tabs')
};

// To add tabs only to products with certain categories, set filterByCategory
// to true and add categories to categoriesFilter
var filterByCategory = false;
var categoriesFilter = [
  'apple',
  'orange',
];


////////////////////////////////////////////////////////////////////////////////
function createTabs(tabsOptions) {
  var tabs = document.createElement('div');
  tabs.className = 'js-accotabs';
  tabs.setAttribute('data-url', tabsOptions.url);
  if (tabsOptions.design) tabs.setAttribute('data-design', tabsOptions.design);
  return tabs;
}
function addTabsToAdditionalSection(tabsOptions) {
  var additionalSection = document.querySelector('.ProductItem-additional') || document.querySelector('.ProductItem-summary') || document.querySelector('.product-description');
  if (additionalSection) additionalSection.appendChild(createTabs(tabsOptions));
}
function getPostCategories() {
  var wrapper = document.querySelector('.hentry');
  var categories = [];
  wrapper.className.split(' ').forEach(function(c) {
    if (c.indexOf('category-') !== -1) categories.push(c.replace('category-', ''));
  });
  return categories;
}
function filterCategories(categories) {
  return categories.filter(function(c) {
    return categoriesFilter.includes(c);
  }).length;
}
function handler() {
  if (!document.querySelector('.collection-type-products.view-item')) return null;
  if (filterByCategory && filterCategories(getPostCategories())) {
    addTabsToAdditionalSection(tabsOptions);
  } else {
    addTabsToAdditionalSection(tabsOptions);
  }
}
document.addEventListener('DOMContentLoaded', handler);
window.addEventListener('mercury:load', handler);
})();
</script>
<!-- Place Tabs After Additional Content -->
<style>
.ProductItem-additional { display: flex; flex-direction: column }
.ProductItem-additional .sqs-layout { order: 0 }
.ProductItem-additional .c-tabs__wrapper { order: 1 }
</style>
<!-- end Plugin Accotabs - Add Tabs To Product Aditional Info -->

Open First Accordion Tab

To open the first accordion tab, add this code after the plugin code:

<!-- Plugin Accotabs - Open First Accordion Tab -->
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>ready('.c-tabs__wrapper.is-accordion .c-tabs__accordion-tab:first-child', function(tab) {
  setTimeout(function() { tab.click() });
});</script>
<!-- end Plugin Accotabs - Open First Accordion Tab -->

Open Tab From URL

To open a tab from URL hash, add this code after the plugin code:

<!-- Accotabs - Open Tab From URL -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@14/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>
function accotabsOpenTabByURL(scrollToTab) {
  // By default, a page will be scrolled to a tab
  scrollToTab = scrollToTab || true;
  if (!document.location.hash.match(/^#tabpanel/)) return null;
  ready(document.location.hash, function(target) {
    var tab = document.querySelector('a[href="' + document.location.hash + '"]');
    if (tab) setTimeout(() => tab.click(), 10);
    if (scrollToTab) setTimeout(scroll_, 500);
    function scroll_() {
      var scroll = new SmoothScroll();
      scroll.animateScroll(target, null, {
        updateURL: false,
        offset: tab.offsetHeight + 20,
        // Uncomment for a fixed header
        // header: window.innerWidth >= 641 ? '.Header' : '.Mobile'
      });
    }
  });
}
document.addEventListener('DOMContentLoaded', accotabsOpenTabByURL);
window.addEventListener('mercury:load', accotabsOpenTabByURL);
</script>
<!-- end Accotabs - Open Tab From URL -->

Make Tabs Vertical

To make tabs vertical, add this style after the plugin code.

<style>
.c-tabs__wrapper:not(.is-accordion) .c-tabs {
  display: flex;
  flex-wrap: wrap;
}
.c-tabs__tablist.flickity-enabled {
  width: 100%;
}
.c-tabs__tablist:not(.flickity-enabled) {
  flex-direction: column;
  max-width: 150px;
}
.c-tabs__tablist:not(.flickity-enabled) li {
  margin: 0;
}
.c-tabs__tablist:not(.flickity-enabled)::after {
  display: none;
}
.c-tabs__tablist:not(.flickity-enabled) + .c-tabs__content {
  width: calc(100% - 150px);
}
</style>
accotabsDmitry Kiselyov