News:

Looking for documentation? Take a look on our wiki

Main Menu

issues with using javascript and custom child variants on product details

Started by aerdna, June 18, 2016, 08:46:17 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

aerdna

June 18, 2016, 08:46:17 AM
Hi,
I'm using VM 3.0.12 with joomla version 3.4.8. 

I'm not sure if this is a problem with how I'm using custom fields or maybe my lack of experience with javascript...but hoping someone has some tips for me...

I have products with children and grandchildren that have Generic Child Variants where the parent is not orderable.  On the front end, for example, a user would select a T-shirt, then have a child variant of size and a child variant of color to choose before adding to the cart.  Only after both are selected does the "add to cart" button become enabled.  This all works great. I also have some custom javascript that I need to run on the page as well.  I added some tabs to hold the product description, some specs, a video, etc. and switching between tabs requires some jQuery to run when a tab is clicked. 

When the product is first displayed and no variants are selected, the javascript is automatically loaded/run since it is wrapped in jQuery(document).ready.  I have the javascript added by using the JFactory::getDocument()  addScriptDeclaration function and everything works great.  The problem is when a user selects a variant.  The window.top.location.href changes and new images are loaded (among other changes that virtuemart does when switching to the variant selected).  However, once the URL changes, the javascript is no longer defined.  It's as if the JQuery(document).ready function never gets called but yet the browser has loaded a new URL.  Any javascript functions I had, like click handlers for example, are no longer defined.  I have some relative links like <a href="#tab3" ... > and the href url doesn't reflect the selected variant's url.  It still points to the URL of the parent initially loaded. I have tried to get the correct absolute URL by reading in the window's location but that doesn't solve all the problems since I need to show and hide various divs on the page too.

I don't know how to force my javascript to be loaded once a variant is selected.  I can inspect the source using the browser developer tools and I see my javascript as if it were loaded, but it isn't.  I expected the jQuery(document).ready to load the javascript again after a child variant is selected but it doesn't.  I've tried adding some inline javascript to the <body> tag to load the javascript, but that doesn't work after a child variant is selected.  The javascript isn't invoked.  I also tried adding inline javascript to the onClick handler I have for a custom button on my product details page as well, but that was problematic as well and didn't solve all the problems.

Does anyone know why javascript is not being loaded after selecting a child variant or have any other ideas I could try?  Maybe I need to be putting my javascript somewhere else so it will get loaded?

Thanks in advance for any help you can offer.

Andrea

Brockney

#1
June 18, 2016, 13:09:42 PM
Hi Andrea,

I think I am having similar problems to you although I am not using the javascript myself.

What is happening when I add child products is sometimes the option to buy is there and other times it doesn't display at all. Sometimes clicking on a child product actually opens the page for a completely different product in the same category.

I posted about this yesterday.

Are we having a similar problem?

I'm using 3.0.14
Joomla 3.6.4
Virtuemart 3.0.18

aerdna

#2
June 18, 2016, 18:22:02 PM
Your issue seems a lot more complex than mine.  I haven't had problems with the variants themselves so I can't really help there.  My only suggestion for you is to double-check that you've hooked up your child variants correctly including which variants are cart options.  Sorry I can't help more.

My problem seems to be with trying to run javascript functions that I've added to the page myself.  For some reason, once I select a variant, my javascript is unloaded and doesn't get reloaded when the page for the child finishes loading.

jenkinhill

#3
June 18, 2016, 18:42:12 PM
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

aerdna

#4
June 18, 2016, 20:01:23 PM
Thank you for the link.  It sounds exactly like the solution but I'm not having any luck getting this to work for me yet.  I've added the addJScript lines to my template override for productdetails in default.php.

vmJsApi::addJScript('customizePanel', '//mydomain.com/templates/mytemplate/js/customizePanel.js');

For some reason I wasn't successful using a relative path to my customizePanel.js file but using // at least got it to show up in the page.  I can see in the debugger that this creates a <script> entry at the top of my page in the header, but the contents of the js files still aren't being loaded/executed as they are when I do a page reload.  The docs mentioned  "The JS Writer is called after the function display (only in vmViews)" but I don't understand exactly what that means.  Do I need to put my addJScript call in a different file other than my productdetails/default.php override to make it actually load the js?

I also happened to notice that the <base href="foo"> line being put in the header isn't being updated to the new variant's url after loading a variant.  This appears to be the source of one of the problems I'm seeing with the relative links on my page (like for my href="#tab2") not pointing to the newly loaded variant's tab 2.  I don't know what code puts the <base> tag in, but I need to figure out how to update that after selecting a variant as well.

aerdna

#5
June 18, 2016, 21:30:26 PM
Once I was clued in on the ajax loading nuance for VM, I did a quick hack to fix this for me until I can figure out the right solution.

I modified dynupdate.js and added a call to my postLoadInit() function. I didn't know how to hook up a callback properly but adding a hard-coded call to my template's post load initializer has so far fixed all the issues I was having thus far and now my javascript code loads after selecting a child variant (just as if the page were loaded fresh by the browser).

Thanks for tip.

Print
Go Up Pages1
User actions