Shopify Question posted in
The Shopify help center can be found here.

Browser to remember the tab last opened when clicking browser back button – Shopify

I am using product tabs to easily filter through my products on my homepage (Shopify site). However, when a user clicks to view a product and then decides to click the back button, the browser returns the default ‘All Products’ category, rather than the actual #tab that was opened.

The code for the active tabs in liquid are:

 <div class="product-tab-content">
  <table class="nav nav-tabs table-center" role="tablist">
    {% for block in section.blocks %}
      {% if block.settings.title != blank %} 
        <td role="presentation" class="{% if forloop.index == 1 %}{{'active'}}{% endif %}"><a href="#tab{{ forloop.index }}" aria-controls="tab{{ forloop.index }}" role="tab" data-toggle="tab">
         <img class="icon-hotkeys" src="{{ block.settings.image-icon | img_url: 'Vib1' }}"/> {{ block.settings.title }}</a></td>
       {% endif %}   
    {% endfor %}
  </table>

I have managed to make the user return to the same scrolling position as previous, is there anyway of making the correct tab reload also? Sorry if this is simple! Any help would be much appreciated!

Tags:

2

Answers


  1. 0 
    you can store the current tab in localstorage;

// Store
localStorage.setItem("current-tab", "value-like-id-of-the-current-tab");

// Retrieve
localStorage.getItem("current-tab");
    Login or Signup to reply.
  2. 0

    When you click the tab, does it append it to the url (e.g. /#tab1)?

    If so, when you navigate away and then hit back, does it take you back to updated url or the original one? If it’s the updated one so you may be able to sniff the url on pageload and apply .active to the correct tab. If not, you might have to set and read a cookie (see here), and/or update the window.history object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search