Adding tabs on product page + simple entry

Solved
tim
Shopify Expert
2858 117 937

Actually, I've updated GIST with non-jQuery javascript. This should be a better solution then adding jQuery.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
kub
Explorer
77 2 24

WOOOW thanks @tim 

Yesterday i tried the updated which was mentioned in an older post but there was the same issue.  I tried with the new one and works great. 

Thank you so much !!!

0 Likes
TEAMHW
New Member
5 0 0

Hi @ThomasGottchalk 

 

did you get an answer on this ? Did you find a way to get out of the last tab to put text or image ?

thanks in advance

0 Likes
TEAMHW
New Member
5 0 0

Hi,

I am really interested to have an answer on that. Is someone know how to get out of the tab ?

 

thank a lot

0 Likes
tim
Shopify Expert
2858 117 937

Ok, I've added an option to stop tabs.

To do this, just add a line of text and mark it as Heading 5. This line will be discarded and everything below it will be output below tabs.

It's the same GIST

Have not touched CSS and Javscript this time, all change is in the liquid part:

% comment %}
  if combine_pretext is false, the text before the first <h6> will be shown above all tabs, otherwise added to the first tab
  if stop_on_h5 is true, tabs parsing will stop on first H5 element and the rest will be shown below tabs.
  What's inside H5 is discarded, but still put something meneningfull there, just in case you switch theme or alike.
  No multiple H5 elements.
{% endcomment %}
{% assign combine_pretext = false %}
{% assign stop_on_h5  = true %}

{% assign description = tabbed-description | default: product.description %}
{% if description contains "<h6>" %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "<h5>" %}
        {% assign posttext = description | split: "</h5>" | last %}
        {% assign description = description | split: "<h5>" | first %}
      {% endif %}


      {% assign chunks = description | strip | split: "<h6>" %}
      {% for c in chunks %}
          {% if c contains "</h6>" %}
              {% assign chunk = c | split: "</h6>" %}
              {% assign tab_heads = tab_heads | append: ",," | append: chunk.first %}
              {% assign tab_texts = tab_texts | append: ",," %}
              {% if pretext != blank  and combine_pretext %}
                  {% assign tab_texts = tab_texts | append: pretext | append: "<br>" %}
                  {% assign pretext = '' %}
              {% endif %}
              {% assign tab_texts = tab_texts | append: chunk.last  %}
          {% elsif forloop.first %}
              {% assign pretext =  c %}
          {% endif %}
      {% endfor %}

      {% assign tab_heads = tab_heads | remove_first: ",," | split: ",," %}
      {% assign tab_texts = tab_texts | remove_first: ",," | split: ",," %}

      {% assign index =  1  %}
      {% if pretext != blank and combine_pretext == false %}
        <div class=pretext>{{ pretext }}</div>
      {% endif %}

      <div>
        <ul class="tabs">
          {% for head in tab_heads %}
              <li><a href="#tab-{{- index -}}">{{ head }}</a></li>
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        </ul>
        {% assign index =  1  %}
        {% for text in tab_texts %}
          <div id="tab-{{- index -}}">{{ text }}</div>
          {% assign index =  index | plus: 1  %}
        {% endfor %}
      </div>
      {% if posttext != blank %}
          <div class=posttext>{{ posttext }}</div>
      {% endif %}
  <script>
    . . .  check out the GIST for the rest of the code
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!