Проблема, с которой вы сталкиваетесь, заключается в том, что {{ section.id }} является переменной шаблона.В отображаемом HTML эта часть заменяется соответствующей переменной.Как только ваш javascript запустится, на странице не будет элемента с двойными фигурными скобками ни в одном из его атрибутов.
Существует несколько способов обойти это:
Идея 1. Сохранение идентификатора раздела где-нибудь
. Для этого вам понадобится место, где вы можете связать идентификаторы разделов с разделами, загруженными на страницу, привязав этот фрагмент данных к чему-то, чтоваш фрагмент уже знает о том, когда он выполняется.
Если, скажем, ваш фрагмент знает дескриптор продукта любого изменяемого продукта, вы можете добавить что-то подобное в форму:
<script>
// If our lookup object already exists, do nothing. Otherwise, initialize it as an empty object
window.section_lookup = window.section_lookup || {};
//Now save the section ID using the product's handle
//Using the json filter when we print Liquid variables to Javascript ensures that the resulting value is always Javascript-legal.
section_lookup[{{ product.handle | json}}] = {{ section.id | json }};
</script>
Теперь, в вашем коде поиска, вы можете использовать:
// Assuming that you have a variable called product_handle already
var productSelect = "ProductSelect-" + section_lookup[product_handle];
, который даст вам конкретный идентификатор, который вы ищете.
Идея 2: Используйте силу form object
Работает ли ваш фрагмент кода в каком-то контексте, где вы что-то знаете о любом из элементов, которые содержат элемент select, который вы хотите?Например, вы уже знаете форму или оболочку области продукта?
Если у вас есть form, который содержит ваше поле выбора, вы золотой.Каждая форма знает имена всех полей формы, содержащихся в ней.Поскольку имя поля равно id, добраться до нужного поля выбора из объекта формы так же просто, как:
// Assuming you have a variable named form representing the correct form, access the form field with the name 'id'
var idField = form['id'];
ПРИМЕЧАНИЕ: Если ваша форма выбрана jQuery, вывероятно, у не будет такой способности.К счастью, если вы застряли с jQuery-обернутым объектом, вы можете легко развернуть его следующим образом:
// Assuming somebody gave you a variable named $form that they jQuery-selected....
var form = $form[0];
var idField = form['id'];
Если у вас нет формы, но у вас есть быстрый доступ к любому другому входувнутри формы вам также повезло - каждый элемент формы (то есть: входы, выборки, текстовые области, наборы полей ...) также знает, к какой форме он принадлежит.
// Assuming that there is a variable named target which is a form element contained in the same form as the ID field that we want:
var form = target.form;
var idField = form['id'];
Идея 3. Использование какого-либо другого элемента обтекания для ограничения поиска
Если вам что-то известно о каком-либо элементе обтекания, который содержит поле выбора, которое вы хотите, и не включает элемент выбораВ поле, которое вам не нужно, вы можете ограничить ваш селектор запросов только тем, чтобы заглядывать внутрь оболочки.Таким образом, вы найдете только тот элемент, который вам нужен.
Если вы используете простой старый "ванильный" Javascript:
//Assuming we have a variable named product_wrapper
var idField = product_wrapper.querySelector('[name="id"]');
Или если вы предпочитаете jQuery:
//Still assuming that we have a variable named product_wrapper
var idField = jQuery('[name="id"]', product_wrapper);
Надеюсь, вы сможете добиться успеха хотя бы одним из этих методов.Удачи!