Table of Contents

Shopping Cart

Render cart content, handle checkout, and shows receipt to customers.

The Shopping Cart app is a paragraph app which is used to:

  • Keep a record of the products which are added to cart
  • Show cart content & related information to the customer
  • Guide the user through the checkout process, allowing them to supply e.g. an address and select how to pay and which shipping service to use
  • Display receipts & send out order confirmation emails

Roughly speaking there are three things to consider when creating a shopping cart;

  • The app settings which are used to create the checkout flow and tweak cart behavior
  • Cart commands which are used to manipulate cart content from the shopping cart (and other templates)
  • How to submit things to cart as the user is moved through the checkout flow.

Together, these subjects encompass the "implementing" part of the shopping cart app. Please note that we don't currently have a ViewModel for the shopping cart, so this app uses TemplateTags.

Adding this app to a paragraph, you will see a list of settings for configuring how the app works, they are explained below. The most important settings are the steps settings, as they control the checkout flow, but you may also want to set up notification emails and more.

Settings

The Settings section is used to set a cart context and/or make this a quote-cart: ShoppingCartSettings The following settings are available here:

Setting Use Notes
Channel Select a channel This overrides any value set on the website Ecommerce-settings.
Context cart Select an order context
Checkout to quote Make this a quote cart

Steps

The Steps section is used to define the steps in the checkout flow, e.g. Show Cart, Checkout, and Receipt. Each step basically consists of a label and a template for rendering the stuff which is supposed to happen on that step. ShoppingCartSteps Click one of the steps to edit it - please note that one of the steps should be designated as the Checkout-step,this is the step which converts a cart to an order. ShoppingCartIsCheckout This step doesn't need a template, so the customer will move directly from the previous step to the next step (typically Receipt).

Notification e-mails

The Notification e-mails section is used to create email notifications for both customers and staff – most commonly an order confirmation email. ShoppingCartSettings To create a notification:

  1. Click Add
  2. Specify recipients - this can be done in several ways:
    • Check send to billing email and/or send to shipping email
    • Check send to custom email field and use the dropdown to select the custom field with the email
    • Manually specify an email in the Recipient-field
  3. Fill in the email details:
    • Specify a Subject
    • Select mail content - Page or Template - and then select the relevant page or template
    • Specify a sender name and sender email
    • Select an encoding (default is UTF-8)
    • Optionally select an attachment to include in the email

Field validation

The Field validation settings make it possible to apply different types of field validation during checkout: ShoppingCartSettings Using these settings you can:

  • Check customer acceptance to force a check for Terms & Conditions and customize the error message you can render if the check fails
  • Check A check for stock status to force a check for whether or not the product is in stock and customize the error message you can render if the check fails
  • Select a custom validation group to apply during checkout

Newsletter

The Newsletter setting makes it possible to update the standard user email permission field during checkout. ShoppingCartSettings

Empty cart

The empty cart settings control what will happen if the user tried to view an empty cart. ShoppingCartSettings

  • 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 template to render instead of the cart
  • Take no special action simply displays the first step of the checkout flow

User management

The User management section basically does two things:

  • Apply user details to order controls if user details from a logged-in user are applied to the cart on first load or not
  • Create user in checkout makes it possible to create a registered user during checkout - you can select a group for new users to place them in. If relevant, you can check Update existing users based on email match if that is the desired behaviour. You can also customize some validation error messages.

ShoppingCartSettings

Payment & delivery

The payment & delivery section controls which payment methods and shipping methods to make available on this cart. If nothing is specified all methods are made available. ShoppingCartSettings

Additional settings

The Additional settings section contains some, well, additional settings for tweaking cart behaviour. ShoppingCartSettings These are the options:

  • When re-entering cart controls what to do if a customer leaves the checkout flow and then returns to cart:
    • Show first step
    • Show last visited step
  • Country for shipping method and Country for payment method controls which address should be used to fetch payment and shipping methods on the cart:
    • Always use billing country
    • Always use shipping country
    • Use delivery/shipping country if shipping address is set
  • Unavailable products controls what to do if a product becomes unavailable during checkout:
    • Remove
    • Ignore
To top