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 -->

Move Tabs Under Price on Product Page.

To move tabs under price on a product page, add this code after the plugin code in Code Injection.

<!-- Move Tabs Under Price on Product Page -->
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1.2/dist/ready.min.js"></script>
<script>
function moveTabsUnderProductPrice(){
  var readyOff = ready('.collection-type-products.view-item .c-tabs', function(tabs) {
    readyOff();
    var price = document.querySelector('.product-price');
    price.parentNode.insertBefore(tabs, price.nextElementSibling);
  });
}
moveTabsUnderProductPrice();
</script>
<style>
  .collection-type-products.view-item .c-tabs {
    order: 3;
  }
</style>
<!-- end Move Tabs Under Price on Product Page -->

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.2/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:

Copy a tab link and replace the "tabpanel-" part. For example: /#tabpanel-about-us -> /#about-us

<!-- 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.2/dist/ready.min.js"></script>
<script>
function accotabsOpenTabByURL(scrollToTab) {
  // By default, a page will be scrolled to a tab
  // Set to false to disable it
  scrollToTab = scrollToTab || true;

  if (!document.location.hash || !document.querySelector('.c-tabs')) return null;
  var targetSelector = document.location.hash.replace('#', '#tabpanel-');
  ready(targetSelector, function(target) {
    var tab = document.querySelector('a[href="' + targetSelector + '"]');
    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.

<!-- Make Tabs Vertical -->
<style>
.c-tabs__wrapper:not(.is-accordion) .c-tabs {
  display: flex;
  flex-wrap: wrap;
}
.c-tabs__tablist {
  flex-direction: column;
  max-width: 150px;
}
.c-tabs__tablist li {
  margin: 0;
}
.c-tabs__tablist::after {
  display: none;
}
.c-tabs__tablist + .c-tabs__content {
  width: calc(100% - 150px);
}
/* Disable Accordion */
@media (min-width: 641px) {
  .c-tabs__tablist[hidden] .c-tabs__tab {
    max-width: 0;
  }
}
</style>
<!-- Make Tabs Vertical -->
accotabsDmitry Kiselyov