Tutorial that shows how to create an order form

0

Tutorial that shows how to create an order form:

This tutorial shows, we are creating an order form in your shop that your customers can utilize to add numerous items to the cart at once.

Please keep this in mind that you will not be able to choose any variants/ options through the order form. In this tutorial the order form is always set to add the initial variant of a product.

product-table

  1. A new link list has to be created

The initial thing you require to do is create a link list that grasps the products that you require selling through the order form. On your admin, go to the Navigation page and a new link list needs to be created called “Order Form”.  To the products, add links that you desire to have listed on the forms.

In the table, the products that you have entered in the link list will be shown; we are going to create that in the next step.

order-form-link-list

  1. An alternate “page” template needs to be created

Click “add a new template”, in your template editor, under the templates section.  Choose “page,” and call it as “order-form”.

template-editor

From the gist copy the code and in the page.order-form.liquid paste it. Now hit on save. It is pretty bare-bones and there is a little of inline CSS so you will require to pretty it up a little more.

  1. For your order form, generate a new page

Go to pages & blogs and a new page has to be created. It can be titled whatever you wish. The significant part will be to tell the use of newly created page.order-form.liquid template. By selecting it under the “Templates” dropdown you do this, as shown below:

order-page

  1. Download and add the Javascript

Create a new snippet known as ‘order-form-script’ in your template editor. This script has to be copied and then needs to be pasted in the new snippet and then hit save. From the order table list, this script queues up every product from the order table link list and with the power of AJAX add them to the cart one-by-one.

Lastly, in “theme.liquid”, satisfy position the code underneath right before the closing </body> tag.

{% include ‘order-form-script’ %}

Share.

About Author

Leave A Reply