Attributes and values assigned to the placement toggle input
elements are used to build and update other personalization components, specifically:
name
must be assigned to and match every input in this radio setvalue
must 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 HTMLdata-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: initials
, name
, or all
checked
- assign to the selected option onlyIn 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 inputWhen there is more than one placement option, the description for each is stored in a custom attribute on the personalize-placement-description
element, 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-single
class is applied to the personalize_form_group
containerrequired checked
attributes to the radio button input
For toggles with multiple choices, use col-*
classes to specify how many toggles (2-5). The description is moved below the toggles.