Shopify BuyButton.js: добавление опции заполнителя в раскрывающемся списке выбора
Я заменяю шаблоны опций следующим образом:
const optionTemplates = {
option:
`<div class="{{data.classes.option.option}}" data-element="option.option">
<label for="{{data.selectId}}" class="{{data.classes.option.label}} {{#data.onlyOption}}{{data.classes.option.hiddenLabel}}{{/data.onlyOption}}" data-element="option.label">{{data.name}}</label>
<div class="{{data.classes.option.wrapper}}" data-element="option.wrapper">
<select id="{{data.selectId}}" class="{{data.classes.option.select}}" name="{{data.name}}" data-element="option.select">
<option disabled selected>Select {{data.name}}</option>
{{#data.values}}
<option value="{{name}}">{{name}}</option>
{{/data.values}}
</select>
<svg class="{{data.classes.option.selectIcon}}" data-element="option.selectIcon" viewBox="0 0 24 24"><path d="M21 5.176l-9.086 9.353L3 5.176.686 7.647 12 19.382 23.314 7.647 21 5.176z"></path></svg>
</div>
</div>`,
};
Я просто скопировал шаблон по умолчанию и добавил эти 2 настройки:
- Добавлена опция заполнителя
<option disabled selected>Select a {{data.name}}</option>
- Удаленный
{{#selected}}selected{{/selected}}
по умолчанию<option>
потому что по умолчанию я хочу, чтобы была выбрана и отображена опция заполнителя
Все в порядке, за исключением того, что после того, как я выбрал вариант в раскрывающемся списке, он не отображается как выбранный, но остается заполнителем (обратите внимание, что «за визуализацией» он правильно принимает выбранный вариант, потому что цена изменяется соответственно)
Есть идеи (или обходной путь), как это решить?