Multi variant - incomplete page after dynamic update

[MarioP]

Hello

Joomla! 3.9.5 
VM 3.8.6 10373
PHP 5.6.36

BE setting:
Use ajax for product content (checked)
Multi variant Custom field 'Use ajax in browser view' (checked / unchecked) - no difference for the issue

I use multi variant for one of my products.
Category view - OK - new content is showing properly.
Product details page: NG (not good) - incomplete 'productdetails-view' container - the only part loaded in view is a one product from 'product-related-products'

Ivenstigating the problem with Google dev tools I can state that:
The ajax call finishes with success  - I can see a desired response and preview of it.
No error..

A template's fault? Rather no.. - checked with PROTOSTAR - the same problem.

Other facts:
I use a generic child variant for other products at the same time and see no such problem.. Both category and products details view are refreshed properly...

I've been racking my brain (trying different VM settings, unpublishing all the content plugins and so on) for few days now and still no clue.. Can anybody please give me some idea as to where to find the culprit?

[MarioP]

I think I have found where the problem is.
components\com_virtuemart\assets\js\dynupdate.js

So when the wanted 'div.product-container productdetails-view productdetails' is not a descendant in the response (like in my case), a 'find()' function, according to its definition:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

bypasses this div.

Searching through the respose further 'find()' finds the desired 'div.product-container' but it's the one that belongs to 'div.product-related-products'. Consequently  - we have only that related product visible on the website - like in my case.

Solution for me is:

Code Select Expand

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);
+ var el = $(data).filter(Virtuemart.containerSelector);

- if (! el.length)
- el = $(data).filter(Virtuemart.containerSelector);
+ if (! el.length)
+ el = $(data).find(Virtuemart.containerSelector);


The only question that had left is:
Why does the reposnse differ in the way the 'div.product-container productdetails-view productdetails' is placed on the code from website to website. That on my site it's a parent and, for example in the VM demo site, it's nested in the 'div.main'. Is it a template layout that tinkers with that... Although as I wrote ealier

A template's fault? Rather no.. - checked with PROTOSTAR - the same problem.

[Jörgen]

Hello Mario
Without knowing everthing about Your site. Changing template does NOT solve every issue. Installed extensions, plugins and even load ordering (joomla) can tinker with your view data.
Filter component ? One page check out, the list goes on.

Using vmbeez3 as template should be the same as the demo store uses.

Jörgen @ Kreativ Fotografi

[EvanGR]

We were having a Multi Variant problem also, it stopped working (FE) after the user selected a product variant for a second time.
The URL would get corrupted and the product page would not update any more.

I managed to fix it today by disabling "Use AJAX for product content". I have no idea where the conflict was, and browser developer tools wasn't giving any clues.