Add fields to steps of Tea Commerce checkout process
Hello, our client needs some additional fields added to various steps of the Tea Commerce checkout process. I don't know where to start with creating the fields and adding them. I know where the XSLT files are but need to create the fields first. I've searched for other posts about this but can't seem to find anything.
Some are text fields, some may be drop-downs.
In addition, we may need to add an enirely new step in the process. Any guidance on that process is helpful too.
About creating extra steps. You can just create a new page and insert what ever content you want to or use an xslt to show order info. Its just normal html and css you need to do. And then of course add the extra step in the different other steps.
If you want to add extra fields to step 2 of the cart you will have to add changes two places. In the xslt to have the new html elements and also in line 90 of cart_step02.xslt to have the new field supported with server side fallback. After that you can change the javascript teaCommerce_Simple.js line 104. There you have to add the selection of the new html elements and send their value along in the API call.
Thanks so much Anders. Are there any posts that show how to create new fields in Umbraco that we can then place on the new page? Sorry for what may be such a basic questions, I'm not a developer.
After creating the new fields, we can follow your clear guidance on adding the fields to the page or new page.
If you want to display a new field in the webshop product part - then just add the new property to the product document type and add a value for an umbraco node and print it using templates or xslt like you would normally do in umbraco. If you want the property to be copied to the orderline when a customer adds the product to his cart you need to insert the property alias into the "order line property aliases" field in the Tea Commerce "General settings". You now have this as an order line property and can fetch the data. Hope this gives you an idea of what to do. Just go ahead and test - if you used the starter kit you can always just reinstall it :)
With your direction, I've made some progress and have added the fields to the front-end check out process. I added three properties to the TC-CartStep Document Type as in the email below.
Then I added them to cart_step04.xslt so they show on the front-end. However, I can't get them to display on the order view in Tea Commerce Orders back-end section. Here's how I added them to the teaCommerceAdminOrder.xslt. Did I do this correctly or what do I need to do differently so I can get the fields showing on the orders in the back-end? Thank you!
You should not add them at a document type level :) You can just change the cart step xslt you want to or add a new step and make a new xslt that render that step.
To have the card number added to the order as a property you will have to use the javascript API or have a user control that use our .NET api. In javascript its just the UpdateOrderProperty('creditcardnumber', '123456789') - this can then show in the back office using the xslt code you have written already.
Add fields to steps of Tea Commerce checkout process
Hello, our client needs some additional fields added to various steps of the Tea Commerce checkout process. I don't know where to start with creating the fields and adding them. I know where the XSLT files are but need to create the fields first. I've searched for other posts about this but can't seem to find anything.
Some are text fields, some may be drop-downs.
In addition, we may need to add an enirely new step in the process. Any guidance on that process is helpful too.
Thanks!
Hi Greg
About creating extra steps. You can just create a new page and insert what ever content you want to or use an xslt to show order info. Its just normal html and css you need to do. And then of course add the extra step in the different other steps.
If you want to add extra fields to step 2 of the cart you will have to add changes two places. In the xslt to have the new html elements and also in line 90 of cart_step02.xslt to have the new field supported with server side fallback. After that you can change the javascript teaCommerce_Simple.js line 104. There you have to add the selection of the new html elements and send their value along in the API call.
Kind regards
Anders
Thanks so much Anders. Are there any posts that show how to create new fields in Umbraco that we can then place on the new page? Sorry for what may be such a basic questions, I'm not a developer.
After creating the new fields, we can follow your clear guidance on adding the fields to the page or new page.
Thanks, Greg
Hi Greg
If you want to display a new field in the webshop product part - then just add the new property to the product document type and add a value for an umbraco node and print it using templates or xslt like you would normally do in umbraco. If you want the property to be copied to the orderline when a customer adds the product to his cart you need to insert the property alias into the "order line property aliases" field in the Tea Commerce "General settings". You now have this as an order line property and can fetch the data. Hope this gives you an idea of what to do. Just go ahead and test - if you used the starter kit you can always just reinstall it :)
Kind regards
Anders
Thanks, we'll give it a go! Cheers.
With your direction, I've made some progress and have added the fields to the front-end check out process. I added three properties to the TC-CartStep Document Type as in the email below.
Then I added them to cart_step04.xslt so they show on the front-end. However, I can't get them to display on the order view in Tea Commerce Orders back-end section. Here's how I added them to the teaCommerceAdminOrder.xslt. Did I do this correctly or what do I need to do differently so I can get the fields showing on the orders in the back-end? Thank you!
Hi Greg
You should not add them at a document type level :) You can just change the cart step xslt you want to or add a new step and make a new xslt that render that step.
To have the card number added to the order as a property you will have to use the javascript API or have a user control that use our .NET api. In javascript its just the UpdateOrderProperty('creditcardnumber', '123456789') - this can then show in the back office using the xslt code you have written already.
Kind regards
Anders
is working on a reply...