Storefront Interface Changes
Once you've configured POSM and identified which products' options are to be stock-managed, there are some interface changes on your store's customer-facing view.
If you configure your products to use dependent attributes, then the attribute selections are enabled (in ascending sort-order) once their predecessor value(s) have been chosen. The example below shows the display once the Model attribute was chosen — the Memory attribute dropdown was disabled until the Color was selected.
The final attribute for the product (the Memory for this example) shows the options' stock status for each selection. The example shows both in- and out-of-stock messages for the various option combinations. If you've set Dependent Attributes: Show In-Stock Quantity in Status? to true, then each option-combination's in-stock quantity displays as part of the "In Stock" status.
Note: Starting with POSM v1.5.5, if an option-combination is not configured, those choices will not be displayed to the customer. In the example shown, if there was no option-combination for Color: Blue and Memory: 4mb, the Memory: 4mb selection is not displayed if the customer chooses Color: Blue.
Starting with POSM v4.2.0, there are additional CSS selectors that you configure to identify significant elements within your template's rendering of a product's attributes-block, each within the Options' Stock Manager's admin configuration:
-
Dependent Attributes: Outer Selector. This selector identifies an outer, wrapping element that encompasses all elements of an individual option. For
zc156(and previous)-era templates and the Bootstrap template, this is set to an empty string; for thezc157andzc158built-in templates, this should be set to.attribBlock. -
Dependent Attributes: Inner Selector. This selector identifies an inner element that contains, at a minimum, an option's name element. Its value defaults to
.wrapperAttribsOptions.- All
select(drop-down) type inputs must reside in this block. - Radio-button inputs must reside either in this block or, if an attribute includes associated images, in the block identified by the Attributes' Images' Selector.
- All
-
Dependent Attributes: Option Name Selector. This selector identifies the
in-lineelement that contains an option's name, defaulting to.optionName. POSM's dependent-attributes' jQuery handling uses this selector to locate the option's name to let the customer know if they've not made a selection. - Dependent Attributes: Attributes' Images' Selector. This selector identifies the wrapping element that encompasses each option-specific attribute image block, which might also contain option-specific radio-button inputs.
POSM's dependent-attributes' jQuery handling makes use of the configured selectors to locate various option-specific elements in the HTML generated by your template. If you've configured the Outer Selector as either an empty string or as a value equal to the Inner Selector, the jQuery script adds a .posm-wrapper class around each Inner Selector and any subsequent Attributes' Images' Selector blocks.
| Zen Cart 1.5.6 (and previous) Layout | Zen Cart 1.5.7/1.5.8 Layout |
|---|---|
 |
 |
When a customer adds an options-stock-managed product to their cart, the option-combination's in-stock (if Show In-Stock Status is set to true) or out-of-stock status message accompanies the product's display on the shopping-cart, checkout-confirmation and account-history-info pages. The stock-related message also accompanies each product's line item within the order's confirmation email.
Notes:
- The In Stock label is included only if you've set the Stock Status Display: Include In-Stock Status? value to true.
- Starting with POSM v1.6.1, the labels (either in-stock or out-of-stock) are included only if you've set Stock Status Display: Show Messages? to either Store Only or Both.
