Attributes and values assigned to the placement toggle
input elements are used to build and update other personalization components, specifically:
namemust be assigned to and match every input in this radio set
valuemust be unique to each placement. The value is used to reference the correct placement description (see below).
data-value-label- text value that is displayed as HTML
data-preview-size- the size of the preview (populated) hotspot link for this customization. It represents a percentage width of the overall product preview image, and may need to be adjusted to accurately reflect how the actual customization will appear on the product.
data-coords-left- left coordinate of the hotspot over the preview image (%)
data-coords-top- top coordinate of the hotspot over the preview image (%)
data-allowed- for monogram customizations only; determines which type of monogram field to display for this placement. Values:
checked- assign to the selected option only
In addition, the following are assigned when there is only a single placement for the customization:
readonly- is This ensures that it cannot be deselected.
class="a11y-only"- hides the single placement input
When there is more than one placement option, the description for each is stored in a custom attribute on the
data-personalize-placement-[ input value ]:
<p class="personalize_form_subhed personalize_form_subhed-placement personalize-placement-description" data-personalize-placement-rightchest="This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest." data-personalize-placement-leftchest="This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the left center of the chest.">This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.</p>
When there's only one placement:
personalize_form_group-singleclass is applied to the
required checkedattributes to the radio button
For toggles with multiple choices, use
col-* classes to specify how many toggles (2-5). The description is moved below the toggles.