SoftSlate Cloud Platform provides a full set of robust ecommerce features allowing you to sell your products and services to your customers. At the center of the customer experience is the notion of the shopping cart. Here are the topics discussed in this document:

Attributes and Options

A form allowing customers to add a product to their cart appears on each product page. This is how a customer starts to place an order:

image-20240818100746560

The first thing you'll notice about this example is that the add-to-cart form has a couple attributes and options under the product. Attributes and options are set up by employees in the administrator. They allow the customer to enter information or make selections to customize the item they are ordering. Common examples of attributes include size and color, but the possibilites are endless.

To creat attributes under a product, click the Attributes link under the product's three-dots menu:

image-20240818101613077

In the above example, there are two attributes: "Daypack Leather Color" and "Backpack Color":

image-20240818101823083The first attribute in the above example has an Attribute Display Type of "DropDownMenu", meaning that the customer uses a dropdown menu to choose which option they want. The second attribute has a display type of "RadioButtons". This takes up more space, and it allows the system to display an image next to each option.

Attribute Display Types

Here is a summary of all of the different Attribute Display Types:

  • DropDownMenu: The customer chooses one of the options that is configured under the attribute. The options are shown in a drop down menu. The Attribute's "Default Option Code" field can defiine which option is selected initially when the page is first shown to the customer.

  • RadioButtons: The customer chooses one of the options that is configured under the attribute. Each option is shown next to a radio button that the customer uses to choose it. This allows the system to display an image next to each option. The options' small images are shown immediately on the product page, and if clicked, the options' large images will show in a popup, allowing the customer a closer look.

  • Checkbox: There are no options under the attribute with this or the other display types below. The customer may check off that they want the attribute as part of the item they are ordering. Note: if the attribute is required, they must check the checkbox to add the product to the cart. This can be useful to make sure the customer understands, for example, terms and conditions associated with the item.

  • TextArea: The customer is given a large textbox to type in any text. This could be used, as just one example, to ask the customer what message they want to appear in a note that is sent with the item.

  • TextBox: The customer is given a regular textbox to type in any text.

  • Email: The customer must enter a valid email address.

  • Phone: The customer enters a phone number - this display type is optimized for easy entry on mobile devices (ie, it shows a number pad when selected).

  • Date, DateAndTime, Duration: The customer sees a popup calendar and other widgets to help them enter these values.

Other Attribute Fields

As you set up your attribute, here is some more information about some of the other key fields:

  • Is Required? Set this to true if the customer must select an option under the attribute, or must enter a value for the attribute. They will not be able to add the product to their cart without submitting a value for each required attribute.

  • Default Option Code: If an attribute's display type is DropDownMenu or RadioButtons, you can use this field to determine which option is selected initially when the customer first sees the product page. After creating the options under the attribute, populate this field with the Code value of the option that should be preselected as the default.

  • Attribute Order: This governs the order in which the attributes appear to customers on the product page. If you leave all these values as the default, 0, the attributes will be rendered in the order in which they were added to the system.

  • Unit Price: If a value is entered here other than 0, the amount will be added to the item's total, when the customer submits a value for the attribute. You can use this to charge extra if a customer enters a value or makes a selection for an attribute. Note that options can also have a unit price. Both the attribute's price and the selected option's price, if defined, contribute to the item's total.

  • Weight, Length, Width, and Height: If you enter values for these fields, the amounts will be added to the item's weight and dimensions, which can be used when computing shipping rates. Use this, for example, if a given attribute makes the item bulkier. For more information, see the document on Shipping Packages.

Options

If an attribute's display type is DropDownMenu or RadioButtons, you should create at least one option under the attribute for the customer to select. These two display types are designed for you to define the specific options they can choose from. To manage the options under an attribute, click the Options link under the attribute's three-dots menu:

image-20240818104631627

Each options requires you to enter a name for it, and optionally other information, such as the option order, etc.:

image-20240818104840422

Here is more information on some of the other key option fields:

  • Option Order: This governs the order in which the options appear to customers on the product page. If you leave this value as the default, 0, the options will be rendered in the order in which they were added to the system.

  • Is Active: Use this if you need to toggle whether or not the option is shown to users.

  • Unit Price: If a value is entered here other than 0, the amount will be added to the item's total when the customer selectes the given option. Use this, for example, to charge a little extra for "large" versions of an item. Note that attributes can also have a unit price. Both the attribute's price, if defined, and the selected option's price contribute to the item's total.

  • Weight, Length, Width, and Height: If you enter values for these fields, the amounts will be added to the item's weight and dimensions, which can be used when computing shipping rates. Use this, for example, if a particular option is bulkier that other options. For more information, see the document on Shipping Packages.

  • Images: Only useful under attributes with a display type of RadioButtons. The options' small images are shown immediately on the product page, and if clicked, the options' large images will show in a popup, allowing the customer a closer look. For more information, see the documentation section on Images for Attributes and Options Under a Product.

Adding Items to the Cart

After entering attribute values or selecting options, the customer can click the Add to Cart button to add an item to their cart:

image-20240818160627536

Validation Checks

As a customer adds an item to their cart, the system makes the following validation checks:

  • Required attributes must be selected or a value submitted for them.

  • Inventory checks. If inventory tracking is enabled for the product, or a product variant that matches the attributes and options that were entered, the system checks to make sure the item is not out of stock (or if it is out of stock, the "Deny Purchase When Out of Stock" flag is not set). For more information, see the documentation on Inventory Tracking.

  • Max Quantity Per Order checks. It is possible to restrict the overall quantity of a given product in the cart, using the product's, "Max Quantity Per Order" field. If that fields value is less than the quantity in the cart, a validation error is shown. Similarly, it's possible to restrict the overall quantity of the products under a given "Primary" category, using the category's "Max Quantity Per Order" field. This validation checks are independent of inventory tracking.

Automatically Saved Carts, and Abandoned Carts

When a customer adds an item for the first time, an Order record is created in the system that represent the cart. The order can actually be viewed in the administrator under the Ecommerce -> Orders area. The order will go through several statuses, such as Initialized and ItemAdded before the customer completes the order.

If the customer does not complete their order in their current browser session, by default, the cart will be reloaded whenever the customer comes back to the site using the same browser, for up to 90 days. This function can be disabled by turning off the Automatically Save Last Cart site setting. If the customer abandons their cart for over 90 days, a job automatically deletes it in order to keep the system clean. Note that when the customer's cart is reloaded in this scenario, it is reprocessed, so that current pricing and availability is taken into account.

A common practice among ecommerce sites is emailing customers when they have abandonded their carts, to ask if there was "something wrong" or enourage them to complete their order. This is possible in SCP with the Follow Up Emails feature.

Cart Page Functions

If a customer chooses to view the cart page on the site, they can not only view all the items they have added previously, they can also edit and remove their items, and perform a couple of other functions.

image-20240818162816545

Editing and Removing Items in the Cart

Next to each option that customer selected for their item, there's a pencil icon. Clicking the pencil icon allows them to change their selection for the attribute.

At the top right of each item there is a large X that allows them to completely remove the item. In addition the quantity of each item can be adjusted.

If items are edited or removed, all the same validations above that are made when the item is added, are made again. In addition discounts and the order's overall subtotal are recalculated.

Coupons/Gift Certificates Form

Customers may also enter a coupon or gift certificate code on the cart page. If they do they'll see messaging about whether the code was applied or will be applied. You can choose to diable the coupon/gift certificate form on the cart page by turning off the Show Coupon Form on Cart Screen? setting.

Estimated Shipping Form

Under the subtotal, the customer can employ a form to provide an estimated shipping cost for the items that are currently in the cart. Clicking on the "Calculate Estimated Shipping" link opens up the form:

image-20240818163808170

Filling in the state and postal code in this form and submitting it invokes the same shipping processing functions that happen during the checkout process. The shipping processors retrieve the rates for the current cart going to the given address, and the least-expensive shipping option is displayed:

image-20240818164343339

You can disable this function by turning off the "Enable Estimated Shipping On Cart Page" site setting.