Product navigation JQuery conflicts

[kaiserdom]

Product navigation doesn't work well with Custom Multivariants and JQuery Tabs in product details. Whenever i click «Next» or «Previous» button the template breaks. If I disable JQuery Tabs, it works but it breaks AJAX Stockable Custom Fields. The same effect is taking place when I click print button, where template is appearing broken with duplicate information.

JM 3.8.1
VM 3.2.4
PHP 7.0

Code Select Expand

$j = 'jQuery(document).ready(function($) {
Virtuemart.product(jQuery("form.product"));

$("form.js-recalculate").each(function(){
if ($(this).find(".product-fields").length && !$(this).find(".no-vm-bind").length) {
var id= $(this).find(\'input[name="virtuemart_product_id[]"]\').val();
Virtuemart.setproducttype($(this),id);

}
});
});';
//vmJsApi::addJScript('recalcReady',$j);

$qproduct = 'jQuery( function() {
    jQuery( "#tabs" ).tabs();
jQuery( "#tabsLinks" ).show();
  } );';

$prodTip = 'jQuery(document).ready(function(){
    jQuery(\'[data-toggle="tooltip"]\').tooltip({
     delay: { show: \'100\', hide: \'200\' }
});
});';

/** GALT
* Notice for Template Developers!
* Templates must set a Virtuemart.container variable as it takes part in
* dynamic content update.
* This variable points to a topmost element that holds other content.
*/
$j = "Virtuemart.container = jQuery('.productdetails-view');
Virtuemart.containerSelector = '.productdetails-view';";
vmJsApi::addJScript('ajaxContent',$j);
vmJsApi::addJScript('q.product',$qproduct);
vmJsApi::addJScript('pt.product',$prodTip);

[Studio 42]

It's not a conflict, the javascript is bad.

Code Select Expand

'jQuery( function() {
    jQuery( "#tabs" ).tabs();
jQuery( "#tabsLinks" ).show();
  } );
get called when document is ready in javascript
When you load with ajax, the document is ready so the code is not called again on ajax load.
You need to use

Code Select Expand


  if (document.readyState == "complete") {
    jQuery( "#tabs" ).tabs();
jQuery( "#tabsLinks" ).show();
  }
else {
jQuery( function() {
    jQuery( "#tabs" ).tabs();
jQuery( "#tabsLinks" ).show();
  } )
}

This mean that if document is ready, load the javascript directly, else wait that jQuery say document is ready to load the javascript .

[kaiserdom]

Thank you but that doesn't work.
On one hand even with no tabs at all, the product navigation breaks my custom multivariant plugin. On the other hand, with the product navigation disabled my tabs work just smooth, unless I click a link like the one into  com_virtuemart/invoice/invoice_items.php:

Code Select Expand

$product_link = JURI::root().'index.php?option=com_virtuemart&view=productdetails&virtuemart_category_id=' . $item->virtuemart_category_id .
'&virtuemart_product_id=' . $item->virtuemart_product_id . '&Itemid=' . $menuItemID;

In the second case I end up with a totally broken template. Product navigation isn't that important to me, but why my or your tabs doesn't work with JURI::root()?

[Studio 42]

whitout debugin your site directly, i cannot help you more. If you give a link, i check perhaps next.

[kaiserdom]

e.g. the link below

https://www.everhome.gr/index.php?option=com_virtuemart&view=productdetails&virtuemart_category_id=2&virtuemart_product_id=2836&Itemid=244

[Studio 42]

You have a problem with jchoptimize, disable jchoptimize and check again.

[kaiserdom]

No it's not the JCH.

Don't bother, I'll remove the product links from my emails and stay away from Product Navigation, and everything will be just fine.   
Have a nice day
Kyriakos

[Studio 42]

JCH or not, when i tried, i had an error because JCH. So in all case you need to fix the first bug before trying to fix another one.
If you load a javascript and have a bug, the javascript after get not called.