Why isn't the tab panel displaying on my product page?

Store Design
1

Hi there,

I added recently manually a tab panel on my product page to display some information on a product I’m selling.

It was working just fine so far but when I woke up this morning I realized the tabs where not showing any content anymore when clicking on the different tabs… I have not changed anything in particular really apart from some pieces of code which have (supposedly) nothing to do with my tab panel…

Here is the code I implemented on my product page and which was working fine;


            

| <br>                  <br>                 | <br>                  <br>                 | <br>                  <br>                 | <br>                  <br>                 |
| - | - | - | - |

            
              

{{ 'product_page.description_tshirt' | t }}

              
                

![organic.svg?v=1592123766|82x90](upload://npQZSjZ6nd2J9aegwaCm9qvHQ2z.svg)
{{ 'product_page.material_tshirt.cotton' | t }}

                

![gots.svg?v=1592122733|59x59](upload://drjLN0ex7vvy8DdieOcY2DxGqDT.svg)
{{ 'product_page.material_tshirt.gots' | t }}

                

![oeko.svg?v=1592123079|37x37](upload://j22KqaeWA8sZqm0SEuiCyp0WREz.svg)
{{ 'product_page.material_tshirt.oeko' | t }}

                

![thick.svg?v=1592123953|95x95](upload://lXohVNVEdk4DNpdbwIYyWNuiOSf.svg)
{{ 'product_page.material_tshirt.longlastingness' | t }}

                

              
                

![reversideout-01.svg?v=1592126554|90x90](upload://jQhvvwl0IVcWnhamssnx8s0mZ1l.svg)
{{ 'product_page.care_tshirt.wash' | t }}

                

![mixcolours-01.svg?v=1592126203|90x90](upload://bfidjfXQgrR5GDv7AjRMeKB1ZVN.svg)
{{ 'product_page.care_tshirt.mix' | t }}

                

![hangdry-01.svg?v=1592126767|90x90](upload://cIkyPcGG8M1PwOWqo0b2ne3FEjk.svg)
{{ 'product_page.care_tshirt.hang' | t }}

                

![wash30-01.svg?v=1592126204|90x90](upload://xBJvHtjkMcSqnPkb2VUIPXJlOei.svg)
{{ 'product_page.care_tshirt.temperature' | t }}

                

![notiron-01.svg?v=1592126555|90x90](upload://ufk5DuY97pQMdNHVgrB4UDo1bt3.svg)
{{ 'product_page.care_tshirt.iron' | t }}

                

              

{{ 'product_page.fit_tshirt' | t }}

And here is the .json file that is associated with it for English:

"product_page": {
    "description_tshirt": "This unique garment has been thought to last long and take a special place in your heart and wardrobe. We worked with a family factory in the North of Portugal to offer the highest-quality t-shirt. Not too thin, nor too thick with a slightly-oversized cut, it will go along with most of your outfits. Our homemade design is meant to make you stand out.",
    "material_tshirt": {
      "cotton": "100%-organic cotton",
      "gots": "GOTS certified",
      "oeko": "OEKO-TEX® label",
      "longlastingness": "Long-lasting soft thick material, 190 gsm"
    },
    "care_tshirt": {
      "wash": "Wash inside out",
      "mix": "Mix only with alike colours while washing",
      "hang": "Hang dry in the shade",
      "temperature": "30°C top",
      "iron": "Don't iron on the print"
    },
    "fit_tshirt": "Our t-shirt is slightly oversized. It has been made to fit all types of morphologies, so that everyone feels comfortable in her\/his clothes, girls and boys included. For girls, we would recommend to take 1-2 sizes below your normal t-shirt size. For boys, you can go for your normal t-shirt size without overthinking. Check our sizing guide to have more details and figure best which size you should pick. You can always make an exchange, free of charges.",
    "limitededition": "Limited edition, only available in preorder now",
    "descproduct": "Description",
    "careproduct": "Care",
    "materialproduct": "Material",
    "fitproduct": "Fit"
  }

Here is the page on website which I’m talking about:

https://www.waasclothing.com/products/waas-father-and-son

Any help would be much appreciated!

Thank you very much,

Guillaume

2

Hello, @JackHobbes

see the attachment further issue your theme.js file

KetanKumar_0-1596302232295.png
KetanKumar_0-1596302232295.png1920×1080 293 KB

3

Hi @KetanKumar ,

Thank you very much for your quick answer.

Here are the few last hundreds lines of my code where I have the javascript for my tabs:

$(document).ready(function() {
  var sections = new slate.Sections();
  sections.register('header', [theme.Header, theme.Search]);
  sections.register('product', [theme.Product]);
  sections.register('related', [theme.Related, theme.ProductGrid]);
  sections.register('collection', [theme.Collection, theme.ProductGrid, theme.Hero]);
  sections.register('featured-products', [theme.ProductGrid]);
  sections.register('search', theme.ProductGrid);
  sections.register('testimonials', theme.Testimonials);
  sections.register('look', [theme.Look, theme.ProductGrid]);
  sections.register('slideshow', theme.Slideshow);
  sections.register('logo-list', theme.LogoList);
  sections.register('image-with-text', theme.ImageWithText);
  sections.register('newsletter', theme.Overflow);
  sections.register('blog-template', [theme.Editorial, theme.Blog]);
  sections.register('blog', theme.Blog);
  sections.register('article', theme.Article);
  sections.register('featured-video', theme.FeaturedVideo);
  sections.register('featured-background-video', theme.FeaturedBackgroundVideo);
  sections.register('hero', theme.Hero);
  sections.register('map', theme.Map);
  sections.register('footer', theme.Footer);
  sections.register('cart', theme.Cart);

  window.broadcast__sections = sections;

  // Common a11y fixes
  slate.a11y.pageLinkFocus($(window.location.hash));

  $('.in-page-link').on('click', function(evt) {
    slate.a11y.pageLinkFocus($(evt.currentTarget.hash));
  });

  // Target tables to make them scrollable
  var tableSelectors = '.rte table';

  slate.rte.wrapTable({
    $tables: $(tableSelectors),
    tableWrapperClass: 'rte__table-wrapper',
  });

  // Target iframes to make them responsive
  var iframeSelectors =
    '.rte iframe[src*="youtube.com/embed"],' +
    '.rte iframe[src*="player.vimeo"]';

  slate.rte.wrapIframe({
    $iframes: $(iframeSelectors),
    iframeWrapperClass: 'rte__video-wrapper'
  });

  // Apply a specific class to the html element for browser support of cookies.
  if (slate.cart.cookiesEnabled()) {
    document.documentElement.className = document.documentElement.className.replace('supports-no-cookies', 'supports-cookies');
  }

  // Promo modal
  var showPromoModal = $('body').data('promo');
  if( showPromoModal ) {
    theme.promo();
  }

  // Account Page
  if($('.customer-logged-in .account').length) {
    theme.Account();
  }

  // Animate on scroll
  var showAnimations = $('body').data('animations');
  if( showAnimations &&  window.AOS ) {
    window.AOS.init({ once: true });
    $('body').addClass('aos-initialized');
  }

  // Detect keyboard interaction
  $(document)
    .on( 'mousedown', function() {
      $('body').removeClass( 'focus-enabled' );
    })
    .keyup(function(event) {
      // on TAB key press
      if ( event.keyCode === 9 ) {
        $('body').addClass( 'focus-enabled' );
      }
    });
});

$(document).one('touchstart', function() {
  theme.TouchDetect.setTouch();
});

$(document).ajaxComplete(function() {
  $(window).resize();
});
function displayDiv(div) {
  var x = document.getElementById(div);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
};

function displayDivDescription(div) {
  var y = document.getElementsByClassName("tabs-product");
  
  y.forEach((val) => {
    val.style.display = "none";
  });
  
  var x = document.getElementById(div);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
};

function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));

  return {
    total,
    days,
    hours,
    minutes
  };
};

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  if (clock !== null) {

  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');

  function updateClock() {
    var total_secondes = (deadline - new Date()) / 1000;
    var jours = Math.floor(total_secondes / (60 * 60 * 24));
    var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
    var minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);

    daysSpan.innerHTML = jours;
    hoursSpan.innerHTML = ('0' + heures).slice(-2);
    minutesSpan.innerHTML = ('0' + minutes).slice(-2);
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
  }  
};

var deadline = new Date("August 15 00:00:00 2020");

initializeClock('clockdivwhite', deadline);
initializeClock('clockdiv', deadline);

// Get the container element
var btnContainer = document.getElementById("myTab");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("button-nav");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("nav-link button-nav active");
    var current2 = document.getElementsByClassName("nav-item active");
    if (current.length !== 0 && current2.length !== 0) {
    	current[0].className = current[0].className.replace(" active", "");
      	current2[0].className = current2[0].className.replace(" active", "");
    }
    this.className += " active";
    this.parentElement.className += " active";
  });
}

document.getElementsByClassName("nav-link button-nav active")[0].click()

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
});

// Animation button Early Birds and Latecomers

function showhideeb() {

    $('#earlyBird').slideToggle(400);
}

function showhidelc() {

    $('#lateBird').slideToggle(400);
}
4

@JackHobbes

Thanks for update

can you please your tab demo script and compare.

5

@KetanKumar ,

It is very weird, I somehow fixed it.

I used an old backup I had made where the tabs where showing and restored it.

What seemed to cause the tabs not to show anymore was a pre-order app which I had not apparently uninstalled properly.

Thanks again for the help!

Jack

6

@JackHobbes

Thanks for update.