Shopify Варианты
Хотите знать, есть ли способ назначить варианты для пользовательских радиовходов? Я хотел бы настроить многоуровневую доставку с разными тарифами на 2 дня, 3 дня и стандартную доставку. Я могу сделать это с вариантами, но раскрывающийся список не будет работать для меня. Я хотел бы иметь информацию о дате и указатель даты, чтобы выбрать предпочтительные даты доставки и чтобы все они отображались в модальном режиме с остальными вариантами доставки., Свойства позиции не будут работать, потому что, насколько я знаю, они не могут повлиять на цену. Так что я подумал: если бы я создал разные варианты для разных скоростей доставки, могу ли я направить их на свои собственные радиокнопки? Я приложил скриншот того, что у меня есть. Три кнопки справа - это то, что я хотел бы использовать, а не встроенный выпадающий список Shopify. Заранее спасибо за помощь.
3 ответа
Я бы посоветовал проверить это обсуждение на вики Shopify: смешивание выпадающих и переключателей на странице продукта
user8399 разместила этот ответ:
Это сложный вопрос, потому что вам нужно использовать option_selection.js для "дескремблирования" вариантов в опции, а option_selection.js генерирует выпадающие списки, по одному для каждой опции. Лично я бы сохранил это.
Вы можете добавить радиокнопки для своих цветов - сохраняя раскрывающийся список "Цвет" на странице и скрывая его с помощью CSS, - а затем обновлять выбранную опцию в раскрывающемся меню, когда установлен радиокнопка.
В следующем примере элементы привязки используются вместо переключателей, но метод тот же: http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify
Самая последняя версия этого учебника по цветным образцам доступна на вики Shopify здесь, и я использовал его раньше с успехом (хотя только с кодом по умолчанию, а не с переключателями).
Если это не работает для вас, я думаю, что вы смотрите на гораздо более сложную вещь для реализации... Посмотрите эти другие обсуждения об использовании переключателей для вариантов, которые я нашел в вики Shopify:
- Радио кнопки для вариантов продукта?
- Изменить на радио кнопки
- Используйте переключатель вместо выпадающего списка для Multi-Select
- варианты продукта в виде переключателей javascript
РЕДАКТИРОВАТЬ:
В комментариях ниже:
... все еще не уверен, смогу ли я назначить кнопки заголовкам пользовательских вариантов, используя элементы javascript.
Я поэкспериментировал с этой идеей, и я не уверен, что это именно то, что вам нужно, но это может дать вам некоторые идеи о том, с чего начать.
Мои варианты:
- Стандартная Доставка
- 3 дня экспресс-доставки. Дополнительные 15 $
- 2 дня экспресс-доставки. Дополнительные $25
Я добавил диапазон под вариантами в product.liquid, где я отображаю предполагаемую дату доставки, и некоторый jQuery, который обновляет текст предполагаемой даты доставки в промежутке в зависимости от даты доставки, выбранной в средстве выбора даты.
В этом обсуждении я использовал код от Кэролайн Шнапп, чтобы создать переключатели для вариантов (так же, как и вы). Я немного изменил код, добавив свойство Line Item в скрытое поле ввода непосредственно перед концом формы:
<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" />
И добавил 2 строки в конец этой функции jQuery, чтобы обновить свойство скрытой позиции при щелчке переключателя:
jQuery("input[type='radio']").click(function() {
var variant_price = jQuery(this).attr("data-price");
jQuery(".price-field span").html(variant_price);
var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
jQuery(".price-field del").html(variant_compare_at_price);
var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
jQuery("#delivery-date").val(delivery_date);
});
Затем, когда пользователь нажимает кнопку "Купить", чтобы добавить товар в корзину, он показывает вариант и свойство позиции примерно так:
Не уверен, что это именно то, что вам нужно, но, надеюсь, что-то из этого поможет!
РЕДАКТИРОВАТЬ 2:
Также обратите внимание, что нет причин использовать код option_selector.js. Shopify передает всю информацию о продукте, включая опции и варианты, как JSON. Вы можете создавать любую структуру данных по своему усмотрению, назначать любые события, которые вы хотите, и обычно выполнять кодирование на стороне клиента по мере необходимости. Без использования этого кода. Это всего лишь предложение о том, как можно делать вещи с Shopify. Он получает широкое распространение, но это еще не все, будь всем.
Недавно мы добавили возможность получать варианты вариантов и значения в Liquid, чтобы вам не приходилось рендерить радио или выбирать элементы с помощью JS. Ознакомьтесь с обновленными документами по адресу https://help.shopify.com/themes/liquid/objects/product.