Quick order list

A quick order list shows every variant of a product as a row of a table, each with its own quantity. The buyer fills the rows they need, such as 10 of size S and 4 of size L, and adds them all to the cart in one click. Buyers who already know the SKUs can paste a list instead. It suits B2B stores and any product sold in many sizes or colors at once.

1. Add the table

Add a Custom element with the tag quick-order inside the product’s smootify-product, on the product page or in a product card. Outside a product, give it the custom attribute data-product-id with the product’s id. Without a product, it shows no row.

Keep it outside smootify-add-to-cart. The rows have quantities of their own and never change the product form’s quantity.

2. The row

Inside quick-order, add one smootify-variant: it is the row, and Smootify copies it once per variant. Inside it go:

• the variant’s values, with the usual variant attributes, such as variant="sku" and variant="title";
• quick-order="price": the price of one piece at the row’s quantity. With B2B volume pricing it changes with the quantity, and at 0 it shows the price of the row’s first quantity;
• a quantity-input, with its minus and plus buttons and a number input;
• quick-order="line-total": the price times the quantity.

The row also takes the variant’s state classes, such as a sold-out one, and is-active when it has a quantity. Conditions inside a row follow the row’s variant, not the product: condition="out-of-stock" shows a «Sold out» label only in the rows sold out, and the same goes for in-stock, on-sale and low-stock. Outside the rows, conditions follow the product as usual.

The quantity

Each row starts at 0. A row holds 0 or a quantity the store accepts: the purchase rules and the company’s B2B quantity rules, up to the stock.

• Plus from 0 jumps to the minimum, and minus below the minimum empties the row.
• A sold-out variant stays at 0.

3. Totals and the add button

Outside the rows, inside quick-order:

• quick-order="pieces": the quantities of all rows added up;
• quick-order="total": the line totals added up;
• quick-order="add" on a button: adds every row with a quantity to the cart in one addition, then empties the table. It is disabled while every row is at 0, and quick-order has the class is-empty;
• quick-order="error": the cart’s error after an addition, such as a quantity the cart refuses. It is hidden when there is none.

4. Or keep it in step with the cart

With the attribute data-sync on quick-order, the table follows the cart instead. Each row shows what the cart already holds of its variant. Every change goes to the cart right away, and a row set to 0 takes its line out. No add button is needed. data-sync="false" turns it off.

Only plain lines count: a line of the same variant with properties, add-ons or in a box stays apart and is not shown in the row.

5. Paste a list of SKUs

For buyers who order by code, add a Form Block inside quick-order with a Text area and a Form Button. The field’s Name does not matter: Smootify reads the first field filled.

The buyer writes one SKU per line, with the quantity after it:

TEE-S 4
TEE-M, 10
tee-l x 2
TEE-XL

• The quantity goes after a space, a tab, a comma or a semicolon, with or without an x. Without one, it is 1.
• Capital letters do not matter.
• The same SKU twice adds up.

The rows of those SKUs take the quantities, and the buyer adds them with the add button, or, with data-sync, they go straight to the cart.

SKUs the product does not have show in the form’s Error message: “SKU not found” followed by the SKUs, or your own text in the custom attribute data-error-not-found on quick-order. The list works for one product: SKUs of other products are not found.

Before you publish