PageBuilder - Quick Order Component

Miva’s Quick Order functionality allows your website customers to quickly and efficiently add products, singularly or in bulk, to their shopping cart, expediting the buying process and making purchases easier.

On this Page

Quick Order Flex Component

With the release of version 10.08.02, the Miva admin now includes the Quick Order Flex Component, which can be added to your website pages via PageBuilder.

To add the component to a page, navigate to User Interface>Content Management and select the page you wish to work on. Once on the page, click the Add Component button and select the Quick Order component.

The component is customizable. On the left rail of the page, you can change the Component Name, the Heading Text and Alignment, and whether or not you will allow Bulk and CSV Imports. Each of the import options have customizable sections as well.

When the component appears the way you want, click Save.

Customer Experience

Your website customers will see the Quick Order component when they visit the page(s) you have added it to, and it looks exactly like you have configured it as explained above.

Search

A customer can enter a search term in the “Search for a product…” field. The search suggests items as the field is filled. For example, if a customer types “T-shi” and you have a T-shirt product, the website will display the product.

The customer would then click on the product, adjust their desired number of that product, and then click the Add to Cart button. If the product has attributes, for example in the case above, for sizes of the shirt, those attributes are selectable in the Quick Order box. The customer can also add additional products in the subsequent fields to their cart the same way as above.

The customer can also add additional rows for more products if the default five search fields isn’t enough.

Search Method

The Quick Order Flex Component has a flex-property, which can be found by navigating to Advanced>Display Settings>Search Method and it has options for “Runtime” & “Code” to control how products can be searched for and selected.

  • When set to “Search Method: Runtime,” as users type into the search field, it will load products based on the User Interface>Global Settings>Searchable Fields settings; just like if you were to search in the global header’s search field.
  • When set to “Search Method: Code,” as users type into the search field, it will only load a product when the search field input equals a product code.

Regardless of the Search Method setting, when performing the Bulk & CSV imports, the import will only load products where the imported code equals a product code in the store.

Bulk Import

If your customer clicks the Bulk Import link, they are able to submit a list of products, and their desired quantities, which will then be loaded into the Quick Order fields.

CSV Import

If your customer clicks the CSV Import link, they are able to upload a Comma-Separated Values, or CSV file, to the Quick Order section.

Bulk and CSV Import formats

The Bulk & CSV Imports are parsed according to this column specification:

  • The first column contains the product-code
  • The second column contains the quantity (if a quantity is not provided it will be set to 1)
  • The remaining columns are parsed in pairs to provide attribute & subscription values:

To provide attribute values, specify the attribute’s code in one column (ex. “color”), followed by the attribute’s value (“red”) in the next column.

  • To check a checkbox attribute, you must provide a value of either: true, yes, y, or 1.
  • To select a radio, select, or swatch-select attribute-option, you must provide the option-code as the attribute’s value.
    • To provide subscription values, specify “subscription_term_descrip” in one column, followed by the subscription-term description (ex. “Reorder annually”) in the next column.

      The attribute and subscription value-pairs can be repeated as needed to provide any number of product-attributes & subscriptions.

      The attribute and subscription value-pairs can be put into any order (i.e. a subscription-value pair can come before or after an attribute-value pair).

      The imports are parsed according to RFC 4180, with some of the main items to consider being:

      • Each record is located on a separate line, delimited by a line break.
      • Each field may or may not be enclosed in double quotes. If fields are not enclosed with double quotes, then double quotes may not appear inside the fields.
      • Fields containing line breaks, double quotes, and commas should be enclosed in double-quotes.
      • If double-quotes are used to enclose fields, then a double-quote appearing inside a field must be escaped by preceding it with another double quote

      Here is some example Bulk or CSV text, that shows some simple and complex import formats.

      simple-product, 1

      another-product, 10

      with-attributes, 1, size, small, color, green, terms, true

      with-subscription, 1, subscription_term_descrip, Reorder annually

      with-attributes-and-subscription, 1, color, green, subscription_term_descrip, Reorder annually

      with-escaping, 1, message, "The message, ""Hello World!"" is such a generic message"

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.