With the latest version, does the customer information section allow the user to select their state now? If not, what would it take to add this? Any details/documentation on this?
No the latest version does not have the option to add state to the order as standard. This functionality will first be available in our 2.0 release which will be in a few months.
At the moment you will have to add the state yourself as an order property. If you need the order to change somehow based on the state you can use the Tea Commerce .NET API to easily make the changes you need.
Not sure I really understand here. So where can I add the property to the order document? I want to have a drop down to select the state and will need this for shipping as well.
I need the info to show in the admin area of the order and on the confirmation email. Are there examples somewhere?
Nice. We would very much like to know. Your'e not the first one to ask, so would be good if you could maybe post your solution here, to help other in their quest for great Tea Commerce websites.
Once I found some documentation it was rather easy. Right now I have it as just a open text field. Will adjust to a drop down list shortly, but that should be rather simple. You'll see I named the controls 'province' instead of 'state'. I did this for future release reasons. Here's what I did (this is based on the starterkit):
Finally, I modified the javascript to allow for the saving of the field (teaCommerce_simple.js):
function sendCustomerInformation() { var paymentInformation = jQuery("#paymentInformation"), shippingInformation = jQuery("#shippingInformation"), country = paymentInformation.find("#country option:selected");
/* We fetch the information from the form and creates an object that can be sent to the server as a form POST submit */ var formObj = { company: paymentInformation.find("#company").val(), firstName: paymentInformation.find("#firstName").val(), lastName: paymentInformation.find("#lastName").val(), city: paymentInformation.find("#city").val(), zipCode: paymentInformation.find("#zipCode").val(), streetAddress: paymentInformation.find("#streetAddress").val(), province: paymentInformation.find("#province").val(), phone: paymentInformation.find("#phone").val(), email: paymentInformation.find("#email").val(), comments: jQuery("#comments").val(), shipping_firstName: shippingInformation.find("#shippingFirstName").val(), shipping_lastName: shippingInformation.find("#shippingLastName").val(), shipping_streetAddress: shippingInformation.find("#shippingStreetAddress").val(), shipping_zipCode: shippingInformation.find("#shippingZipCode").val(), shipping_city: shippingInformation.find("#shippingCity").val(), };
//Simple validation var pageValidateText = ''; if (formObj.firstName === '') { pageValidateText += '\n' + paymentInformation.find("#firstName").prev().text(); } if (formObj.lastName === '') { pageValidateText += '\n' + paymentInformation.find("#lastName").prev().text(); } if (formObj.city === '') { pageValidateText += '\n' + paymentInformation.find("#city").prev().text(); } if (formObj.province === '') { pageValidateText += '\n' + paymentInformation.find("#province").prev().text(); } if (formObj.zipCode === '') { pageValidateText += '\n' + paymentInformation.find("#zipCode").prev().text(); } if (formObj.streetAddress === '') { pageValidateText += '\n' + paymentInformation.find("#streetAddress").prev().text(); } if (formObj.phone === '') { pageValidateText += '\n' + paymentInformation.find("#phone").prev().text(); } if (formObj.email === '') { pageValidateText += '\n' + paymentInformation.find("#email").prev().text(); } if (pageValidateText != '') { //The form does not validate and we pop up the result pageValidateText = 'Please correct the following:' + pageValidateText; alert(pageValidateText); return false; //Return false and the browser will not send the user to the next step }
Thanks! Also, in case anyone wants to make it a drop down list of states, just replace the text input field on cart_step02.xslt with the following. Be sure to leave the empty value to keep inline with the validation that is already in place :)
State Selection for US
With the latest version, does the customer information section allow the user to select their state now? If not, what would it take to add this? Any details/documentation on this?
Hi Hutch,
No the latest version does not have the option to add state to the order as standard. This functionality will first be available in our 2.0 release which will be in a few months.
At the moment you will have to add the state yourself as an order property. If you need the order to change somehow based on the state you can use the Tea Commerce .NET API to easily make the changes you need.
Hope this helps you
/Rune
Not sure I really understand here. So where can I add the property to the order document? I want to have a drop down to select the state and will need this for shipping as well.
I need the info to show in the admin area of the order and on the confirmation email. Are there examples somewhere?
Ah, I figured it out! If anyone wants the solution here let me know.
Cool! Would be great to hear how you solved it.
Kind regards
Anders
Nice. We would very much like to know. Your'e not the first one to ask, so would be good if you could maybe post your solution here, to help other in their quest for great Tea Commerce websites.
Thanks
/Rune
Once I found some documentation it was rather easy. Right now I have it as just a open text field. Will adjust to a drop down list shortly, but that should be rather simple. You'll see I named the controls 'province' instead of 'state'. I did this for future release reasons. Here's what I did (this is based on the starterkit):
Modified cart_step02.xslt to have the following:
<div class="informationFieldWrap province">
<label for="province">
<span class="required">*</span>
<xsl:value-of select="umbraco.library:GetDictionaryItem('Province')" />
</label>
<input type="text" id="province" name="province" value="{$order/properties/province}" />
</div>
Then cart_step04.xslt I added this:
<div class="informationFieldWrap province">
<label for="state">
<xsl:value-of select="umbraco.library:GetDictionaryItem('Province')" />
</label>
<div class="value">
<xsl:value-of select="$order/properties/province" />
</div>
</div>
On both teaCommerceEmailTemplate.xslt and teaCommerceAdminOrder.xslt I found the zipCode / City area and changed to the following:
<xsl:if test="$order/properties/zipCode != '' or $order/properties/city != '' or $order/properties/province != ''">
<tr>
<td></td>
<td>
<xsl:value-of select="$order/properties/city"/>, <xsl:value-of select="$order/properties/province"/> <xsl:value-of select="$order/properties/zipCode"/>
</td>
</tr>
</xsl:if>
Finally, I modified the javascript to allow for the saving of the field (teaCommerce_simple.js):
function sendCustomerInformation() {
var paymentInformation = jQuery("#paymentInformation"),
shippingInformation = jQuery("#shippingInformation"),
country = paymentInformation.find("#country option:selected");
/*
We fetch the information from the form and creates
an object that can be sent to the server as a form
POST submit
*/
var formObj = {
company: paymentInformation.find("#company").val(),
firstName: paymentInformation.find("#firstName").val(),
lastName: paymentInformation.find("#lastName").val(),
city: paymentInformation.find("#city").val(),
zipCode: paymentInformation.find("#zipCode").val(),
streetAddress: paymentInformation.find("#streetAddress").val(),
province: paymentInformation.find("#province").val(),
phone: paymentInformation.find("#phone").val(),
email: paymentInformation.find("#email").val(),
comments: jQuery("#comments").val(),
shipping_firstName: shippingInformation.find("#shippingFirstName").val(),
shipping_lastName: shippingInformation.find("#shippingLastName").val(),
shipping_streetAddress: shippingInformation.find("#shippingStreetAddress").val(),
shipping_zipCode: shippingInformation.find("#shippingZipCode").val(),
shipping_city: shippingInformation.find("#shippingCity").val(),
};
//Simple validation
var pageValidateText = '';
if (formObj.firstName === '') {
pageValidateText += '\n' + paymentInformation.find("#firstName").prev().text();
}
if (formObj.lastName === '') {
pageValidateText += '\n' + paymentInformation.find("#lastName").prev().text();
}
if (formObj.city === '') {
pageValidateText += '\n' + paymentInformation.find("#city").prev().text();
}
if (formObj.province === '') {
pageValidateText += '\n' + paymentInformation.find("#province").prev().text();
}
if (formObj.zipCode === '') {
pageValidateText += '\n' + paymentInformation.find("#zipCode").prev().text();
}
if (formObj.streetAddress === '') {
pageValidateText += '\n' + paymentInformation.find("#streetAddress").prev().text();
}
if (formObj.phone === '') {
pageValidateText += '\n' + paymentInformation.find("#phone").prev().text();
}
if (formObj.email === '') {
pageValidateText += '\n' + paymentInformation.find("#email").prev().text();
}
if (pageValidateText != '') {
//The form does not validate and we pop up the result
pageValidateText = 'Please correct the following:' + pageValidateText;
alert(pageValidateText);
return false; //Return false and the browser will not send the user to the next step
}
Hope this helps someone else. :)
Thanks for a great example! Maybe it could be marked as the solution to the questions so others easily can find it - thanks in advance.
Kind regards
Anders
Thanks! Also, in case anyone wants to make it a drop down list of states, just replace the text input field on cart_step02.xslt with the following. Be sure to leave the empty value to keep inline with the validation that is already in place :)
<select id="province" name="province">
<option value="" selected="true">---</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="DC">Washington D.C.</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
is working on a reply...