I have a product with 2 variants, but when I change the product's variant in the ddl I can't see the product chnaging.
does this line of code does the refreshing page part? what do I need to check in order to make sure that I haven't droped anything important while applying my store template on the current store.
Because of the ajaxForm class on the form, the Tea Commerce JavaScript API will kick in, and post the form for you. That means that if you want to update the UI, you must do so in the JavaScript events. In the Tea Commerce starter kit a bunch of events are used to update the minicart and cart. Take a look at the ecommerce.js file, which contains the event stuff.
Thank a lot now it's working :), but I have another issue.
If I change the product to it's second variant I can see the change, but if I try to change the product back to it's first variant I can't see the change. this also happens in the starter-kit store
That's great. Please mark the correct answer, so others can see it.
About your second issue, I'm having a hard time understanding the problem from your description. Is it when the variant is changed in the select dropdown? Is it in a specific browser? It works fine in my firefox and chrome.
So no servercalls are made with ajax when the problem starts occurring? Can you repplicate that on other computers as well? Firebug or the Chrome console will show you whatever server calls are made (Don't know what the XHR thing is, sorry :))
Sure, but I don't think I be able to do it today, if it's okay with you I will check it on my partner computer tommorow and update this thread. thanks :)
unfortunately not at the moment. I need to upload the site to my server and that is going to take some time... I will email you the link as soon as I finish upload it to my server.
Can this problem be related to this issue? what about the function I mentioned in my previous reply?
Yes, it could be related. Any JavaScript error will stop the entire JavaScript thread.
Again you can use firebug to debug it and see what exactly happens, if you cannot wait for me. You can insert breakpoints in the script and read the value of the different objects. That's what I will do when you can send me a link.
I tried that but for some reason in debug mode I can't see that in the second time it's hitting my breakpoints, it's like it does nothing after the first time I change the product variant.
I tried putting breakpoints in the two main methods:
setUpdatingElements
and
resetUpdatingElements
but it doesn't seem to get to those methods in the second time.
If it's okay with you I will try and upload the web site to my server if your could take a look I be grateful. I will send the link to the email you gave me.
Your line looks like this: jQuery('.product').on('change', 'select.productIdentifier', function ()
{
My line looks like this: jQuery('body').on('change', '.product select.productIdentifier', function () {
A small but very significant difference with the initial select. Your select of .product is giving you problems. When the variant is changed, the entire .product element is removed from the DOM and replaced by a new .product. That means that the .product element you selected with jQuery no longer exists, and the event is no longer active.
When selecting body (or something else that is not removed from the DOM) it will keep on working.
product variant change in product/view.cshtml
I have a product with 2 variants, but when I change the product's variant in the ddl I can't see the product chnaging.
does this line of code does the refreshing page part? what do I need to check in order to make sure that I haven't droped anything important while applying my store template on the current store.
Thanks for the help
Hi Moran,
Because of the ajaxForm class on the form, the Tea Commerce JavaScript API will kick in, and post the form for you. That means that if you want to update the UI, you must do so in the JavaScript events. In the Tea Commerce starter kit a bunch of events are used to update the minicart and cart. Take a look at the ecommerce.js file, which contains the event stuff.
/Rune
Thank you for the fast reply. I will take a look and update this thread.
Thank a lot now it's working :), but I have another issue.
If I change the product to it's second variant I can see the change, but if I try to change the product back to it's first variant I can't see the change. this also happens in the starter-kit store
Hi Moran,
That's great. Please mark the correct answer, so others can see it.
About your second issue, I'm having a hard time understanding the problem from your description. Is it when the variant is changed in the select dropdown? Is it in a specific browser? It works fine in my firefox and chrome.
/Rune
I have uploaded a short video of this issue, in this case it's IE 10 but the issue is also present on chrome.
Hi Moran,
I still cannot replicate the error. Could you please check the browser javascript console to see if any important errors a thrown?
Here's a video of my test in IE 10. Same result in Chrome and Firefox here:
http://www.screencast.com/users/runegronkjaer/folders/Jing/media/13007eab-3115-44f4-b9d1-062521b38c50
This is odd I can't see any errors and this is the XHR log, after the first time I don't see any XHR calls.
So no servercalls are made with ajax when the problem starts occurring? Can you repplicate that on other computers as well? Firebug or the Chrome console will show you whatever server calls are made (Don't know what the XHR thing is, sorry :))
/Rune
Ok, let me check
I can't see any server calls after the first call and no errors too. in the first time I can see this event firing but on the second time nothing.
Can you replicate on other computers? Maybe a security issue in your end?
It even works on my IPhone. So it's hard to debug :)
/Rune
Sure, but I don't think I be able to do it today, if it's okay with you I will check it on my partner computer tommorow and update this thread. thanks :)
Hi it's me again:
I have stumble upon this error, not sure if it's related but I am getting it in the sample store.
anyway can you tell ,where can I start debug this issue? I saw this function in the RENDER TEMPLATE EVENTS
Sounds like "order" is undefined in some case.
Do you have a link where I can check it out. You can e-mail it to me at rg [at] teasolutions.dk
/Rune
unfortunately not at the moment. I need to upload the site to my server and that is going to take some time... I will email you the link as soon as I finish upload it to my server.
Can this problem be related to this issue? what about the function I mentioned in my previous reply?
Yes, it could be related. Any JavaScript error will stop the entire JavaScript thread.
Again you can use firebug to debug it and see what exactly happens, if you cannot wait for me. You can insert breakpoints in the script and read the value of the different objects. That's what I will do when you can send me a link.
/Rune
I think the issue is in this function:
the variable data is defined but the property data.order is undefiend this is the content of data:
<div id="product" refreshwithtemplate="product\view.cshtml" class="product innerProduct hasVariants" nodeId="1265" itemscope="" itemtype="http://schema.org/Product"> <form action="/base/TC/FormPost.aspx" method="post" class="ajaxForm"> <input name="storeId" type="hidden" value="1" /> <input name="AddOrUpdateOrderLine" type="hidden" value="productIdentifier : productIdentifier, orderLineId : orderLineId, quantity : quantity, propertyKeys : propertyKeys" /> <h1> Corvina Cabernet </h1> <div class="productWrap"> <div class="productImage"> <img src="/ImageGen.ashx?Width=378&Height=378&Constrain=True&Image=/media/4953/Red Wine.jpg" class="productImage" alt="Corvina Cabernet" title="Corvina Cabernet" /> </div> <div class="productContent"> <div class="description"> <p>A really cheap and inexpensive red whine in a two liter pack</p> </div> <div class="productPrice" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <span itemprop="price"> $37.40 </span></div> <div class="variants"> <select name="productIdentifier" class="productIdentifier"> <!-- loop through each of the variant products --> <!-- do whatever you like here --> <option value="1264" > 1l </option> <!-- do whatever you like here --> <option value="1265" selected="true"> 2l </option> <!-- do whatever you like here --> <option value="1266" > 5l </option> </select> </div> <div class="actions"> <input type="submit" value="Add to cart" class="addToCart btn btn-brown btn-cart" /> <span class="addingToCart btn btn-addingtocart btn-brown">Adding to cart</span> </div> <div class="quantity noPrint"> <input type="text" name="quantity" class="quantity" value="1" /> </div> </div> </div> </form> </div>
is it supposed to be that?
In some cases yes. Try adding this if statement like this:
Thanks
I tried that but for some reason in debug mode I can't see that in the second time it's hitting my breakpoints, it's like it does nothing after the first time I change the product variant.
I tried putting breakpoints in the two main methods:
setUpdatingElements
and
resetUpdatingElements
but it doesn't seem to get to those methods in the second time.
Then I think I will need to see it to make any conclusions.
Sounds weird, but it probably isn't :)
Or maybe you're on to a bug or something.
/Rune
If it's okay with you I will try and upload the web site to my server if your could take a look I be grateful. I will send the link to the email you gave me.
yes, please do that.
Rune
I have sent you an email with the link thank you :)
Found the problem.
Your JavaScript is faulty :)
Your line looks like this:
jQuery('.product').on('change', 'select.productIdentifier', function ()
My line looks like this:
jQuery('body').on('change', '.product select.productIdentifier', function () {
A small but very significant difference with the initial select. Your select of .product is giving you problems. When the variant is changed, the entire .product element is removed from the DOM and replaced by a new .product. That means that the .product element you selected with jQuery no longer exists, and the event is no longer active.
When selecting body (or something else that is not removed from the DOM) it will keep on working.
/Rune
Thank you very much, you have helped me a lot :) :) now it's working.
No problem. Glad to help and feel free to ask again another time.
Looking forward to see your finished website.
/Rune
Yeh me too :)
is working on a reply...