Checkout Page

LemonStand provides a highly flexible and customizable checkout process. This allows for LemonStand users to implement their checkout process in a number of different ways – single page checkouts, combining multiple checkout steps on pages, checkout processes that vary depending on the login status of the customer, checkouts that both allow and do not allow the registration of new customers, etc. LemonStand will be able to handle pretty much any checkout scenario that an eCommerce store would require.

One of the more common approaches to a checkout process is to provide a different experience depending on if the customer is logged in versus shopping as an unregistered guest. In the Zest theme we have implemented this exact approach.

The checkout process begins when the user clicks the checkout button on the cart page. We use an if statement that evaluates if the user is logged in as a customer or not.

{% if customer %}
     <a href="{{ site_url('/checkout') }}">Checkout</a>
{% else %}
     <a href="{{ site_url('/checkout-start') }}">Checkout</a>
{% endif %}&

If the user is logged in, they will be taken directly to the checkout page, where they will find their billing and shipping information pre-filled:

Or, if the user is not logged in, they will be presented with the checkout-start page. The checkout-start page will provide the user with a login form or the option to continue the checkout process as a guest. Upon successful login, the user will be redirected to the checkout page. The "Continue as Guest" link will also now redirect the user to the checkout page.

The official beginning of the checkout process will start with the checkout page. The checkout page will function as a container for the different steps in the checkout process, which are rendered by the shop-checkout partial. The checkout page will also contain code that first checks if there any items present in the cart. If cart items are present, the shop-checkout partial will then be rendered, as shown below.

<div class="row">
    <div class="content twelve columns">
      {% if not items.count %}
         <a class="secondary button" href="{{ site_url('shop') }}">Your cart is empty! Continue shopping.</a>
      {% else %}
        <div id="checkout-page">
           {{ partial('shop-checkout') }}
      {% endif %}

The flow of the checkout process is determined by the value of the step variable. In the Zest theme, the shop-checkout partial contains code that will set which partial is rendered, depending on the value of the step variable. The step variable reflects the current checkout step and can have the following values: billing_info, shipping_info, shipping_method, review and pay.

Below is an example of the code contained within the shop-checkout partial.

{% if step == 'billing_info' %}
  {{ partial('shop-checkout-address') }}
{% elseif step == 'shipping_method' %}
  {{ partial('shop-checkout-shippingmethod') }}
{% elseif step == 'pay' %}
  {{ partial('shop-checkout-pay') }}
{% endif %}
Checkout Step Description
billing_info The user will enter their billing information on this step.
shipping_info The user will enter their shipping information on this step.
shipping_method The user will select their shipping options and shipping method on this step.
review The user will be able to review their checkout and cart selections on this step.
pay The user will select a payment method and process the payment on this step.

The checkout page will require that its CMS Action be set to shop:checkout. Depending on the current checkout step, the shop:checkoutaction prepares the following variables:

Checkout Step Available Variables
billing_info billingInfo, billingStates, cart, items, totals, step
shipping_info shippingInfo, shippingStates, cart, items, totals, step
shipping_method shippingOptions, shippingMethod, cart, items, totals, step
review paymentMethods, cart, items, totals, step
pay paymentMethods, cart, items, totals, step

In order to handle the navigation between checkout steps, each of the partials rendered at each step contains a FORM with a hidden input field that will set the value of the step variable when the form is submitted. If we look at the shop-checkout-address partial, in the Zest theme, we will see that a form is opened in the beginning of the content area, and a hidden input field with a value of "billing_info, shipping_info" is present right before the close_form tag. In the Zest theme we have combined the billing_info and shipping_info steps on one form for the shop-checkout-address partial, but this is not a requirement.

{{ open_form({'class': 'custom', 'data-validation-message' : ''}) }}
  <input type="hidden" name="step" value="billing_info,shipping_info"/>
{{ close_form }}

When the form is submitted, the current step value is processed by the shop:checkout action which determines what data is to be expected for the current step and also what the next step in the sequence will be.