Quick orders

QuickOrder Component

Since version 2.11

You may want to allow your customers to directly order an item based on its SKU

The <QuickOrder /> component allows customers to add products to the cart by entering a SKU and a quantity. This component is self-contained and renders a compact form that has been designed to be integrated into different contexts.

Example with the component added to the default's theme minicart

Integrate QuickOrder into your project

You must include the component in your page with the following lines:

import React from "react";
+ import QuickOrder from "theme/modules/QuickOrder";

const MyComponent = () => {
  return <div>
+    <QuickOrder />
  </div>
}

You will also need to add the following line to your web/theme/modules/_modules.scss file:

+@import "~theme/modules/QuickOrder/QuickOrder";

Customize the QuickOrder texts

The placeholders and messages displayed by the QuickOrder component have translation keys prefixed with modules.QuickOrder. You can customize the text from your application translations files.

Edit on GitHub