Anchor link to a tab

  • Resolved Rabbit77

    (@marc59)


    5 years, 3 months ago

    Hi,

    I’m trying to use an anchor link to go & open a specific tab in my product pages.

    I have found this great page :
    https://yikesplugins.com/knowledge-base/link-directly-to-a-custom-tab/

    But when i hit the link, it’s move on page but tab does not open.

    Here is my tab : 

    <li class="compatibilite_tab active" id="tab-title-compatibilite" role="tab" aria-controls="tab-compatibilite">
<a href="#tab-compatibilite">
Compatibilite</a>
</li>

    Link is :
    <a href="#tab-title-compatibilite">Compatibilite</a>

    In script.js i add this line :
    console.log("script done");
    so the script seems to be OK.

    Can someone help me please 🙂
    Thanks

    • This topic was modified 5 years, 3 months ago by Rabbit77.
Viewing 10 replies - 1 through 10 (of 10 total)
  • jpowersdev

    (@jpowersdev)

    5 years, 3 months ago

    Hi @marc59,

    Could you provide a link to the page in question so I can take a look?

    Thanks,
    Jon

    Thread Starter Rabbit77

    (@marc59)

    5 years, 3 months ago

    Hi @jpowersdev 🙂

    Sure, here : https://www.auto-polar.fr/produit/polarfis-pf04-vw-golf-mk5-mk6-audi-a3-8p/

    Many thanks

    jpowersdev

    (@jpowersdev)

    5 years, 3 months ago

    Hey @marc59,

    I’m seeing a couple of problems.

    First, it does not look like your tabs are actually “tabs”, they are being displayed one on top of another. That suggests that the WooCommerce tab javascript is not running properly.

    Second, I am seeing errors in the js console and it looks like your js is being bundled somehow (perhaps by an “optimization” plugin). If a js file throws an error that isn’t handled appropriately, the file will stop executing. Since all of your js is in one file, that could be causing you some problems. I’d recommend temporarily disabling the bundling so we can further debug the issue.

    Jon

    Thread Starter Rabbit77

    (@marc59)

    5 years, 3 months ago

    Thanks for answer again @jpowersdev

    I do not master enough woocommerce to answer you and here are some details.
    I use WPRocket Cache plugin, now it’s turned off.
    Every plugins are up to date.

    – Custom Product Tabs for WooCommerce version : 1.7.7
    – Woocommerce version : 5.1.0
    – jquery.flexslider.min.js file missing OK

    In Header.php file of theme :
    loaded on Top header, afeter <head> :

    wp_enqueue_script('jquery'); 
 <script type="text/javascript" src="/wp-content/themes/dt-the7/js/custom-scripts.js"></script>

    In functions.php : 

    
function load_scripts() {
    wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

    Let me know if I can help in any other way
    Thank you very much

    jpowersdev

    (@jpowersdev)

    5 years, 2 months ago

    Hi @marc59,

    Try this:

    
/**
 * Custom Script Custom Product Tabs for WooCommerce
 * link with
 */
const tabOpener = function(tab) {
    // Simulate a click on that tab.
   if ( typeof tab === 'string') {
       const currentTab = jQuery( '.' + tab + '_tab' );
        currentTab.children('a').click()
   }

    // Scroll to that tab.
    jQuery('html, body').animate({
        scrollTop: jQuery( '#tab-' + tab ).parent().offset().top
    }, 300);
}

jQuery(document).ready(function($) {
    const { hash } = window.location;
    let tab;

    // If a # exists in the url lets see if its a tab.
    if ( hash ) {
        tab = hash.replace('#','').replace('tab-title-', '');
        return tabOpener( tab );
    }

    // On click we'll check to see if the event target has a tab hash.
    $('body').on('click', function(e) {

        console.log("Click function called")

        if ( e.target.hash && ! e.target.hash.includes('#tab') ) {
            tab = e.target.hash.replace('#', '').replace('tab-title-', '');
             return tabOpener( tab );
        }
    });
});

    I changed it to strip out the “tab-title-” section and format it properly. It wasn’t finding the tab link, so it couldn’t activate it.

    Let me know if that works for you,
    Jon

    • This reply was modified 5 years, 2 months ago by jpowersdev.
    Thread Starter Rabbit77

    (@marc59)

    5 years, 2 months ago

    Hi @jpowersdev,

    Sorry for the delay.
    I try this, thank you very much, but it does not work.

    Let me know if I can help with some logs or something.
    Thank you very much

    Thread Starter Rabbit77

    (@marc59)

    5 years, 2 months ago

    Hi @jpowersdev

    Did you see my previous answer please 🙂 ?

    Thanks

    jpowersdev

    (@jpowersdev)

    5 years, 2 months ago

    Hi @marc59,

    I didn’t, I’m sorry. Thank you for replying to the thread.

    I’m not sure why that code didn’t work, but I decided to throw together a simplified version.

    document.body.addEventListener('click', function(event){
    if (event.target.hash && event.target.hash.includes('tab-title')){
        // Ignore other click events
        event.preventDefault();

        // Set up variables
        const tabTitleName = event.target.hash.replace('#', '');
        const tabName = tabTitleName.replace('title-', '');
        const tabTitle = document.getElementById(tabTitleName);
        const tab = document.getElementById(tabName);

        // Click on tab title to display tab
        tabTitle.getElementsByTagName('a')[0].click();

        // Scroll to tab
        jQuery('html, body').animate({
            scrollTop: tab.offsetTop
        }, 300);
    }
});

    Let me know if that helps,
    Jon

    Thread Starter Rabbit77

    (@marc59)

    5 years, 2 months ago

    @jpowersdev it works like a charm !!!
    Thanks so much 🙂

    jpowersdev

    (@jpowersdev)

    5 years, 2 months ago

    @marc59,

    Excellent! Glad to hear it.

    Let us know if you need anything else,
    Jon

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Anchor link to a tab’ is closed to new replies.