I have been working with TeaCommerce for a week or two and so far I have been impressed. Well Done Guys.
The variants feature in the featured products is using the produsctlist-product for its html. I have added another variable called old price within the product type and assigned variable to it as you have done in the top of the script.
All works as expected. I have also truncated the product name and description for continuity and styling compliance.
All this works great until you select a variant of the product then the truncation and styling disappears along with my new variable.
Its like its reading a different xslt sheet on postback.
The ajax of the standard scripts is using the "productList-AjaxProduct.xslt" file. This way we can yet again use the same product templates for creating the product html. You would want to take a look at that. It might be necessary to create another one if you need to load two different product xslt's from the javascript.
Be sure to change it in the javascript as well if you create another ajax product xslt.
I don't use another xslt file. I have just amended the existing productlist-product.xslt which is included in both productlistFeatured.xslt and productlist-AjaxProduct.
I have another issue I thought you could perhaps point me in the right direction.
On my frontpage (as yours) I have used the featured products code productListfeatured.xslt which inherits the productlist-product.xslt for its styling. The postback javascript refers to a the productlist-AJAXproduct.xslt.
All this works as expected.
I have on my front page a deal of the day object which is like your featured products but differs in its styling.
I am running into problems when a variant is selected.
The xslt running is productlistDealOfTheDay.xslt which inherits from productlist-Product-Dotd.xslt. The problem is when a variant is selected the productlist-Product-Dotd.xslt styling is lost presumably replaced with the productlist-AJAXproduct.xslt reference in the simple JS file.
My question is how can I separate the postback events so that styling in maintained...or is there an easier way?
You will need to go into the javascript and find where productlist-AJAXproduct.xslt is used. Then you make a small change so that it loads your own xslt when certain criteria is true. The criteria might be as simple as checking for a specific class. Maybe the one you are using to style it.
It's the right place you have found. Make an if statement and change the xsltFileif your criteria is true. You can do it just before this line: productEle.before(htmlFromServer).remove();
Add to Cart event alters the styling Bug
Another day...Another Puzzle.
I have been working with TeaCommerce for a week or two and so far I have been impressed. Well Done Guys.
The variants feature in the featured products is using the produsctlist-product for its html. I have added another variable called old price within the product type and assigned variable to it as you have done in the top of the script.
All works as expected. I have also truncated the product name and description for continuity and styling compliance.
All this works great until you select a variant of the product then the truncation and styling disappears along with my new variable.
Its like its reading a different xslt sheet on postback.
Any ideas?
Yes, it is. Simple answer to that one. :)
The ajax of the standard scripts is using the "productList-AjaxProduct.xslt" file. This way we can yet again use the same product templates for creating the product html. You would want to take a look at that. It might be necessary to create another one if you need to load two different product xslt's from the javascript.
Be sure to change it in the javascript as well if you create another ajax product xslt.
/Rune
That's Odd.
I don't use another xslt file. I have just amended the existing productlist-product.xslt which is included in both productlistFeatured.xslt and productlist-AjaxProduct.
hm, That is odd then. Could it be the xslt cache? Have you tried saving the productlist-AjaxProduct.xslt again?
/Rune
Wow That did it!
You are good!
Why did I need to save it again?
I have my moments, thank you ;)
It's a standard xslt problem when using inherited xslt's. Our good friend Pete Duncanson have made a small package ridding us from the problem:
http://our.umbraco.org/projects/developer-tools/xsltouch
It "touches" the xslt's when one used by others is saved. That should fix the problem for good. On that website anyways.
We are planning on shipping his packages with our starter kits. Just need time to do it.
/Rune
Hello Rune.
I have another issue I thought you could perhaps point me in the right direction.
On my frontpage (as yours) I have used the featured products code productListfeatured.xslt which inherits the productlist-product.xslt for its styling. The postback javascript refers to a the productlist-AJAXproduct.xslt.
All this works as expected.
I have on my front page a deal of the day object which is like your featured products but differs in its styling.
I am running into problems when a variant is selected.
The xslt running is productlistDealOfTheDay.xslt which inherits from productlist-Product-Dotd.xslt. The problem is when a variant is selected the productlist-Product-Dotd.xslt styling is lost presumably replaced with the productlist-AJAXproduct.xslt reference in the simple JS file.
My question is how can I separate the postback events so that styling in maintained...or is there an easier way?
You will need to go into the javascript and find where productlist-AJAXproduct.xslt is used. Then you make a small change so that it loads your own xslt when certain criteria is true. The criteria might be as simple as checking for a specific class. Maybe the one you are using to style it.
/Rune
Hmm,
Not sure if I am on the right track here.
function updateProduct(productEle) {
var variant = productEle.find('.productVariants select').val(),
chosenProductId = variant ? variant : productEle.attr('productid'),
xsltFile = productEle.parent().hasClass('productList') ? 'productList-AjaxProduct.xslt' : 'product.xslt',
htmlFromServer = TeaCommerce.invokeXSLT(xsltFile, chosenProductId,
{
umbracoLanguageId: _languageId,
async: false
});
productEle.before(htmlFromServer).remove();
}
Is this the section?
where shold the If statement cut in without affecting the other code?
It's the right place you have found. Make an if statement and change the xsltFileif your criteria is true. You can do it just before this line: productEle.before(htmlFromServer).remove();
/Rune
is working on a reply...