Custom tabs not working - need a second pair of eyes

asternaut
Shopify Partner
6 0 0

I imagine this should be a pretty quick fix. I think I've been staring at this too long.

//My broken code:
<div class="product-description" itemprop="description">

    <ul class="tabs js-tabs-container">
      <li>
        <h4 class="product-h4">
          <a href="#tab-1" data-tab="1" class="active js-tabs-link">1</a>
        </h4>
      </li> 
      <li>
        <h4 class="product-h4">
          <a href="#tab-2" data-tab="2" class="js-tabs-link">2</a>
        </h4>
      </li>    
      <li>
        <h4 class="product-h4">
          <a href="#tab-3" data-tab="3" class="js-tabs-link">3</a>
        </h4>
      </li>   
    </ul>
   
    <div class="tab-container js-tabs-content-container">
      
      <div id="tab-1" class="tab-content tab-1 current checkMyHeight js-tab-1">
        <div class="rte">
          <div class="description" itemprop="description">   
          	Test content 1
          </div>
        </div>
      </div>
     
      <div id="tab-2" class="tab-content tab-2 js-tab-2">
        <div class="rte">
          <div class="description" itemprop="description">
           test content 2
          </div>
        </div>
      </div>
      
      <div id="tab-3" class="tab-content tab-3 js-tab-3">
        <div class="rte">
          <div class="description" itemprop="description">
           test content 3
          </div>
        </div>
      </div>
  
    </div>
  
</div>

// Theme's working code:
<div class="product-description" itemprop="description">

    <ul class="tabs js-tabs-container">
    {% if tab_1 != blank %}
      <li>
        <h4 class="product-h4">
        {% if tab_2_content != blank or tab_3_content != blank %}
          <a href="#tab-1" data-tab="1" class="active js-tabs-link">{{ tab_1 }}</a>
          {% else %}
          <div class="active js-tabs-link">{{ tab_1 }}</div>
          {% endif %}
        </h4>
      </li>
      {% endif %}
      {% if tab_2_content != blank and tab_2 != blank and tab_1 != blank %}
      <li>
        <h4 class="product-h4">
          <a href="#tab-2" data-tab="2" class="js-tabs-link">{{ tab_2 }}</a>
        </h4>
      </li>
      {% endif %}
      {% if tab_3_content != blank and tab_3 != blank and tab_1 != blank %}
      <li>
        <h4 class="product-h4">
          <a href="#tab-3" data-tab="3" class="js-tabs-link">{{ tab_3 }}</a>
        </h4>
      </li>
      {% endif %}
   
    </ul>
   
    <div class="tab-container js-tabs-content-container">
      <div class="tab-content tab-1 current checkMyHeight js-tab-1">
        <div class="rte">
          <div class="description" itemprop="description">          
            {{product.description}}        
          </div>
        </div>
      </div>

      {% if tab_2 != blank %}
      <div id="tab-2" class="tab-content tab-2 js-tab-2">
        <div class="rte">
          <div class="description" itemprop="description">
            {% capture tab2Content %}{{section.settings.tab_2_content}}{%endcapture%}
            {{ pages[tab2Content].content }}
          </div>
        </div>
      </div>
      {%endif%}
      {% if tab_3 != blank %}
      <div id="tab-3" class="tab-content tab-3 js-tab-3">
        <div class="rte">
          <div class="description" itemprop="description">
            {% capture tab3Content %}{{section.settings.tab_3_content}}{%endcapture%}
            {{ pages[tab3Content].content }}
          </div>
        </div>
      </div>
      {%endif%}
    </div>
</div>

 

0 Likes
Jason
Shopify Expert
10039 119 1876

Your two code blocks are different - one has Liquid in place and the other seems to be the output. That makes it hard to pick out differences.

Can you post a link to the page with the broken code in place? I would guess that it's not related to the code, but perhaps you're not loading the script that triggers the tabs in the first place.

Also, when you say broken what does that mean? Nothing works, looks different, etc.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
asternaut
Shopify Partner
6 0 0

Thanks for getting back to me Jason!

By broken, I mean that clicking on the tabs does nothing.

I added an alert to the onClick. The alert doesn't pop up either, so you were right about the scripts. Dev tools show that the JS file is loading, but I added the script to the page for good measure. Still doesn't work. 

The reason I pulled out all the liquid is that I don't need this to be manipulated through the settings. I might not be reading the liquid correctly, and perhaps it's part of the function?

I wish I could show you the pages but they're protected.

Here's the JS

theme.Tabs = (function () {
    return {
        /***** Private Properties *****/
        //Selectors used for jQuery targeting
        _selectors: {
            tabsContainer: '.js-tabs-container',
            tabLinks: '.js-tabs-link',
            tabContentsContainer: '.js-tabs-content-container',
            tabHeight: '.checkMyHeight',
            activeTab: '.active',
            activeContent: '.current'
        },
        //Classes used to be added/removed/checked against
        _classes: {
            checkHeight: 'checkMyHeight',
            activeTab: 'active',
            activeContent: 'current'
        },
        /*
            =function init(container)
            Initializes the click events for the tabs, which controls the fade
            animation. Also sets up the window resize event to resize the content
            =Params
            (mixed) container: Value can be a jQuery selector string, jQuery
                               object, or element. The value should return the
                               container of the cart.
        */
        init: function (container) {
            var self = this;
            var tabSpeed = 200;
            var $container = $(container);
            var $tabsContainer = $container.find(self._selectors.tabsContainer);
            var $tabCotentsContainer = $container.find(self._selectors.tabContentsContainer);
            var $tabLinks = $tabsContainer.find(self._selectors.tabLinks);
            //Set up the tab clicks
            $tabLinks.click(function (e) {
              	alert("you clicked this tab");
                var $this = $(this);
                //Get the currently active tab
                var $activeTab = $tabsContainer.find(self._selectors.activeTab);
                //Get the tab contents and their IDs
                var activeContentTab = '.js-tab-' + $activeTab.data('tab');
                var newContentTab = '.js-tab-' + $this.data('tab');
                //Only switch the tabs if they aren't the same tabs
                if (activeContentTab !== newContentTab) {
                    var $activeContent = $tabCotentsContainer.find(self._selectors.activeContent);
                    var $newContent = $tabCotentsContainer.find(newContentTab);
                    //Switch the active tab link
                    $activeTab.removeClass(self._classes.activeTab);
                    $this.addClass(self._classes.activeTab);
                    //Set up the content height class
                    $newContent.addClass(self._classes.checkHeight);
                    $activeContent.removeClass(self._classes.checkHeight);
                    //Resize to fit the new content
                    self._resize($tabCotentsContainer);
                    //Perform the fade transition
                    $activeContent.fadeOut(tabSpeed, function () {
                        $activeContent.removeClass(self._classes.activeContent);
                        $newContent.fadeIn(tabSpeed, function () {
                            $newContent.addClass(self._classes.activeContent);
                            //Resize to fit the new content
                            self._resize($tabCotentsContainer);
                        });
                    });
                }
                return false;
            });
            //Set up the resize event
            $(window).resize(self._resize.bind(this, $tabCotentsContainer));
        },
        _resize: function ($tabCotentsContainer) {
            $tabCotentsContainer.height($tabCotentsContainer.find(this._selectors.tabHeight).outerHeight());
        }
    };
}());

Again thank you so much!

0 Likes