Search
Other Modals questions
Forum

Modals not working on Virtuemart child product pages

Eve's Avatar Eve
Hello,

I really hope someone can help. I have a few modals links in my Virtuemart parent product long & short descriptions. These work fine on the parent product page but when the child product details are loaded after selecting different options (I've tried either inheriting the child descriptions from the parent product, or copying the descriptions across to the child) the links open in the browser window instead of as popups.

The product variations are created using Breakdesigns 'Custom Fields For All' and 'Stockable Custom Fields' plugins. I asked their support and they replied:

------------------------------------------
"You need to initialize your modals after the ajax call that updates your page.
The same that happens when you load the page through your browser.

The file that updates your page after selecting the variants is this: components/com_virtuemart/assets/js/dynupdate.js
Function: Virtuemart.updateContent
Put any js at the end of the success clause

Unfortunately i am not aware of what js need to be called as this is not related with our plugin."
------------------------------------------

I've found the file, but is anyone able to help me with the js needed to get the modals to work? I unfortunately don't know js.

Many thanks in advance!
Peter van Westen's Avatar Peter van Westen ADMIN
Try:
RegularLabs.Modals.init();
Please post a rating at the Joomla! Extensions Directory
Eve's Avatar Eve
Hi Peter,

Thank you for your reply. I've put your code in the following place in the Virtuemart.updateContent function in the file components/com_virtuemart/assets/js/dynupdate.js :
Virtuemart.updateContent = function(url, callback) {

        if(Virtuemart.isUpdatingContent) return false;
        Virtuemart.isUpdatingContent = true;
        urlSuf='tmpl=component&format=html&dynamic=1';
        var glue = '&';
        if(url.indexOf('&') == -1 && url.indexOf('?') == -1){
			glue = '?';
        }
        url += glue+urlSuf;
		$(this).vm2front("startVmLoading");
		$.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
				var title = $(data).filter('title').text();
				$('title').text(title);
				var el = $(data).find(Virtuemart.containerSelector);
				if (! el.length) el = $(data).filter(Virtuemart.containerSelector);
				if (el.length) {
					Virtuemart.container.html(el.html());

					Virtuemart.updateCartListener();
					Virtuemart.updateDynamicUpdateListeners();

					if (Virtuemart.updateImageEventListeners) Virtuemart.updateImageEventListeners();
					if (Virtuemart.updateChosenDropdownLayout) Virtuemart.updateChosenDropdownLayout();
					if (typeof vm2tabs === 'function') {
						vm2tabs($("#ui-tabs .tabs"));
					}
					//Virtuemart.product($("form.product"));

					if(Virtuemart.recalculate) {
						$("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);
							}
						});
					}
				}
				Virtuemart.isUpdatingContent = false;
				if (callback && typeof(callback) === "function") {
					callback();
				}
				$(this).vm2front("stopVmLoading");
				RegularLabs.Modals.init();
            },
           
			error: function(datas) {
				alert('Error updating page');
				Virtuemart.isUpdatingContent = false;
				$(this).vm2front("stopVmLoading");
			},
			statusCode: {
				404: function() {
					Virtuemart.isUpdatingContent = false;
					$(this).vm2front("stopVmLoading");
					alert( "page not found" );
				}
			}
        });


I hope this is the correct place to insert the code? If so, unfortunately it hasn't worked - the modals are still opening in the browser window from the child product details.
Peter van Westen's Avatar Peter van Westen ADMIN
No idea if that is the correct place. That's something you'd have to ask VM about.
Please post a rating at the Joomla! Extensions Directory
Eve's Avatar Eve
Hi Peter,

I got a suggestion for a better place to put the code in the dynupdate.js file but unfortunately my console gives me the error: ReferenceError: Can't find variable: RegularLabs
Virtuemart.updateContent = function(url, callback) {

        if(Virtuemart.isUpdatingContent) return false;
        Virtuemart.isUpdatingContent = true;
        urlSuf='tmpl=component&format=html&dynamic=1';
        var glue = '&';
        if(url.indexOf('&') == -1 && url.indexOf('?') == -1){
			glue = '?';
        }
        url += glue+urlSuf;
		$(this).vm2front("startVmLoading");
		$.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
				var title = $(data).filter('title').text();
				$('title').text(title);
				var el = $(data).find(Virtuemart.containerSelector);
				if (! el.length) el = $(data).filter(Virtuemart.containerSelector);
				if (el.length) {
					Virtuemart.container.html(el.html());

					Virtuemart.updateCartListener();
					Virtuemart.updateDynamicUpdateListeners();

					if (Virtuemart.updateImageEventListeners) Virtuemart.updateImageEventListeners();
					if (Virtuemart.updateChosenDropdownLayout) Virtuemart.updateChosenDropdownLayout();
					if (typeof vm2tabs === 'function') {
						vm2tabs($("#ui-tabs .tabs"));
					}
					//Virtuemart.product($("form.product"));

					if(Virtuemart.recalculate) {
						$("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);
							}
						});
					}
					RegularLabs.Modals.init();
				}
				Virtuemart.isUpdatingContent = false;
				if (callback && typeof(callback) === "function") {
					callback();
				}
				$(this).vm2front("stopVmLoading");
            },
           
			error: function(datas) {
				alert('Error updating page');
				Virtuemart.isUpdatingContent = false;
				$(this).vm2front("stopVmLoading");
			},
			statusCode: {
				404: function() {
					Virtuemart.isUpdatingContent = false;
					$(this).vm2front("stopVmLoading");
					alert( "page not found" );
				}
			}
        });
        Virtuemart.isUpdatingContent = false;
    }

Confidential information:
(hidden)


Would you know what the problem might be? I'm on Joomla 3.10.12 in case that helps. I don't understand js at all, my apologies!

Many thanks for your help! 🙂

Eve
Peter van Westen's Avatar Peter van Westen ADMIN
Again, this is something you'd have to ask VM about.

This is the VM script. Ask them, not me.
Please post a rating at the Joomla! Extensions Directory
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription