Shopping Cart

The Shopping Cart app is a paragraph app which handles everything related to adding products to cart and completing an order.

More specifically the Shopping Cart app does the following:

  • Keeps a record of the items added to cart
  • Shows the items in the cart to the customer
  • Handles the checkout process
  • Shows an order receipt
  • Sends out order confirmation emails

Once the app is added to a paragraph you can configure it using the app settings. The app settings consist of sections controlling different aspects of the app behavior, as outlined below.

The first settings are used to set a shop and (optionally) an order context for the cart (Figure 1.1). You can also check checkout to quote if this is supposed to be a quotes cart.

Figure 1.1 Associating the cart app with a shop or context

If no shop is selected, orders are created under the default shop, as defined in the website Ecommerce settings.

Next, you can define the checkout flow – the steps the customer is required to go through when they want to complete an order (Figure 2.1).

Figure 2.1 The standard checkout flow

The standard checkout flow consists of four steps;

  • Show cart
  • Information
  • Checkout
  • Receipt

Only the checkout step is strictly required, but you usually want to show your customers the contents of the cart and a receipt once they’ve completed checkout. Think of each of the non-essential steps as a virtual breakdown of the information a customer must supply and receive before an order can be created.

To edit a step click the Edit icon and to remove it click the red cross – when you edit a step you should have access to a set of templates demonstrating various Ecommerce features (Figure 2.2).

For another example, check out the the checkout flow (hehe) on Dynamicweb Rapido.

The notification emails section is used to create email notifications for both customers and staff – most commonly an order confirmation email.

To create a notification click Add notification to open the Edit email window (Figure 3.1) and configure the notification.

Figure 3.1 Creating a notification email

To configure the notification you must first specify a recipient – this can be done in several ways:

  • Check For Customer Email Address to use the billing address email
  • Check For Delivery Email Address to use the delivery address email
  • Check Use field for email recipient to select a custom order or user field
  • Manually specify a recipient email – also accepts a list of email addresses separated by commas

For each notification you must also:

  • Provide a subject
  • Select/create an email template
  • Provide a sender name and sender email
  • Select an encoding (defaults to UTF-8)
  • (Optional) Select an attachment to include with the email

Tip: You can use {OrderID} in the subject to insert the order number in the confirmation email.

The field validation settings (Figure 4.1) allow you to apply validation rules during checkout.

Figure 4.1 The field validation settings

You can:

  • Toggle a check for terms and conditions
  • Toggle a check for stock status – this field is required if product reservation is enabled
  • Select a validation group to apply during checkout

A number of other settings ara available on the shopping cart app - these are described below.

The Newsletter section(Figure 6.1) is used to make it possible to update the email permission field for the user during checkout. The current value is available via the Ecom:Cart.UseNewsletterSubscription tag.

Figure 6.1 The newsletter settings

The Empty cart settings (Figure 7.1) control what a user will see when they view an empty cart.

Figure 7.1 The empty cart settings

You have three options:

  • Redirect to an internal page lets you select a specific page on your website to redirect users to
  • Show template allows you to select a custom template to show instead of the cart. You can then add cool stuff to the template, of course, like suggested or personalized products and news.
  • Take no special action does exactly what it says, and simply displays the first step of the order process as with a full cart. However, you can use the Ecom:Order.IsEmpty tag to test for and do stuff if a cart is empty.

The User management section (Figure 8.1) allows you to control how the cart interacts with user management.

Figure 8.1 The user management settings

You can:

  • Enable auto-filling order fields with the user details of a logged in user
  • Enable user creation during checkout – specify which user group(s) to place the new user in, and which error messages to display if something goes wrong. 
  • Check update existing users based on email match to update all existing users with the same email with the information entered during checkout

If a user is logged in on two separate computers, the shopping cart content will be automatically synchronized.

Saving an address to user management

Dynamicweb supports saving an address on a logged in user on checkout. Look at the InformationSaveCart.hmtl template for example code.

The address will be saved to the addresses section of the user, if it doesn’t match an existing address.

On multi-shop solutions the payment & delivery section is used to control exactly which payment methods and shipping methods should be available on this cart (Figure 9.1).

Figure 9.1 The payment and delivery settings

To make a payment method or shipping method available for a cart, move it from the list of available methods (left column) to the list of selected methods (right column).

Leave as All if all methods should be made available, depending on the language context.

The behavior settings (Figure 10.1) control cart behavior in a variety of situations, as outlined below.

Figure 10.1 The behavior settings

You can control:

  • If the cart should show the first order step or show the last visited step for users returning to the cart after leaving the order flow. If you use validation groups on other steps than the first step, set to last visited to make sure you have access to validation loops in your templates.
  • How the cart selects which shipping and payment methods should be available – the options being customer country, delivery country, or delivery country if a delivery address has been selected.
    • Prices in the shopping cart are recalculated when the billing or delivery country is changed. VAT is recalculated when a new bulling country is set, and Taxes are recalculated when a new delivery country is set.
  • If products which have become unavailable should be removed or ignored
  • If you want to use an image pattern from a product catalog in the cart

If you need more than one type of shopping cart on a solution - e.g. a Daily, a Weekly and a Monthly cart - you can create and use different order contexts.

To create an order context:

  • Navigating to Settings > Ecommerce > Orders > Order contexts
  • Click New order context in the toolbar
  • Enter a name
  • Specify which shop(s) to make it available for 
  • Save
Figure 11.1 Creating a new order context

An order context can be selected on each shopping cart app to create non-default carts, e.g. a quotes cart or a weekly cart as an alternative to the default cart.

To add products to a context cart use the OrderContexts loop and related tags.

Dynamicweb Ecommerce uses a special query string parameter – cartcmd – when adding, removing, or otherwise modifying a product in a cart.

You can use cartcmd in either a direct link or when submitting a form, with one of the following values:

Query string value

Description

Example

add*

Adds the requested product to the cart

Url example:
cartcmd=add&productid=PROD25&Quantity=1

addMulti

Add multiple products to the cart at the same time

Example using form.submit (here, just a single product):
CartCmd=addMulti
&ProductLoopCounter1=1
&ProductID1=T16@@SHOP3
&VariantID1=
&UnitID1=
&Quantity1=2

emptycart

Empties the cart.

You can link to a specific page after emptying the cart:

<a href="Default.aspx?ID=123&cartcmd=emptycart">

This empties the cart, then shows the requested page.

converttoorder

Converts a cart to an order (without going through payment/checkout).

Useful for integration purposes, if payment is handled outside Dynamicweb Ecommerce

updateorderlines

Updates the quantity of several orderliness, using the parameter QuantityOrderLineOL[ID]=quantity

 

?cartcmd=updateorderlines
&QuantityOrderLineOL1=20

incorderline

Increases the quantity of an item in the cart

 

decorderline

Decreases the quantity of an item in the cart. When the quantity reaches zero, the item is removed from the cart.

 

delorderline

Removes an item from the cart

 

orderline

Used with values “key” and “quantity” to update the quantity on an orderline directly from the OrderLineID.

?CartCmd=orderline
&key=OL28
&quantity=4

addwithpoints

Adds a single item to the cart with loyalty points.

 
loadorder Loads an abandoned cart based on an order secret which must be send along with the command. "/Default.aspx?CartCmd=loadorder&LoadingOrderId=" + @GetString("Ecom:Order.ID") + "&LoadingOrderSecret=" + @GetString("Ecom:Order.LoadingOrderSecret")
* In context of BOM product

cartcmd=add&productid=PROD25&Quantity=1
&PROD26Quantity=2
&PROD27Quantity=3

will add 1 of PROD25, 2 of PROD26 and 3 of PROD27.

So the syntax of multiple is [ProductId][Quantity]

For examples on how to use cart commands, please see below - or check out the standard Ecommerce templates.

All cart commands support using redirect=false to prevent redirects when adding to cart using e.g. Ajax.

 

There are three ways you can create a simple add-to-cart button:

  • Create a form using the Ecom:Product.Form.Clean tag, which outputs a set of hidden-fields (Figure 13.1) containing the information needed when adding a product to the cart
  • Create a form and supply the information manually – at the minimum the ProductID, VariantID, UnitID, cartcmd=add, and optionally the PageID you want to redirect users to after adding the product to the cart
  • Create an <a href> link with the relevant parameters - at the minimum cartcmd=add, productID, and often PageID (optional)
Figure 13.1 Using the Ecom:Product.Form.Clean tag to output hidden-fields for an add-to-cart button

With the cart command addmulti you can let your customers add more than one product to the shopping cart with a single click.

All you have to do is change the product list template:

  • Insert a form tag around the entire products loop
  • Add a hidden field which acts as cart command for the addMulti function:
     <input type="hidden" name="CartCmd" id="CartCmd" value="addMulti" />
  • Insert a form field handler tag inside the product loop: <!--@Ecom:Product.Form.Multi.HiddenFields-->
  • Insert a quantity input field and change the default name to "Quantity<!--@Ecom:Product.LoopCounter-->

Example:

<form name="multiForm" id="multiForm" method="post"> <input type="hidden" name="CartCmd" id="CartCmd" value="addMulti" /> <!--@LoopStart(Products)--> <!--@Ecom:Product.Form.Multi.HiddenFields--> <!--@Ecom:Product.Number--> - <!--@Ecom:Product.Name--> <!--@Ecom:Product.Price.Price--><br /> <input type="text" name="Quantity<!--@Ecom:Product.LoopCounter-->" value="1" /> <!--@LoopEnd(Products)--> </form>

To finish things off, then simply let users submit the form when adding products to the shopping cart.

There’s a saying in software: Never trust user input.

For an open system like an Ecommerce website, this is even more important – and that’s why we have data validation on the shopping cart. This is not only useful for stopping malicious users from submitting bad data, it’s also a helping hand to users who make mistakes. All it takes is a comma instead of a dot in an email address, and suddenly you have missing order confirmations, tracking codes, and so forth.

Here’s how to validate user data on the Shopping Cart.

Order step validation exists to make sure users cannot modify the underlying HTML of your checkout process to skip order steps.

To prevent this from happening:

  • Go to Settings > Ecommerce > Advanced Configuration > Shopping Cart
  • Check the Enable step validation checkbox (Figure 16.1)
Figure 16.1 Order step validation

This ensures that no orders will be marked as Completed before it has passed the payment step.

It’s advisable to combine this with making the Payment method ID field a required in your validation group.

You can read more about the advanced settings in this article.

Address validation lets you set up and manage address validation methods based on address validation providers.

When a customer progresses through the checkout process, their billing and delivery addresses are then validated against the information provided by the address validation provider.

Dynamicweb currently supports using the Avalara address validation provider, which can be used with the Avalara Tax provider, and the FedEx address validation provider, for use with the FedEx shipping provider.

To set up address validation:

  • Go to Settings > Ecommerce > Orders > Address validation
  • Click new in the toolbar

This opens the Address validator settings window (Figure 17.1).

Figure 17.1 Creating an address validator

From here, you must:

  • Name the address validator
  • Activate the address validator by checking the Active checkbox
  • Select one or more countries for which the validator should be active
  • (Optional) Select one or more user groups for which address validation should not be used
  • Select your address validation provider
  • Fill out any parameters required by the provider – these will vary depending on the provider you use.

To implement the address validator in your order flow you have access to the AddressValidators loop and associated tags. For an example, refer to the InformationAddressValidation.html template (located in Files/Templates/eCom7/CartV2/Step).

From Settings > Ecommerce > Advanced configuration > Shopping Cart you have access to a number of advanced configuration options for the Shopping Cart app.

Read about the settings in this article.

Database

These are the database tables relevant for the Shopping Cart app and related functionality. 

EcomAddressValidatorSettings

Contains settings for providers in Settings -> Ecom -> Orders -> Address Validation.

Field name Data type Length
AddressValidatorSettingId int 4
AddressValidatorName nvarchar 255
AddressValidatorActive bit 1
AddressValidatorProviderSettings nvarchar Max
AddressValidatorUserGroupIds nvarchar Max

EcomValidationGroups

Contains validation groups as defined in Settings -> Ecommerce -> Orders -> Validation groups.

Field name Data type Length
ValidationGroupId nvarchar 50
ValidationGroupName nvarchar 255
ValidationGroupAutoId int 4
ValidationGroupDoNotValidateIfAllFieldsAreEmpty bit 1

EcomValidationGroupsTranslation

Contains translations (EcomValidationGroupsTranslationValidationGroupLanguageID) of validation groups (EcomValidationGroupsTranslationValidationGroupID).

Field name Data type Length
EcomValidationGroupsTranslationValidationGroupID nvarchar 50
EcomValidationGroupsTranslationValidationGroupLanguageID nvarchar 50
EcomValidationGroupsTranslationValidationGroupName nvarchar 255

EcomValidations

Contains field definitions (ValidationFieldName) for validation rules and keeps track of which validation groups it belongs to (ValidationGroupId).

Field name Data type Length
ValidationId nvarchar 50
ValidationGroupId nvarchar 50
ValidationFieldName nvarchar 255
ValidationUseAndOperator bit 1
ValidationFieldType nvarchar 255
ValidationAutoId int 4

EcomValidationRules

Contains validation rule definitions (ValidationRuleId) and keeps track of which fields (ValidationRuleValidationId) belong to a rule.

Field name Data type Length
ValidationRuleId nvarchar 50
ValidationRuleValidationId nvarchar 50
ValidationRuleType nvarchar 255
ValidationRuleParameters nvarchar Max
ValidationRuleAutoId int 4

EcomSavedForLater

Registers products (SavedForLaterProductId, SavedForLaterVariantId, SavedForlaterLangugageId) marked as Saved for Later during a session (SavedForLaterSessionId).

Field name Data type Length
SavedForLaterId int 4
SavedForLaterProductId nvarchar 30
SavedForLaterVariantId nvarchar 255
SavedForLaterLanguageId nvarchar 50
SavedForLaterSessionId int 4
SavedForLaterDateAdded datetime 8

EcomOrderContexts

Field name Data type Length
OrderContextId nvarchar 50
OrderContextName nvarchar 255
OrderContextAutoId int 4

EcomOrderContextAccessUserRelation

Field name Data type Length
OrderContextAccessUserAccessUserId int 4
OrderContextAccessUserOrderContextId nvarchar 50
OrderContextAccessUserOrderId nvarchar 50
OrderContextAccessUserRelationAutoId int 4

EcomOrderContextShopRelation

Field name Data type Length
OrderContextShopRelationContextId nvarchar 50
OrderContextShopRelationShopId nvarchar 50
OrderContextShopRelationAutoId int 4