Skip to content
ms3Variants
ms3Variants
Product variants component for MiniShop3
  • MODX 3
  • PHP 8.2
  • miniShop3
  • Vue 3
  1. Extras
  2. ms3Variants

ms3Variants ​

Product variants for MiniShop3: one product has several variants with different options (color, size, etc.), each with its own price and old price, stock, SKU, weight and an image from the product gallery.

Features ​

Variants:

  • the number of variants is unlimited;
  • variant options are any keys of standard MiniShop3 options.

Cart and order:

  • the cart gets the variant price;
  • with stock control on, you cannot add more than is in stock — settings;
  • stock is deducted in the configured order status — settings;
  • variant option values are added to the product's standard MiniShop3 options, and color, size, tags also to the product fields of the same name. This happens when a variant is saved; when a variant is changed or deleted, old values are not removed from the product.

Frontend:

  • a variant list on the product page that changes the price, SKU and image — Product page;
  • variants in catalog cards via msProducts — Product catalog;
  • JavaScript events for your own galleries and handlers, ready adapters for Splide and GLightbox.

Manager:

System requirements ​

RequirementVersion
MODX Revolution3.0.3+
PHP8.2+
MiniShop31.4.0+
pdoTools3.0.0+ — the msProductVariants snippet does not work without it
VueToolsany version, needed for the "Variants" tab in the manager

PHP 8.2

The package installer lets PHP 8.1 through, but the component libraries require PHP 8.2. Do not install ms3Variants on PHP 8.1.

Installation ​

  1. Go to Extras → Installer.
  2. Find ms3Variants, download and install it.

The package creates:

  • the variant tables;
  • the msProductVariants snippet;
  • the ms3_variants, ms3_variants_row, ms3_products_row_variants chunks;
  • the ms3Variants plugin — enabled right away, works with MiniShop3 cart, order, catalog and manager events;
  • system settings.

A product page template example and a Splide gallery chunk are not created on installation: they are files in core/components/ms3variants/elements/.

Quick start ​

1. Create variants ​

Open a saved product, go to the Variants tab, click Create Variant, add options, set the price and stock, save. Details — Variants tab on product.

2. Output variants on the product page ​

fenom
{'!msProductVariants' | snippet}

The call must be uncached — see Snippets for why. The variant list shows each variant's price by itself. For the price and SKU in the page template to change when a variant is selected, add the data-ms3v-* attributes to them — Product page.

3. Output variants in the catalog ​

fenom
{'msProducts' | snippet : [
    'parents' => 0,
    'usePackages' => 'ms3Variants',
    'tpl' => 'ms3_products_row_variants'
]}

The catalog always adds the first variant to the cart until the MiniShop3 ProductCardUI.js module is replaced with the ms3Variants module (the replacement is visible in the ms3_frontend_assets system setting). How to replace it and what to do before removing the package — Product catalog.

Data structure ​

Table ms3_product_variants ​

FieldTypeDescription
idintVariant ID
product_idintProduct ID
skuvarchar(100)Variant SKU
pricedecimal(12,2)Price
old_pricedecimal(12,2)Old price
countintStock
weightdecimal(10,3)Weight in MiniShop3 units
file_idintImage ID from the product gallery
activetinyintActive: 1 — yes, 0 — no
positionintSort position
created_at, updated_atdatetimeCreation and update dates

Table ms3_variant_options ​

FieldTypeDescription
idintRecord ID
variant_idintVariant ID. The variant_id + option_key pair is unique; options are deleted together with the variant
option_keyvarchar(100)Option key (color, size…)
option_valuevarchar(255)Option value