46 lines
1.2 KiB
Plaintext
46 lines
1.2 KiB
Plaintext
{% comment %}
|
|
Renders a swatch input component.
|
|
Accepts:
|
|
- id: {String} unique input id
|
|
- name: {String} input name,
|
|
- value: {ProductOptionValueDrop} input value,
|
|
- product_form_id: {String} id of the form associted with the input
|
|
- checked: {Boolean} default checked status
|
|
- disabled: {Boolean} default disabled status
|
|
- shape: {String} swatch shape. Accepts 'square', defaults to circle.
|
|
- help_text: {String} additional content to render inside the label
|
|
|
|
Usage:
|
|
{% render 'swatch-input',
|
|
id: input_id,
|
|
name: input_name,
|
|
value: input_value,
|
|
product_form_id: product_form_id,
|
|
checked: checked,
|
|
disabled: disabled,
|
|
shape: 'square'
|
|
help_text: 'help text'
|
|
%}
|
|
{% endcomment %}
|
|
|
|
<input
|
|
type="radio"
|
|
id="{{ id }}"
|
|
name="{{ name }}"
|
|
value="{{ value }}"
|
|
form="{{ product_form_id }}"
|
|
class="swatch-input__input{% if disabled %} disabled{% endif %}"
|
|
{% if checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label
|
|
for="{{ id }}"
|
|
title="{{ value }}"
|
|
class="swatch-input__label{% if shape == 'square' %} swatch-input__label--square{% endif %}"
|
|
>
|
|
{% render 'swatch', swatch: value.swatch, shape: shape %}
|
|
<span class="visually-hidden">{{ value }}</span>
|
|
{{ help_text }}
|
|
</label>
|