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 shopand (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 definedin the website Ecommerce settings.
Checkout flow
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.
Submitting to cart
During the checkout process, the user will be asked to fill in a number of fields which will then be submitted to cart. In order for these field values to be picked up by the cart the input fields must have specific names, ids and values.
Below you can find an example template which at the time of writing - June 2020 - contains examples of almost all Dynamicweb features which can be submitted to cart. Please note that this is a test template for internal use, so you should not expect to use it directly - but it may still be of use to you.
Prior to Dynamicweb 9.8, three shipping fields were auto-validated - Name, Address, and Country - but as of 9.8 and going forward only Country is automatically validated. You must therefore use field validation groups - as linked to above - to set up further validation of shipping fields.
Other settings
A number of other settings ara available on the shopping cart app - these are described below.
Newsletter
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
Empty cart 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.
User Management
The User management section (Figure 8.1) allows you to control how the cart interacts with the Users area of Dynamicweb.
Figure 8.1 The user management settings
Basically, you can do two things:
Apply user details to order – this setting applied user field like Name, Address, Phone, and so on to an order during checkout. You usually always want this enabled unless you’re creating orders on behalf of anonymous users.
Create user during checkout – this option creates users during checkout. Additional settings are available when this setting is enabled:
Setting
Use
Comments
Groups for new users
Add the new users to these groups
Update existing users based on email match
If a user with this email exists, update the user with the checkout information details
Error messages
Specify validation error messages
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.
Payment & Delivery
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.
Behavior settings
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 steporshowthe 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 billing country, shipping country, or shipping country if a shipping address has been selected.
Prices in the shopping cart are recalculated when the billing or shipping country is changed. VAT is recalculated when a new billing country is set, and Taxes are recalculated when a new shipping country is set.
If products which have become unavailable should be removed or ignored
Validation
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
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 12.1)
Figure 12.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
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.
Go to Settings > Ecommerce > Orders > Address validation
Click new in the toolbar
This opens the Address validator settings window (Figure 13.1).
Figure 13.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).
Advanced configuration options
From Settings > Ecommerce > Advanced configuration > Shopping Cart you have access to a number of advanced configuration options for the Shopping Cart app.
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).
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).