News:

Support the VirtueMart project and become a member

Main Menu

Product navigation JQuery conflicts

Started by kaiserdom, November 20, 2017, 22:21:35 PM

Previous topic - Next topic

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



$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.
'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

  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:

$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.


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.