Cart

Below are documented:

• the variables of the cart.html cart page
• the mini cart

In addition, on the cart page you can also use the variables common to all pages.

cart.html

The cart contains the products the customer intends to purchase. It lets you calculate shipping costs and any fees for the selected payment method. You can also apply a promotion coupon in the cart.

var (

    // Button to apply a discount coupon to the cart.
    buttonApplyCoupon html

    // Button to proceed to checkout and place the order.
    buttonCheckout html

    // Button to checkout after logging in.
    buttonCheckoutWithLogin html

    // Button to continue shopping.
    buttonContinueShopping html

    // Button to empty the cart of all products.
    buttonEmpty html

    // Button to apply changes to the cart.
    buttonUpdate html

    // Page content.
    content html

    // Field to enter a discount coupon.
    coupon html

    // Discount coupon currently applied to the cart.
    currentCoupon string

    // Discount as the sum of discounts applied to the cart total cost.
    discount Discount

    // Discounts applied to the cart total cost.
    discounts []Discount

    // Page image.
    image AlignedImage

    // Product SKUs in the cart.
    items []CartItem

    // Payment method.
    payment html

    // Payment cost, for example due to a fee or cash-on-delivery charge.
    paymentCost Price

    // Payment methods.
    payments []CartPaymentMethod

    // Total cost before applying any discount.
    prediscountSubtotal Price

    // Shipping method.
    shipping html

    // Shipping cost.
    shippingCost Price

    // Shipping methods.
    shippings []CartShippingMethod

    // Cart identifier token.
    token string

    // Message describing any conditions required to proceed
    // with the order or quote.
    statusMessage html

    // Total cost.
    subtotal Price

    // Total tax amount.
    taxAmount html

    // Unique cart identifier.
    token string

    // Indicates whether the cart is a quote.
    toQuote bool

    // Total.
    total Price

    // Total weight of the rows.
    weight html

)

Mini cart

The mini cart lets customers see a summary of the cart contents without leaving the current page. From the mini cart, they can go directly to the cart page or proceed with the order. The mini cart appears as a pop-up when the customer clicks a specific element on the page.

The page element that opens the mini cart when clicked must have the data-design-open attribute set to design-mini-cart:

<div data-design-open="design-mini-cart">View cart</div>

When this element is clicked, the cart contents are read and the code inside the element with id equal to design-mini-cart is processed.

This is a simple mini cart example:

<div id="design-mini-cart">
  <div class="design-mini-cart-isnotloaded"><div class="loading"></div></div>
  <div class="design-mini-cart-isloaded" style="display: none;">
    <!-- .if items -->
    Products:
    <!-- .for items -->
    <div>
      <!-- .show image --><!-- .end -->
      <!-- .show name --><!-- .end -->
    </div>
    <!-- .end for -->
    <!-- .end if -->
    <!-- .if not items --> cart is empty <!-- .end if -->
  </div>
</div>

Note that the syntax is not Scriggo because this code is processed directly by the browser, not on the server as happens for the rest of the template.

The following are all the variables you can use in the for miniCart context.

for items

The items variable is used, in the context of the element with id equal to design-mini-cart, to show the first five product SKUs in the mini cart.