Submitting to Cart

In the checkout flow, the user is typically asked to provide information – e.g. and address – and make some selections and then submit the cart to become an order.

The cart can handle the following:

  • Billing details
  • Delivery details
  • Creating a user during checkout
  • Selecting a payment method
  • Selecting a shipping method
  • Applying vouchers
  • Paying with loyalty points
  • Using a gift card
  • Creating a recurring order
  • Paying with a saved card
  • Opt-ins
  • Custom fields

To submit something to cart you submit a form with the id ordersubmit and the features you want to implement:

<form name="ordersubmit" id="ordersubmit" method="post" role="form"> <!--Insert form content here--> <button type="submit" name='@GetValue("CartV2.CurrentStepButtonName")' id='@GetValue("CartV2.CurrentStepButtonName")'>@Translate("Update_order", "Update order")</button> <button type="submit" name='@GetValue("CartV2.NextStepButtonName")' id='@GetValue("CartV2.NextStepButtonName")'>@Translate("Create_order", "Create order")</button> </form>

In order for the cart to receive this information the input fields being submitted must have specific IDs, names & values. You can read more about each feature below.

Billing details are submitted using input fields with IDs listed below. Most of these can be matched with a specific user field, but a few are for billing-specific information like an EAN number or a VAT number. There’s also a comment field.

Field name & id

Notes

EcomOrderCustomerCompany

 

EcomOrderCustomerName

 

EcomOrderCustomerTitle

 

EcomOrderCustomerFirstName

 

EcomOrderCustomerSurname

 

EcomOrderCustomerMiddleName

 

EcomOrderCustomerHouseNumber

 

EcomOrderCustomerInitials

 

EcomOrderCustomerPrefix

 

EcomOrderCustomerAddress

 

EcomOrderCustomerAddress2

 

EcomOrderCustomerZip

 

EcomOrderCustomerCity

 

EcomOrderCustomerCountry

This field controls which payment methods & shipping methods can be selected on the cart.

EcomOrderCustomerRegion

 

EcomOrderCustomerPhone

 

EcomOrderCustomerFax

 

EcomOrderCustomerCell

 

EcomOrderCustomerEmail

 

EcomOrderCustomerVatRegNumber

 

EcomOrderCustomerEAN

 

EcomOrderCustomerRefId

 

EcomOrderCustomerComment

Maps to the customer comment order details field.

RAZOR
<!--Billing Address Fields--> <div> <!--Personal Fields--> <div> <input class="form-control" type="text" name="EcomOrderCustomerName" id="EcomOrderCustomerName" value='@GetValue("Ecom:Order.Customer.Name")' /> <input class="form-control" type="text" name="EcomOrderCustomerPrefix" id="EcomOrderCustomerPrefix" value='@GetValue("Ecom:Order.Customer.Prefix")' /> <input class="form-control" type="text" name="EcomOrderCustomerTitle" id="Title" value='@GetValue("Ecom:Order.Customer.Title")' /> <input class="form-control" type="text" name="EcomOrderCustomerFirstName" id="EcomOrderCustomerFirstName" value='@GetValue("Ecom:Order.Customer.FirstName")' /> <input class="form-control" type="text" name="EcomOrderCustomerMiddleName" id="EcomOrderCustomerMiddleName" value='@GetValue("Ecom:Order.Customer.MiddleName")' /> <input class="form-control" type="text" name="EcomOrderCustomerSurname" id="EcomOrderCustomerSurname" value='@GetValue("Ecom:Order.Customer.Surname")' /> <input class="form-control" type="text" name="EcomOrderCustomerEmail" id="EcomOrderCustomerEmail" value='@GetValue("Ecom:Order.Customer.Email")' /> </div> <!--Address Fields--> <div> <input class="form-control" type="text" name="EcomOrderCustomerAddress" id="EcomOrderCustomerAddress" value='@GetValue("Ecom:Order.Customer.Address")' /> <input class="form-control" type="text" name="EcomOrderCustomerAddress2" id="EcomOrderCustomerAddress2" value='@GetValue("Ecom:Order.Customer.Address2")' /> <input class="form-control" type="text" name="EcomOrderCustomerHouseNumber" id="EcomOrderCustomerHouseNumber" value='@GetValue("Ecom:Order.Customer.HouseNumber")' /> <input class="form-control" type="text" name="EcomOrderCustomerZip" id="EcomOrderCustomerZip" value='@GetValue("Ecom:Order.Customer.Zip")' /> <input class="form-control" type="text" name="EcomOrderCustomerCity" id="EcomOrderCustomerCity" value='@GetValue("Ecom:Order.Customer.City")' /> <input class="form-control" type="text" name="EcomOrderCustomerRegion" id="EcomOrderCustomerRegion" value='@GetValue("Ecom:Order.Customer.Region")' /> <select class="form-control" name="EcomOrderCustomerCountry" id="EcomOrderCustomerCountry" onchange="updateCart();"> @foreach (var country in GetLoop("Countries")) { if (country.GetString("Ecom:Country.IsCustomerCountryOrDefault") == "true") { <option value='@country.GetValue("Ecom:Country.Code2")' selected>@country.GetValue("Ecom:Country.Name")</option> } else { <option value='@country.GetValue("Ecom:Country.Code2")'>@country.GetValue("Ecom:Country.Name")</option> } } </select> </div> <!-- Contact Fields--> <div> <h4>Contact</h4> <input type="text" name="EcomOrderCustomerPhone" id="EcomOrderCustomerPhone" value='@GetValue("Ecom:Order.Customer.Phone")' /> <input type="text" name="EcomOrderCustomerFax" id="EcomOrderCustomerFax" value='@GetValue("Ecom:Order.Customer.Fax")' /> <input type="text" name="EcomOrderCustomerCell" id="EcomOrderCustomerCell" value='@GetValue("Ecom:Order.Customer.Cell")' /> <input type="text" name="EcomOrderCustomerComment" id="EcomOrderCustomerComment" value='@GetValue("Ecom:Order.Customer.Comment")' /> </div> <!--Other fields--> <div> <input type="text" name="EcomOrderCustomerCompany" id="EcomOrderCustomerCompany" value='@GetValue("Ecom:Order.Customer.Company")' /> <input type="text" name="EcomOrderCustomerEAN" id="EcomOrderCustomerEAN" value='@GetValue("Ecom:Order.Customer.EAN")' /> <input type="text" name="EcomOrderCustomerVatRegNumber" id="EcomOrderCustomerVatRegNumber" value='@GetValue("Ecom:Order.Customer.VatRegNumber")' /> <input type="text" name="EcomOrderCustomerRefId" id="EcomOrderCustomerRefId" value='@GetValue("Ecom:Order.Customer.RefID")' /> <input type="text" name="EcomOrderCustomerInitials" id="EcomOrderCustomerInitials" value='@GetValue("Ecom:Order.Customer.Initials")' /> </div> </div>

Delivery details are submitted to cart in the same way as billing details – and are in fact almost identical to billing details.

The 'Copy customer info to delivery info fields if empty'-checkbox under Settings > Ecommerce > Advanced Configuration > Shopping cart allows you to copy billing address field values to the delivery address fields if no part of the delivery address has been filled out.

Field name & id

Notes

EcomOrderDeliveryCompany

 

EcomOrderDeliveryName

 

EcomOrderDeliveryFirstName

 

EcomOrderDeliveryTitle

 

EcomOrderDeliverySurname

 

EcomOrderDeliveryHouseNumber

 

EcomOrderDeliveryMiddleName

 

EcomOrderDeliveryInitials

 

EcomOrderDeliveryPrefix

 

EcomOrderDeliveryAddress

 

EcomOrderDeliveryAddress2

 

EcomOrderDeliveryZip

 

EcomOrderDeliveryCity

 

EcomOrderDeliveryCountry

 

EcomOrderDeliveryRegion

 

EcomOrderDeliveryPhone

 

EcomOrderDeliveryFax

 

EcomOrderDeliveryCell

 

EcomOrderDeliveryEmail

 

RAZOR
<!--Delivery Address Fields--> <div> <!--Personal Fields--> <div> <input type="text" name="EcomOrderDeliveryName" id="Name" value='' /> <input type="text" name="EcomOrderDeliveryPrefix" id="Prefix" value='' /> <input type="text" name="EcomOrderDeliveryTitle" id="Title" value='' /> <input type="text" name="EcomOrderDeliveryFirstName" id="EcomOrderDeliveryFirstName" value='' /> <input type="text" name="EcomOrderDeliveryMiddleName" id="EcomOrderDeliveryMiddleName" value='' /> <input type="text" name="EcomOrderDeliverySurname" id="EcomOrderDeliverySurname" value='' /> <input type="text" name="EcomOrderDeliveryEmail" id="EcomOrderDeliveryEmail" value='' /> </div> <!--Address Fields--> <div> <input type="text" name="EcomOrderDeliveryAddress" id="EcomOrderDeliveryAddress" value='' /> <input type="text" name="EcomOrderDeliveryAddress2" id="EcomOrderDeliveryAddress2" value='' /> <input type="text" name="EcomOrderDeliveryHouseNumber" id="EcomOrderDeliveryHouseNumber" value='' /> <input type="text" name="EcomOrderDeliveryZip" id="EcomOrderDeliveryZip" value='' /> <input type="text" name="EcomOrderDeliveryCity" id="EcomOrderDeliveryCity" value='' /> <input type="text" name="EcomOrderDeliveryRegion" id="EcomOrderDeliveryRegion" value='' /> <select name="EcomOrderDeliveryCountry" id="EcomOrderDeliveryCountry" onchange="updateCart();"> <option>Select delivery country</option> @foreach (var country in GetLoop("Countries")) { if (country.GetString("Ecom:Country.IsDeliveryCountry") == "true") { <option value='@country.GetValue("Ecom:Country.Code2")' selected>@country.GetValue("Ecom:Country.Name")</option> } else { <option value='@country.GetValue("Ecom:Country.Code2")'>@country.GetValue("Ecom:Country.Name")</option> } } </select> </div> <!-- Phone Fields--> <div> <input type="text" name="EcomOrderDeliveryPhone" id="EcomOrderDeliveryPhone" value='' /> <input type="text" name="EcomOrderDeliveryFax" id="EcomOrderDeliveryFax" value='' /> <input type="text" name="EcomOrderDeliveryCell" id="EcomOrderDeliveryCell" value='' /> </div> <!--Other fields--> <div> <input type="text" name="EcomOrderDeliveryCompany" id="EcomOrderDeliveryCompany" value='' /> <input type="text" name="EcomOrderDeliveryInitials" id="EcomOrderDeliveryInitials" value='' /> </div> </div>

To create a user or update an existing user during checkout, submit a field with the name and ID EcomUserCreateNewOrUpdate alongside fields specifying a user name and a password.

Field name & Id

Notes

EcomUserCreateNewOrUpdate

Older implementations used EcomUserCreateNew

EcomUserCreateUserName

 

EcomUserCreatePassword

 

EcomUserCreateConfirmPassword

 

RAZOR
<!--Create user during checkout--> @{ var isLoggedIn = Dynamicweb.Security.UserManagement.User.IsExtranetUserLoggedIn(); } @if (!isLoggedIn) //If user is not logged in { <input type="checkbox" name="EcomUserCreateNewOrUpdate" id="EcomUserCreateNewOrUpdate" checked='@GetBoolean("Ecom:User.CreateNew")' /> <input type="text" name="EcomUserCreateUserName" id="EcomUserCreateUserName" /> <input type="password" name="EcomUserCreatePassword" id="EcomUserCreatePassword" /> <input type="password" name="EcomUserCreateConfirmPassword" id="EcomUserCreateConfirmPassword" /> }

Payment methods are submitted to cart using input elements with the name EcomCartPaymethodID and an id of the type EcomCartPaymethodID_{PaymentMethodID}, with PaymentMethodID replaced by a valid id.

Field Name & ID

Notes

EcomCartPaymethodId

 

Some payment methods support inline payment in which case the payment form can be rendered directly in the cart template. The contents of the payment form is payment method-specific and typically comes from a template on the payment method.

RAZOR
<!--Payment Methods--> @foreach (var paymentmethod in GetLoop("Paymethods")) //Loop through payment methods { <div class="radio"> <label > @if (@paymentmethod.GetString("Ecom:Cart.Paymethod.IsSelected") == "true") // check if payment method is selected { <input type="radio" name="EcomCartPaymethodID" id='EcomCartPaymethodID_@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' value='@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' checked='checked' /> } else { <input type="radio" name="EcomCartPaymethodID" id='EcomCartPaymethodID_@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' value='@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' /> } @paymentmethod.GetValue("Ecom:Cart.Paymethod.Name") </label> </div> } <!--Inline Payment Forms--> @if (!string.IsNullOrWhiteSpace(GetString("Ecom:Cart.PaymentInlineForm"))) { @GetString("Ecom:Cart.PaymentInlineForm") }

Shipping methods are submitted to cart using input elements with the name EcomCartShippingMethodId and an id of the type EcomCartShippingMethodId_{ShippingMethodID} with ShippingMethodID being replaced by a valid id.

Field Name & ID

Notes

EcomCartShippingmethodId

 

EcomCartPaymethodId

 

Some shipping providers can provide you with more content – e.g. a list of parcel shops or parcel types – which must also be submitted to cart. This information is shipping method specific, and typically comes from a template set on the shipping method.

RAZOR
<!--Shipping methods--> @foreach (var shippingmethod in GetLoop("Shippingmethods")) { <div class="radio"> <label> @if (shippingmethod.GetString("Ecom:Cart.Shippingmethod.IsSelected") == "true") { <input type="radio" name="EcomCartShippingmethodID" onclick="updateCart();" id='EcomCartShippingmethodID_@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' value='@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' checked="checked" /> } else { <input type="radio" name="EcomCartShippingmethodID" onclick="updateCart();" id='EcomCartShippingmethodID_@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' value='@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' /> } @shippingmethod.GetValue("Ecom:Cart.Shippingmethod.Name") </label> </div> <!--Shippingmethod Content - e.g. Parcel shops or Parcel types--> if (!string.IsNullOrWhiteSpace(shippingmethod.GetString("Ecom:ShippingProvider.Content"))) { @shippingmethod.GetString("Ecom:ShippingProvider.Content") } }

Vouchers are applied to an order by submitting a valid voucher code in a field with the ID EcomOrderCustomerVoucher.

Field Name & ID

Notes

EcomOrderVoucherCode

 

<!--Vouchers--> <input type="text" name="EcomOrderCustomerVoucher" id="EcomOrderCustomerVoucher" value='@GetString("Ecom:Order.Customer.VoucherCode")' />

To apply loyalty points to an order you submit a field with the ID EcomOrderPointsToUse and a value in loyalty points

Field Name & ID

Notes

EcomOrderPointsToUse

 

In this example I first check of the current user is logged in – if she is, I retrieve her points balance and check if she can pay with points.

RAZOR
@{ var isLoggedIn = Dynamicweb.Security.UserManagement.User.IsExtranetUserLoggedIn(); var currentUser = Dynamicweb.Security.UserManagement.User.GetCurrentExtranetUser(); double pointsbalance = 0; } <!--Pay with points--> @if (isLoggedIn) { pointsbalance = Dynamicweb.Ecommerce.Services.Loyalty.GetPointsBalance(currentUser.ID); <div>Your points: @pointsbalance</div> @if (pointsbalance > 0) { <input class="form-control" type="text" name="EcomOrderPointsToUse" id="EcomOrderPointsToUse" value='@GetValue("Ecom:Order.PointsToUse")' /> } else { <input class="form-control" type="text" name="EcomOrderPointsToUse" id="EcomOrderPointsToUse" value='' disabled title="No loyalty points available" /> } } else { <div><i>Sign in to see your loyalty points balance.</i></div> }

Gift Cards are applied to an order by submitting a valid gift card code to a field with the ID EcomOrderGiftCardCode.

Field Name & ID

Notes

EcomOrderGiftCardCode

 

RAZOR
<input type="text" name="EcomOrderGiftCardCode" id="EcomOrderGiftCardCode" value="" />

To create a recurring order you must first check of the payment method supports recurring orders. If it does, you must submit a boolean field with the id & name EcomRecurringOrderCreate alongside an interval, an interval unit, and a start and end date.

Field Name & ID

Value

Notes

EcomRecurringOrderCreate

 

 

EcomOrderRecurringInterval

-

 

EcomOrderRecurringIntervalUnit

0 = days
1 = weeks
2 = months

 

EcomOrderRecurringEndDate

 

 

EcomOrderRecurringEndDate_year

 

 

EcomOrderRecurringEndDate_month

 

 

EcomOrderRecurringEndDate_day

 

 

EcomOrderRecurringStartDate

 

 

RAZOR
@if (@GetBoolean("Ecom:Order.PaymentMethod.RecurringSupport") == true) { <!--Checkbox to create recurring orders--> <input type="checkbox" name="EcomRecurringOrderCreate" id="EcomRecurringOrderCreate" checked='@GetBoolean("Ecom:User.CreateNew")' /> <!--Interval--> <input type="text" name="EcomOrderRecurringInterval" id="EcomOrderRecurringInterval" value='1' /> <select name="EcomOrderRecurringIntervalUnit" id="EcomOrderRecurringIntervalUnit" value="0"> <option value="0">Days</option> <option value="1" selected>Weeks</option> <option value="2">Months</option> </select> <!--Start Date--> <input type="date" name="EcomOrderRecurringStartDate" id="EcomOrderRecurringStartDate" min="@DateTime.Today.ToString("yyyy-MM-dd")" value='@DateTime.Today.ToString("yyyy-MM-dd")' /> <!--End Date--> <input type="date" name="EcomOrderRecurringEndDate" id="EcomOrderRecurringEndDate" min="@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")" value='@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")' /> }

Saved cards – which are actually saved payment methods – are saved by submitting a boolean field with the id EcomOrderSavedCardCreate_{PaymethodID} alongside a field specifying the name of the saved card. You should ensure that the payment method supports saved cards - at the time of writing this is:

To use a saved card you submit a field with the ID EcomCartSavedCardID_{SavedCardId}, with SavedCardId being the id of a saved card. Make sure you clear any previously selected payment method when a saved card is submitted.

Field Name & ID

Notes

EcomOrderSavedCardCreate_{PaymethodID}

Paymethod – not PaymentMethod

EcomOrderSavedCardName

 

 

 

EcomCartSavedCardID_{SavedCardID}

 

RAZOR
<!--Saving a card --> @foreach (var paymentmethod in GetLoop("Paymethods")) //Loop through payment methods { if (paymentmethod.GetString("Ecom:Cart.Paymethod.SupportSavedCard") == "true" && @paymentmethod.GetString("Ecom:Cart.Paymethod.IsSelected") == "true") // Check if this method supports saved cards & is selected { <input type="checkbox" name="EcomOrderSavedCardCreate" id="EcomOrderSavedCardCreate_@paymentmethod.GetString("Ecom:Cart.Paymethod.ID")" value="true" /> <input type="text" name="EcomOrderSavedCardName" id="MySavedCardName" value='My @paymentmethod.GetValue("Ecom:Cart.Paymethod.Name") Card' /> } } <!-- Using a card --> @{ var savedcards = GetLoop("SavedCards"); } @if (savedcards.Any()) //Checks if this user has any saved cards { foreach (var savedcard in savedcards) { <div class="radio"> <label> @if (@savedcard.GetString("Ecom:SavedCard.IsSelected") == "true") //Checks if the saved card is selected { <input type="radio" name="EcomCartSavedCardID" id="EcomCartSavedCardID_@savedcard.GetString("Ecom:SavedCard.ID")" value="@savedcard.GetString("Ecom:SavedCard.ID")" checked="checked" /> } else { <input type="radio" name="EcomCartSavedCardID" id="EcomCartSavedCardID_@savedcard.GetString("Ecom:SavedCard.ID")" value="@savedcard.GetString("Ecom:SavedCard.ID")" /> } @savedcard.GetString("Ecom:SavedCard.Name") </label> </div> } }

Please note that it’s usually a good idea to let customers see and edit/remove the cards they have saved – like most self-service operations, this is done via the Customer Center.

From the cart you can change the value of the Email permission field on the logged in user, and the user can be asked to accept the Terms & Conditions.

Field Name & Id

Notes

EcomOrderSubscribeToNewsletter

 

EcomOrderCustomerAccepted

 

In your template, you can check if the shopping cart has Use email subscription checked in the cart settings:

RAZOR
@if (GetString("Ecom:Cart.UseNewsletterSubscription") == "True") { <div> <input type="checkbox" name="EcomOrderSubscribeToNewsletter" id="EcomOrderSubscribeToNewsletter" checked='@GetBoolean("Ecom:Order.Customer.NewsletterSubscribe")' /> <label for="EcomOrderSubscribeToNewsletter">Subscribe to newsletter</label> </div> } else { <div>This cart does not have the 'Use email subscription' field checked in the app settings</div> }

Custom fields – such as order fields or a coupon field– are posted to the cart using input elements which take the system name as the field name. No ID is necessary.

RAZOR
<div> <label for="Coupons">Coupon</label> <input type="text" name="Coupons" value='' /> </div> <div> <label for="TrackingURLFromERP">TrackingURLFromERP</label> <input type="text" name="TrackingURLFromERP" value='' /> </div>

Finally, a small set of order fields are used on integrated solutions. Although they can also be submitted from frontend, this is not a typical use-case.

Field Name & ID

Notes

EcomCartRequisition

 

EcomOrderReference

 

EcomOrderShippingDate

 

EcomOrderIntegrationId