Skip to content

Basket / Order Custom Field Implementation Tutorial#

This tutorial will guide you through the process of creating a custom order field that can be set during the checkout process, such as adding a field for order notes. We will cover how to create the custom field, capture user input, and store it for later use in the order process.

Step-by-Step Implementation#

1. Create a Custom Order Field#

Start by creating a custom field that will be used to store the information, like order notes.

  • Navigate to the Custom Fields: In the Miva admin, go to Settings → Utilities. Then, look for the Custom Fields tab, which might be found under the “more options” menu (three dots).

  • Create a New Custom Field: Click the New Custom Field button and choose Order Field as the field type.

  • Set the Code to order_notes.

  • Set the Name to Order Notes.
  • Choose Text Area as the field type. This provides an easy-to-read area for entering longer text, such as customer notes.

2. Capture Data on the Checkout Page#

Next, you’ll add a form field to the checkout page in which you want users to input their order notes, in this example we will be adding it to the Shipping and Payments Selection page OSEL.

  • Add a Text Area in the Checkout Page: Navigate to the OSEL (shipping and selection) page.

  • Insert the Form Field: Add the following HTML within the <form>, to capture order notes:

<label for="order_notes">Add any order notes here:</label>
<textarea name="order_notes" id="order_notes"></textarea>

This field will allow the customer to type in any notes they want to attach to their order.

3. Transfer Data to Basket Custom Fields#

After capturing the order notes on the checkout page, the next step is to transfer this data to a custom basket field that persists through the checkout flow.

  • Add Logic to Transfer Notes: On the next page of the checkout process, in our example this is the Payment Information Page (OPAY), retrieve the data entered by the user and save it to a custom basket field.

  • Insert this code in the page template to store the order_notes value in a custom basket field with the same code as the order custom field:

<mvt:if expr="NOT ISNULL g.order_notes">
     <mvt:item name="customfields" param="Write_Basket( 'order_notes', g.order_notes )" />
</mvt:if>

This code checks if the order_notes variable exists and, if so, writes it to the custom basket field using the value passed from the order_notes field created earlier.

4. Automatically Transfer Basket Data to Order Records#

Miva handles the automatic conversion of custom basket fields to custom order fields. By ensuring that the field code (order_notes) is consistent across both basket and order fields, the data will be transferred seamlessly when the order is placed.

You do not need to perform additional actions to save this data into the order record once the order is submitted.

Summary of Key Steps:#

  • Create a custom order field (order_notes) with a Text Area input.
  • Add a form field to the checkout page to capture the customer’s order notes.
  • Use the Miva Write_Basket function to store this data in a custom basket field.
  • Miva will automatically transfer custom basket field data to the corresponding custom order field when the order is placed.

This implementation allows you to capture custom data during checkout and persist it through the entire order process, ensuring that the data is stored with the order for later use.