WHMCS Integration - Problem with jquery / smarty code breaking site.

Hi

Hope you can help. We recently integrated Canvas HTML theme into our WHMCS 6.3 install and everything appeared to be working fine until we added a smarty function required for WHMCS to define the base url

{if $systemurl}
    {/if}

Now when I attempt to load a page using shortcodes like pricing boxes using a tabular setup , it seems that the page tries to load inside each tab

- [Monthly](#tabs-1)

- [1 Year](#tabs-2)

- [2 Year](#tabs-3)

Also every ahref referencing a '#' just brings the user back to the base URL which didnt happen before.

Some something somewhere is breaking the canvas theme and I think it lies within the functions.js file

Has anyone come accross this before ?

In browser console the error is

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Any help or advice would be greatly appreciated.

Kind Regards
Martin

Open file footer.tpl, and after

<script type="text/javascript" src="{$WEB_ROOT}/templates/{$template}/js/plugins.js"></script>

add

<script type="text/javascript">
$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
var base = location.href.replace(/#.*$/, '');
$('ul>li>a[href^="#"]', this).each(function () {
var href = $(this).attr('href');
$(this).attr('href', base + href);
});
$(this).__tabs(a, b, c, d, e, f);
};
</script>

Further, in each link of the tab, add {$smarty.server.REQUEST_URI}
For example:
<_li><a href="{$smarty.server.REQUEST_URI}#tabs-1"> Bla-bla1</li>
<_li><a href="{$smarty.server.REQUEST_URI}#tabs-2"> Bla-bla2</li>
<_li><a href="{$smarty.server.REQUEST_URI}#tabs-3"> Bla-bla3</li>

Enjoy!

Thank you so much ! I was tearing my hair out with this! :-)

Hi Guys

Spotted an issue today with this solution . If the page contains the tabs and the request is HTTPS the page breaks and the following error is in the console

XMLHttpRequest cannot load https://www.mydomain.com/page-name/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.mydomain.com' is therefore not allowed access.

Do I need to modify the code provided?

Thanks
Martin

@spidometrs

Do you think there is a fix for this in the code you supplied for me ?

@SemiColonWeb can you help?
Thank you,
Martin