website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
20min

Cart, Checkout and Orders Flow with Secure Zones Module - Tutorial

This Tutorial shows you how to use the eCommerce and Secure Zones Modules together

Prerequisites:

  • You have read How to Set Up a Shopping Cart and Guest Checkout
  • You have installed the eCommerce Module
  • You have installed the Secure Zone Module
  • Using PayPal as a Payment Gateway? There are additional setup instructions here.

Introduction

Siteglide eCommerce is even more powerful with Secure Zones. With the security of a Secure Zone, you can show your Users more sensitive data about their shopping experience.

1) Create a Secure Zone

Create a Secure Zone which will used by shoppers on your eCommerce site. Alternatively, you can use a Secure Zone that you have created already. Find out more about the Secure Zones Module here.

2) Create a "My Orders" Page in a Secure Zone

Document image

Create a new page which will display a list of Products Users have ordered. Learn more about creating Pages here. Make a note of the Page slug, because you will want to add this to the Checkout Form’s "Redirect URL" field later.

Click the Secure Zones accordion to reveal the "Select a Secure Zone" field. Click in this to open a drop-down list of your Secure Zones and select the one you wish to be accessed by Users after they complete Checkout.

Document image

3) Add the Secure Zone to the Checkout Form

Document image

Make sure your Checkout Form is still in "Test Mode" unless the Site is Live.

The document How to Set Up a Shopping Cart and Guest Checkout, explained how to create a Checkout Form. Here we will modify this form so that it also either signs in a User or logs them in, depending on their current status.Find Forms in the Siteglide Admin’s left-hand side menu under CMS / Forms. Select the pencil icon on the right hand side of your Checkout Form to edit the structure of your form.

In the "Redirect URL" field add your Orders Page slug, preceded by a forward slash. E.g. /my-orders

Select the Secure Zones tag and then click in the Secure Zones Input field to see a dropdown of Secure Zones you have already created.

Select the Secure Zone you want to log your Users in to when they complete the form.

Press the "Save" Button to save your changes. At this point:

  1. Completing the Checkout Form will log Users in to the Secure Zone
  2. It will also redirect the Users to the My Orders Page
  3. The Users will be allowed to access the My Orders Page, because they are logged into the Secure Zone.
  4. Other Users who are not logged in will be unable to access the My Orders Page.

4) Create an Orders List Layout

As Orders List Layouts are for showing secure information about Users, they are stored under the following file structure:

  • layouts
    • modules
      • module_5
        • user_orders
          • name_of_my_layout.liquid

Create a new file in the user_orders folder and give it a name of your choice. Make a note of the name you gave it.

5) Develop your Layout

Your layout will have access to the "orders" object. You can loop over each order in the "Order" object with the following liquid (the "order" variable can be renamed to anything you like):

HTML
|

Inside this loop, you can access the following fields. (If you have renamed the order variable, make sure you also rename it when outputting the fields.)

Field Name

Liquid Tag

Description

Order ID

{{ order.id }}

The unique ID of the order

Order URL

{{ order.slug }}

The unique slug of the order

Order Full URL

{{ order.full_slug }}

The unique slug of the order including Order Slug

User ID

{{ order.user_id }}

The unique ID of the Current User

User Email

{{ order.email }}

The email address of the User who completed the Order

Status

{{ order.status }}

The status of the Order

Billing Address

{{ order.billing_address }}

Not yet available

Shipping Address

{{ order.shipping_address }}

Not yet available

Payment Method

{{ order.payment_method }}

Not yet available

Shipping Method

{{ order.shipping_method }}

Coming soon!

Tracking Number

{{ order.tracking_number }}

Not yet available

Price

{{ order.price }}

The Price paid for the Order as a decimal

Currency

{{ order.currency }}

The currency the Order was made in

6) Add Orders layout to the Orders Page

Add the following liquid to your Orders page to output a list of the current logged-in User’s Orders:{%- include 'user_orders', layout: 'my_orders_list_layout', sort_type: 'id', sort_order: 'asc', show_pagination: 'false' %}

The layout parameter should take the name of the list layout you created.

Other Ways to Use Secure Zones with eCommerce

You could add a Secure Zone to other pages related to your eCommerce flow, for example the Cart, in the same way you did with the Orders page. You could redirect the users to a login page when they visit the Cart page and are not logged in.

Learn more about Secure Zones here.

Updated 06 May 2022
Did this page help you?
Yes
No
UP NEXT
Shipping Options
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites:
Introduction
1) Create a Secure Zone
2) Create a "My Orders" Page in a Secure Zone
3) Add the Secure Zone to the Checkout Form
4) Create an Orders List Layout
5) Develop your Layout
6) Add Orders layout to the Orders Page
Other Ways to Use Secure Zones with eCommerce