2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed

smootify-magic-box

Build-a-box: the add-to-cart forms inside it add to the box instead of the cart. 2.0: its pieces stay through a reload or another page until the box goes to the cart (a week at most); the card (smootify-product) of a picked product takes is-in-box and data-in-box (how many of it); the total takes the box's discount only once the box can be bought.

v2.0 betaAdd-on: Magic Box
Open .md
On this page
  1. At a glance
  2. Where it can go
  3. What it requires
  4. Attributes on the element
  5. Attributes inside it

At a glance

data-min="6" data-max="6"

A fixed size

Can be bought
With exactly 6 products.
data-min="6" data-max="12" data-step="6"

Sizes you choose

Can be bought
With 6 or 12 products, nothing in between.
data-max="10"

A free mix with a limit

Can be bought
From 1 to 10 products: data-min is 1 unless you set it.
data-min="10" data-max="25" data-step="15"

Sizes that do not share the step

Can be bought
With 15 products only: 10 and 25 are not multiples of 15.
Instead
A box of 10 or 20 needs data-step="10".
data-unique-per-category="true"

One product per category

A second pick
In the same category, it shows an error in the Error message of the product's form.
data-auto-remove-category="true"

A new pick replaces the old one

Works
Only with one product per category on.
A second pick
Takes the place of the first in its category, with no error. For a configurator.
data-all-categories="true"

Every category filled

Can be bought
Only when every category has a product.
Until then
The add button stays disabled.

More in the guide.

Where it can go

  • Anywhere on the page.
  • Must contain smootify-magic-box-cart.
  • Out of place, Smootify removes it from the page: also when the data-handle metaobject does not exist.

What it requires

  • The Magic Box extension (the extension activated in the Smootify dashboard, on every plan). Without it, the element does nothing.

Attributes on the element

  • It reads data-handle, data-title, data-image, data-min, data-max, data-step, data-unique, data-unique-per-category, data-all-categories, data-auto-remove-category, data-only-one, data-only-one-per-category, data-full-error, data-too-many-error.

Attributes inside it

GroupAttribute nameValues
Magic box category (condition)box-condition2

    ↑ ↓ to moveEnter to openEsc to close