Flows

Short flows for the manager and storefront. If you have not installed the package yet, start with quick start.

Flow	Scenario
A	Assign HEX to an option value
B	Pattern instead of solid color
C	Find unset in the dictionary and assign
D	Add a color to RAL
E	Select on the product page
F	Cart via byOptions
G	Catalog filter with mFilter
H	Catalog card grid
I	Variant colors in the catalog (ms3variants)

Flow A. Assign HEX to an option value

1. Open product → Product properties → value for color → save.
2. Tab Swatches → Assign on the target row.
3. Enter HEX or pick RAL → save.

An active record appears in the dictionary. Other products with the same option_key + value show the same swatch. On Product properties, assigned values get a color square in the chips:

Flow B. Pattern instead of solid color

1. In the dialog switch mode to Pattern.
2. Enter image URL in the pattern field.
3. Save.

When you switch to Pattern mode the form removes the previous RAL from the saved record. On the storefront the chunk renders background-image. Select uses data-pattern.

Flow C. Dictionary: find unset and assign

1. Components → ms3OptionsColor → Dictionary tab.
2. In the status filter choose Not set.
3. Open the row with the pencil → HEX / RAL / pattern → save.

Search by value:

Flow D. Add a color to RAL

1. RAL tab.
2. Add → code, name, HEX → save.
3. Search by code to verify the row in the table.

Flow E. Select on the product page

1. Confirm ms3optionscolor_frontend_css is enabled (or load CSS manually).
2. Include js/web/select.js.
3. Call chunk tplMs3OptionsColorSelect.

fenom

<script src="{'assets_url' | option}components/ms3optionscolor/js/web/select.js"></script>
{$_modx->getChunk('tplMs3OptionsColorSelect', [
  'product' => $_modx->resource.id,
  'option_key' => 'color',
  'caption' => 'Цвет',
  'native' => 1
])}

modx

<script src="[[++assets_url]]components/ms3optionscolor/js/web/select.js"></script>
[[$tplMs3OptionsColorSelect?
  &product=`[[*id]]`
  &option_key=`color`
  &caption=`Цвет`
  &native=`1`
]]

The value goes into options[color] with the miniShop3 form.

Flow F. Cart via byOptions

In the cart row chunk values already sit in $product.options. Do not read options from the database again:

fenom

{set $colors = $_modx->runSnippet('!ms3OptionsColor', [
  'product' => $product.id,
  'byOptions' => json_encode($product.options),
  'return' => 'data'
])}

modx

[[!ms3OptionsColor?
  &product=`[[+id]]`
  &byOptions=`{"color":["Синий","Чёрный"]}`
  &return=`data`
]]

Ready example chunk: tplMs3OptionsColorCart. Details: Frontend.

Flow G. Catalog filter with mFilter

In the filter set JSON:

{
  "color": {
    "type": "ms3oc",
    "source": "option",
    "field": "color",
    "label": "Цвет",
    "tpl": "tplMFilterMs3OptionsColor"
  }
}

The built-in colors type is unchanged. Use ms3oc for dictionary swatches. Details: mFilter.

Flow H. Catalog card grid

On listing rows call the snippet with product = row product ID:

fenom

{'!ms3OptionsColor' | snippet : [
  'product' => $id,
  'options' => 'color',
  'tpl' => 'tplMs3OptionsColor',
  'limit' => 6
]}

modx

[[!ms3OptionsColor?
  &product=`[[+id]]`
  &options=`color`
  &tpl=`tplMs3OptionsColor`
  &limit=`6`
]]

Flow I. Variant colors in the catalog

In msProducts set usePackages=ms3Variants. Catalog variants get colors from the dictionary. Details: ms3variants.