Accotabs

accotabs
Written By Dmytro Kyselov

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

<!-- Plugin Accotabs - Add Tabs To Product Additional Section -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->

<!-- Add Tabs To Product Additional Section - Options Block -->
<!-- This block can be added before the plugin code or to any product page or to the shop header code injection -->
<script>
////////////////////////////////////////////////////////////////////////////////


// Options are the same as in the plugin instructions
const options = {
  url: 'tabs-url', // Tabs URL
  design: false,  // 'accordion' or 'tabs'
  oneTabOpen: false, // true
  openSpecificTab: 0, // number of a specific tab, for example 1
  openTabOnHover: false // true
};

// To add tabs only to products with certain categories or tags, set filterByCategory or filterByTag
// to true and add categories or tags you want to filter by in categoriesFilter or tagsFilter
const filter = {
  byCategory: false, // true
  byTag: false, // true
  categories: [
    'apple',
    'orange',
  ],
  tags: [
    'delicious',
    'soft',
  ]
}
////////////////////////////////////////////////////////////////////////////////
document.addEventListener('DOMContentLoaded', function() { addTabsToProductAdditionalSection(options, filter) });
</script>
<!-- end Add Tabs To Product Additional Section - Options Block -->

<!-- Add Tabs To Product Additional Section - Function -->
<!-- This block should be added before the plugin code -->
<script>function addTabsToProductAdditionalSection(options, filter){ function createTabs(options){ const tabs=document.createElement('div'); tabs.className='js-accotabs'; tabs.setAttribute('data-url', options.url); if (options.design) tabs.setAttribute('data-design', options.design); if (options.oneTabOpen) tabs.setAttribute('data-one-tab-open', options.oneTabOpen); if (options.openSpecificTab) tabs.setAttribute('data-open-specific-tab', options.openSpecificTab); if (options.openTabOnHover) tabs.setAttribute('data-open-tab-on-hover', options.openTabOnHover); return tabs;} function addTabsToSection(options){ const additionalSection=document.querySelector('.ProductItem-additional') || document.querySelector('.ProductItem-summary') || document.querySelector('.product-description'); if (additionalSection) additionalSection.appendChild(createTabs(options));} function getPostMeta(metaName='category'){ const wrapper=document.querySelector('.hentry'); const data=[]; wrapper.className.split(' ').forEach(function(c){ if (c.indexOf(`${metaName}-`) !==-1) data.push(c.replace(`${metaName}-`, ''));}); return data;} function filterMeta(productItems, filterItems){ return productItems.filter(function(c){ return filterItems.includes(c);}).length;} function handler(){ if (!document.querySelector('.collection-type-products.view-item')) return null; if ((filter.byCategory && filterMeta(getPostMeta(), filter.categories)) || (filter.byTag && filterMeta(getPostMeta('tag'), filter.tags)) || (!filter.byCategory && !filter.byTag)){ addTabsToSection(options);}} handler(); window.addEventListener('mercury:load', handler)};</script>
<!-- end Add Tabs To Product Additional Section - Function -->

<!-- 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 -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4/dist/ready.umd.min.js"></script>
<script>
function moveTabsUnderProductPrice(){
  ready('.collection-type-products.view-item .c-tabs__wrapper', function(tabs) {
    var price = document.querySelector('.product-price');
    price.parentNode.insertBefore(tabs, price.nextElementSibling);
  });
}
moveTabsUnderProductPrice();
</script>
<style>
  .collection-type-products.view-item .c-tabs__wrapper {
    order: 3;
  }
</style>
<!-- end Move Tabs Under Price on Product Page -->

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 {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}
.c-tabs__tablist[hidden] {
  display: block;
  max-width: 200px;
}
.c-tabs__tablist li {
  margin: 0 !important;
}
.c-tabs__tablist::after {
  display: none !important;
}
.c-tabs__tablist + .c-tabs__content {
  flex: 1 1 0;
}
/* Disable Accordion */
@media (min-width: 641px) {
  .c-tabs__tablist[hidden] .c-tabs__tab {
    max-width: 0;
  }
}
</style>
<!-- end Make Tabs Vertical -->

Remove all paddings

To remove all paddings inside a tab panel, add this code below the plugin code in Code Injection. 

<style>
/* Plugin Accotabs - Remove Paddings */
.c-tabs .page-section,
.c-tabs .content-wrapper,
.c-tabs .content {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 1px !important;
}
</style>
Dmytro Kyselov http://dmytrokyselov.com/
Previous

Sidebar