Web Pattern Library > Personalization:

Placement toggles

2 options

Placement: Right Chest

Right Chest Left 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.

Configuration

Radio button inputs

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 set
• value 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 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: initials, name, or all
• 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

Description paragraph for multiple options

When 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>

Examples

When there's only one placement:

• the personalize_form_group-single class is applied to the personalize_form_group container
• when the customization must be included (cannot be removed from the item), assign the required checked attributes to the radio button input
• the description sits to the right

Single placement

Placement: Left Chest

Left Chest

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.

For toggles with multiple choices, use col-* classes to specify how many toggles (2-5). The description is moved below the toggles.

Multiple placements - 2 options

Placement: Right Chest

Right Chest Left 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.

Multiple placements - 3 options

Placement: Right Chest

Right Chest Left Chest Right Sleeve

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.

Multiple placements - 4 options

Placement: Right Chest

Right Chest Left Chest Right Sleeve Left Sleeve

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.

Multiple placements - 5 options

Placement: Back Yoke

Back Yoke Right Chest Left Chest Right Sleeve Left Sleeve

Back Yoke description goes here. This logo is approximately 1/2-inch tall and sits in the upper center of the chest pocket.