Presentation Reach the Checkout Workflow General Description View Details New View Address View Shipping View Payment View Cart View Fields View Terms and Conditions View Login View Text View Separator View Generic View How to move Manage steps Concrete examples One page checkout Several pages checkout Let's play with the separator system !

 

Presentation

With HikaShop 3.4.0 release, we added a new checkout workflow edition interface. We worked hard on this new feature in order to enable you to setup your checkout with more liberty. This tutorial will show you how all of this works and what's possible.

Reach the 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

  

General Description

Let's check the new interface structure graphically :

Essentials points about workflow parts

Let's add some precision in order to properly understand every workflow parts :
Here is a frontend view's representation of the previous color graphic.

Thanks to the progress bar you can see the different checkout steps, and in purple 2 views (here, Cart and Login).
So through 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, it will enable you to add a new view's block and define its type using the dropdown. After selecting the type, you'll just have to click on "Add view".

Login view

• Show submit button : Select "Yes" if you want to only display the submit button.
  Note : Depending on the layout of your different blocks that make up your workflow, this button may not always be necessary or can be redundant.
• Ask address on registration : Define if the address form will be asked while registration process.
• Show 'same address' checkbox : That option will enable you to choose if you want to display only the billing area or only the shipping area or both.
• Same address checkbox pre-checked : Select if you want display the 'Same address' option.
  this will allow your customer to enter only once his address and choose to use the same for his shipping or billing address.

Address view

• Read only : Select "Yes" if you want to 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 : That option will enable you to choose if you want to display only the billing area or only the shipping area or both.
• Same 'address' checkbox : Select if you want display the 'Same address' option.
  this will allow your customer to enter only once his address and choose to use the same for his shipping or billing address.
• Same address checkbox pre-checked : Define if you wan't pre-check the option the "same address" option in your checkout address form.
• Allow multiple addresses : Authorized or not your customer to have several addressses, and select if you want to grant this possibility to logged user only.

Shipping view

• 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 : Will enable you to display the title of the view or not, on top of it.
• Multiple group product display : Select "Yes" if you want to display the products thumbnail for each shipping group (when you have different vendors with different shipping methods, or warehouses).
• Selector type : Define how to display the shipping method selection (dropdown or list).
• Price with tax : Define how to display the shipping price with tax (Yes) or without tax (No) or both, with and without tax.
• Display errors : Choose if you want to allow error message to be display in your shipping method block.

Payment view

• 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 : Will enable you to display the title of the view or not, on top of it.
• Selector type : Define how to display the payment method selection (dropdown or list).
• Price with tax : Define how to display the payment price with tax (Yes) or without tax (No) or both, with and without tax.

Cart view

• 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 : Define how to display prices with tax (Yes) or without tax (No) or both, with and without tax.
  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.
• Show shipping price : Display the shipping method price or not.
• Show payment price : Display the payment method price or not.
• Show coupon price : Display the coupon price or not.

Fields view

• Read only : Click "Yes" if you only want to display the selected values in the custom order fields without the possibility for the user to modify them.
• Show title : Select if you want to display the title of the view or not, on top of it.
• Show submit button : Display or not the submit button to enable users to send custom fields value without 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 to 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 View

• 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.
• Checkbox pre-checked : Define if you wan't pre-check the "Terms and conditions" checkbox.

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...).

Separator view

• Type of separation : This option will enable you to define how the separator will work, Vertical or Horizontal. See the illustration :

First, have a look at this checkout workflow configuration :

The result is :

To discover a lot more about the separator abilities, see the Concrete Examples section.

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 :

Let's play with the separator system !

We will see here, several configuration not especially to invite you to follow them but in order to show your the real possibilities of the block separator system.

First try :

Here a classic checkout workflow configuration :

And the result on the frontend :

Let's now start to use separator on the step 2, to display side by side Shipping and Payment block :

Let's see the result on the frontend :

Understand the point with the Horizontal separator :

Let's imagine that, like the previous step you just want to display side by side payment and shipping method, but you have forget to use the Horizontal separator, let's see what this will leads :

Your checkout workflow is configured like this in one step.

On the frontend you get this :

And so, just add "by mistake", just 1 Vertical separator between the shipping and the payment block :

The result will be like this :

Why not, but we guess that the idea was more just to add 1 Horizontal separator like this :

In order to get this :

As you can imagine with these 2 separator blocks every configuration is possible ! The only restriction will be of course to keep readability.