Virtuemart Support :: Topic: Using Generic Child Variants with js

Welcome, Guest

TOPIC: Using Generic Child Variants with js_scenica

Using Generic Child Variants with js_scenica 10 years 4 months ago #7389

Ramon Medina

I am using Joomla 2.5.16 and VirtueMart 2.0.24b with the Scenica template from Joomlashack (js_scenica).

With the default productdetails template that comes with VM, I can choose child variants and it updates everything as one would expect. When I use the PureMart template for productdetails, the page initially loads normally, but when I make a change in the child variant dropdown the body of the page turns slightly grayed out (like normal when something is loading) but instead of refreshing the screen with the new content everything just disappears. The only part of the body left is the breadcrumbs section.

Looking at the code from the dev tools in Google Chrome, I can see that the div class "productdetails-vew" is completely empty. The only was I can think of that can happen is a script emptying out that class, but I have no clue where to look.

Can anyone give me any ideas?

Attachments:

productdetails.JPG (16KB)

The topic has been locked.

Using Generic Child Variants with js_scenica 10 years 4 months ago #7390

Ramon Medina

I tested it with the default template, and it works normally with it. I wish I knew where the conflict might be.

Edit:

I found some more information -

Uncaught TypeError: Cannot call method 'removeAttribute' of null productUpdater.js:128
removeOnChangeAttributeFromSelectBox productUpdater.js:128
Request.HTML.onSuccess productUpdater.js:46
(anonymous function) mootools-core.js:149
(anonymous function) mootools-core.js:33
Array.implement.each mootools-core.js:40
Events.Class.fireEvent mootools-core.js:149
i.extend.$owner mootools-core.js:141
c.Request.Class.onSuccess mootools-core.js:472
i.extend.$owner mootools-core.js:141
Request.HTML.Class.success mootools-core.js:495
i.extend.$owner mootools-core.js:141
c.Request.Class.onStateChange mootools-core.js:470
i.extend.$owner mootools-core.js:141
(anonymous function) mootools-core.js:88

Edit:
I tried adding an "if != null" condition to the offending statement, and that gets rids of the error, but it does not change the actual behavior. I tried disabling mootools, and now it does work, but without all the neat effects. I will continue investigating.

Edit:
If set com_virtuemart to use mootools 1.4, I can choose child variants normally, but the tabs at the bottom don't work. It stays on Product Description even when I click others. Something about the combination of mootools 1.4.5 and the js_scenica template is causing the problem.

Last Edit: 10 years 4 months ago by Ramon Medina.

The topic has been locked.

Using Generic Child Variants with js_scenica 10 years 4 months ago #7402

Ramon Medina

I found a solution that works for me. YMMV

Edit the file <your_template>/html/com_virtuemart/assets/Flexible/productUpdater.js

In the "processChangeChildProductEvent" function, find the following code:

new Request.HTML({
		method: 'get',
		url: url,
		data: data,
		onSuccess: function(responseTree, responseElements, responseHTML) {
			productDetailsContainer.innerHTML = responseElements[1].innerHTML;
			productDetailsContainer.setStyle('opacity', 1);
			removeOnChangeAttributeFromSelectBox();
			initVMEvents();
			setBrowserNewState(url);
 
		}
	}).send();

Change the line "productDetailsContainer.innerHTML = responseElements[1].innerHTML;" so it reads "productDetailsContainer.innerHTML = responseHTML;"

The result looks like this:

new Request.HTML({
		method: 'get',
		url: url,
		data: data,
		onSuccess: function(responseTree, responseElements, responseHTML) {
			productDetailsContainer.innerHTML = responseHTML;
			productDetailsContainer.setStyle('opacity', 1);
			removeOnChangeAttributeFromSelectBox();
			initVMEvents();
			setBrowserNewState(url);
 
		}
	}).send();

It breaks all of my JFBConnect tags (all the JFBConnect content is gone) but at least most of the page loads. Now I will try to find a way to make my missing content load.

The topic has been locked.

Using Generic Child Variants with js_scenica 10 years 4 months ago #7404

Ramon Medina

It turns out the missing JFBConnect content are actually embedded modules. The div containers for the modules are being inserted into the html when a new Child item is selected, but the actual content that goes in the div tags does not appear.

The fact that the div tags show up means it knows it needs to load the modules, but it never actually happens. I've tried manually inserting some php into the template to do it such as the code below:

<?php
	jimport('joomla.application.module.helper');
	$module = JModuleHelper::getModule('mod_jfbccomments','JFBCComments'); 
	echo JModuleHelper::renderModule($module);
?>

but the result is the same. I've tried this in the default Joomla template (and an un-altered productUpdater.js), too, with the same result.

Any help would be greatly appreciated.

The topic has been locked.

Using Generic Child Variants with js_scenica 10 years 4 months ago #7405

Ramon Medina

I solved my problem by adding "if (window.fbAsyncInit != null) { window.fbAsyncInit() };" to the "processChangeChildProductEvent" function in productUpdater.js. The whole function now reads:

function processChangeChildProductEvent(changedSelect) {
	var url = changedSelect.options[changedSelect.selectedIndex].value,
		data = 'tmpl=component',
		productDetailsContainer = document.getElement('.productdetails-view');
 
	productDetailsContainer.setStyle('opacity', 0.6);
 
	new Request.HTML({
		method: 'get',
		url: url,
		data: data,
		onSuccess: function(responseTree, responseElements, responseHTML) {
***			productDetailsContainer.innerHTML = responseHTML;
***			if (window.fbAsyncInit != null) { window.fbAsyncInit() };
			productDetailsContainer.setStyle('opacity', 1);
			removeOnChangeAttributeFromSelectBox();
			initVMEvents();
			setBrowserNewState(url);
 
		}
	}).send();
}

Lines I changed or added are denoted by ***

Basically, if there is Facebook API content on the page, the fbAsyncInit function should be there. Calling it will initialize the connection to Facebook through their API and cause the appropriate content to display.

Last Edit: 10 years 4 months ago by Ramon Medina.

The topic has been locked.

Using Generic Child Variants with js_scenica 10 years 4 months ago #7453

Support

Hi,

The "initVMEvents();" function (which is defined below) is there to initialize the necessary JS events onSucces (after the AJAX is completed). Those functions that need to be re-loaded are; Zoom Effect, TABs etc..

You might have added the

if (window.fbAsyncInit != null) { window.fbAsyncInit() };

inside the initVMEvents(); function to make things organized, but this is not a fault usage and you can put it there too.

Thanks for updating this topic and share your solution.
I hope this topic will be useful to others as well.

Case solved and topic is closed for clearance.

Regards,
Support & Development.

The topic has been locked.