Presentation

With HikaShop 3.4.0 release, we added a new checkout workflow edition interface. We worked hard on this evolution in order to allow you more liberty in the way you can setup your checkout. We'll present in this tutorial how all this works and what you can do with it.

Reach Checkout Workflow

To reach and configure the checkout, follow this step by step process :

  • In the Components dropdown, select HikaShop, then Configuration

  • Click on the Checkout tab and have a look at the Checkout Workflow part

Description

Let's now detail the new interface parts, as a legend :

  • Classic HikaShop part
  • New Checkout Workflow
  • Step 1
  • Step 2
  • Step 3, (End)
  • Add a new Step
  • Step Views
  • Add a new view

Essentials points about workflow parts

Let's precise some points in order to better understand workflow parts :
See this frontend view that respect the previous color legend

Thanks to the progress bar you can see the different steps, and in purple 2 views (here, Cart and Login).
So on a checkout, you can have one or several steps (pages of the checkout). And on each step, you can have one or several views (blocks on the same page), one below the other on the page.

Views Details

New view options

As you can expect from this view, the aim is to add a new view block and define its type. That's why you will find a dropdown to select the type. And so, select the view type, and click on "Add view"

Address options

  • Read only : Select "Yes" if you want only display the selected address(es) without allowing the user to do modifications in that view.
  • Address selector : Define how to display the address selection (dropdown or list).
    Note : This option won't be available if the Read only option is activated.
  • Type : Select here if you want to display only the billing area or only the shipping area or both.

Shipping options

  • Read only : Click "Yes" if you want to only display the (pre)selected shipping method without any possibility for the user to change it.
  • Show Title : Select if you want display the title of the view or not on top of it.
  • Multiple group product display : Select "Yes" if you want display the products thumbnail for each shipping group (when you have different vendors with different shipping methods, or warehouses).

Payment options

  • Read only : Click "Yes"if you want to only display the (pre)selected payment method without any possibility for the user to change it.
  • Show title : Select if you want display the title of the view or not on top of it.

Cart options

  • Read only : Click "Yes" if you want to display the content of your cart without any possibility to modify it.
  • Show Image : You can choose here to display the product images or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Link to the product page : Select if you want to allow the customer to go to the product page or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Display product code : Choose to display the product code in the cart view or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Display price : Display or not the prices in the cart view.
  • Price with tax : Display the product prices with taxes or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Show delete icons in the cart : Display or not the delete icon to remove products from the Cart.
    Note : This option won't be available if the Read only option is activated.

Fields options

  • Read only : Click "Yes" if you want only display the selected values in the custom order fields without possibility for the user to modify them.
  • Show title : Select if you want display the title of the view or not on top of it.
  • Show submit button : Display or not the submit button to allow the user to send the custom fields value ithout submitting the whole checkout step.
    Note : This option won't be available if the Read only option is activated.
  • Custom fields : With this input you can select which custom fields you want display in your view. If you don't select anything, it will display all the custom order fields possible.
    This option can allow you to separate your fields form in separate steps by having it in different steps with different fields selected in each step.

Terms and Conditions options

  • Terms and Conditions : Select here the Joomla article that will become your Terms and Conditions.
    Note that you can add this view several times to your checkout with different Joomla articles if you want several checkboxes to be checked by the customer.
    Also, if you don't select any article, the checkbox will still appear but its label won't be clickable.
  • Terms & Conditions popup size : Define here the popup size which will display your Terms and Conditions Joomla article.
  • Label : Type here the message you want to display in order to invite your customer to validate your Terms and Conditions.

Text View

The text view will allow you to write some text to add legend to guide customers, or separate the different views, etc.
Plus, it's also possible to use html code, inline css,javascript code blocks, or even use tag to insert tags from other plugins (modules anywhere, content anywhere, and the likes...).

Login View

  • Show submit : If you deactivate that option the "Register" (for the registration form) or "Next" (for the guest form) button won't be displayed for that view

Generic View

For the other default types of views there is no specific option, and so views will be displayed like this :

This will be the same kind of display for these views :

  • Coupon
  • Status
  • HikaShop user points

Note: Plugins and other extensions can add their own views to the checkout workflow using our "Checkout API". So you might see more view types with possibly their own options.

How to move Views

In order to move a view in your workflow you have some arrow buttons that will appear when you hover the view, all around the border of your view.

For example, let's swap it with the previous view.

Or to move it to the next step.

Manage steps

Steps options :

  • Text Input : Here, you can see the default title that will be used (by default it's the title of the first view of the step), but you can type your own text in the input field.
    You can also enter a translation key in it so that you can have a different title in each language of your website.
  • Trash icon button : This button enables you to delete the step

    Note : All steps can be deleted except the last one, the "End" step. That step is not a real step of your checkout. That's the page the customer will see after clicking on the "Finish" button of your checkout, which in most cases will redirect him to the payment gateway automatically so that he can pay his order.

Concrete example

Let's see here some typical configuration with 2 concrete examples.

One page Checkout

Backend configuration :

First, let's consider that all the views are needed (except the second cart view), but we have to move them all to the first step

Now, we have to remove the second cart view, like shown on this screenshot :

Then, you can see that the step 2 is now empty, no need to delete it with the little trash icon, because when you will save your new configuration, the step 2 will be automatically removed and you will get this :

Frontend result :

As result and as expected you have now a one page checkout :

Several pages checkout

Backend configuration :
From this kind of configuration we will now move to a step by step checkout.

Move the Address view, to the next step :

Delete the Cart view in Step 2 thanks to the delete icon on the top right corner of the view.

Move Shipping and Address to Step 3.

Create a new view => Coupon

In the Step 3 : As you did for Coupon, create a Field view

Add, in the same way, Cart and Text views

Edit your Text view with this Html code :
<div style="color:red; font-weight:bold;">Please, don't forget to read our Terms and conditions</div>

Last but not least, do not forget to edit your step title in order to fit with your Checkout workflow.

Your checkout workflow is now like this, don't forget to save :

Frontend result :

As expected you have now checkout in several steps :

Note : Each step has its own title that will announces what will be displayed :