Problem With Linking to tab with url

Hi @dror9098,

You’re right, by default that does not work. It would require us to add some javascript on the frontend of the site, which is something our plugin avoids doing for compatibility reasons. However, we have written an article on how to implement that functionality: https://yikesplugins.com/knowledge-base/link-directly-to-a-custom-tab/

Let me know if that helps,
Jon

Hi there,
I tried to put this code on the page with elementor html code, and unfortunately, It doesn’t work… (I tested the code with console.log to make sure it catches the code, and it does it, but the functionality of adding #id to the url and know to jump automatically didn’t work)
The url doesn’t add the #tab-XXXX to url, and when trying to navigate directly with the domain to the specific tab, it doesn’t work.
I don’t understand just why It’s work only when typing #reviews on the url, it knows how to directly move to the correct tab and jump automatically to the part of the page with the relevant data.
Can you please help me with that to know why just one tab works correctly while the others, doesn’t.
Many thanks!

• This reply was modified 4 years, 2 months ago by dror9098.

Hi, Any updates? Can you help me with this problem…
Thanks!

Hi @dror9098

You can’t add that in HTML with Elementor, you need to add it as outlined in the instructions.

Thank you.
-Tracy

Hi Tracy,
I put the code also exactly as mentioned on the guide but it still doesn’t work.
The only tab that works is “reviews” tab.

Hi @dror9098

I looked at your site and I don’t see a custom-scripts.js file being loaded. Did you name it something else?

Thank you.
-Tracy

Hi Tracy,
I removed it cause it didn’t work, but I put it back again for your reference. please check now.
If we can discuss on email it will be easier.
Thanks!

Hi @dror9098,

After some research, I found that the issue with the script is due to the characters being in hebrew. Hebrew characters aren’t valid in a url, so the browser has to “urlencode” the characters. If you open one of those links in a new tab, you’ll see a bunch of percent signs and letters and numbers before it “updates” to hebrew. In reality, it’s still the urlencoded string, it’s just hidden by the browser.

The script we provide is taking that last piece of the url (called the hash) and looking for a matching section on the page to scroll to. It is also clicking the tab to make that content appear. Unfortunately, because the urlencoded string in the address bar is a different format from the html on the page, they will never match.

There is one thing you can try, which is to decode the hash. In that case, you’d have to lightly modify the script as follows:

On the line const {hash} = window.location;, please change it to const hash = decodeURI(window.location.hash);

I can’t guarantee that will work, as there may be more problems with hebrew support afterwards, but that should solve the immediate problem of the mismatching formats.

Let me know if that helps,
Jon

Hi Jon,
Thanks for your answer,
Well I tried to change this code, now this kind of “error” doesn’t happened anymore but there is a new one:
“jQuery.Deferred exception: Cannot read property ‘top’ of undefined TypeError: Cannot read property ‘top’ of undefined
“Uncaught TypeError: Cannot read property ‘top’ of undefined”

Also, is there anyway to set the id of the tab based on the ‘Tab name’, and not by the ‘Tab Title’ on the plugin setting,
so that, the string will keep with the original language, but the id of the element will get the value by the “tab name” and not like now that it takes the “tab title” as the id value of the tab?

Also, when I tried to navigate to “#tab-reviews” through the url, it does work properly, but if I press on one of the tabs on the tab panel, it doesn’t change the url based on the active id tab on the tab panel.

Thanks!

• This reply was modified 4 years, 2 months ago by dror9098.

Hi @dror9098,

So that error means that jQuery isn’t finding the tab to jump to. Even though we decoded the url string, it still doesn’t consider it a match to the html.

Unfortunately, the functionality you’re referring to is how WooCommerce itself works. We don’t do anything to change that core functionality, we just extend the list of tabs.

Is the site being translated, or are you writing the content yourself in Hebrew? If it’s the latter, you could try naming the tabs in English, then just filling out the content in Hebrew. In that scenario, the regular script we provide should work.

If you wind up doing that, you may want the following bit of css to hide the english title from displaying:

.woocommerce .woocommerce-tabs h2 {
    display: none;
}

Jon

Hi Jon,
Thanks for your reply,
Well, I tired to add a custom tab which the id is in english, but still, it doesn’t work when trying to navigate to the current tab
I created this:
$tabs[‘comment’] = array(
‘title’ => __( ‘????? ??????’, ‘woocommerce’ ),
‘priority’ => 50,
‘callback’ => ‘woo_new_product_tab_add_review’
);

The tab id is tab_comment while the title is in another language.
when I tried to go to this tab using url: #tab-comment, it still doesn’t work.
No idea why, the error is the same error even if the tab id’s is in english language.
Thanks!

You can try navigate with the url to the tab #tab-comment
and you’ll get the same error.

• This reply was modified 4 years, 2 months ago by dror9098.

Hi!
Can you please check that so I can return to previous version on the live site..
Thanks ??

Hi @dror9098,

If you visit https://www.rivierahair.com/shop/riviera-spray/#comment, you can see it correctly clicking the tab and scrolling to the area. It seems like the google reviews widget is loading in at the same time, which pushes the scroll position down to the bottom. I can’t verify that without temporarily disabling the google reviews section.

Let me know what you find,
Jon