Недавно я постил разбор задачи по всплывающей форме подписки Contact Form 7 с передачей параметра через JavaScript, а сегодня будет еще одна практичная заметка. Она пригодится для создания WordPress-магазина с вариативными товарами WooCommerce, когда при заказе продукции допускается выбор определенных ее параметров (цвет, размер). Мы научимся “перехватывать” разные события для данного типа товаров (отображение на сайте, изменение параметра) и посмотрим, как “на лету” вносить изменения в единичную страницу продукта.
На самом деле сегодня будет не какой-то один конкретный кейс, я просто собрал для вас три полезных сниппета по теме. Кто-то может сказать, что достаточно было бы просто скинуть ссылку на них, но я решил проделать чуть более объемную работу — в статье дополню код некоторыми пояснениями и своими впечатлениями о результатах, т.к. я уже успел затестить их в деле.
Сегодняшние примеры я специально расположил отдельно от общих хаков для вариаций т.к. здесь идет акцент на срабатывание событий и использование jQuery библиотеки. Хотя прошлый пост также советую глянуть. Обязательно(!) дочитайте статью до конца, в 4-том пункте делюсь весьма полезным опытом по решению одной задачи.
1. Получение данных о вариации при переключении
Автор этого сниппета рассказал, что в одном из проектов ему нужно было выводить сообщения при выборе тех или иных параметров продукции на странице. В ходе изучения вопроса он обнаружил парочку jQuery-событий для плагина WooCommerce в файле add-to-cart-variation.js. Триггеры из этого файла позволяют перехватывать разные event’ы в магазине, например:
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
alert( variation.variation_id );
console.log( variation );
} );
$( document ).on( "found_variation.first", function ( e, v ) {
alert( v.variation_id );
console.log( v );
} ); |
Данные события и действия в них выполняются после появления/отображения страницы с вариативным товаром. По крайней мере первая часть кода точно этим занимался, а вот по второй, если честно, не совсем понял – то ли она срабатывать только при выборе значения «по умолчанию», то ли хз – нужно тестить и смотреть информацию в консоле.
Кстати, там же в консоли (в инструментах разработчика Chrome Devtools и др. браузеров) вы можете увидеть, что почти вся важная инфа по вариативному товару доступна в виде объекта (то есть с ней можно работать).
Еще одно событие, представленное ниже (woocommerce_variation_select_change), куда интереснее – оно выполняется при переключении вариаций:
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
alert( "Options changed" );
} ); |
В функцию вставляете любые действия, которые вам нужно выполнять.
2. Изменение заголовка товара в зависимости от вариации
Этот хак позволяет при смене атрибута цвета продукции в магазине добавлять соответствующее значение в заголовок на странице. Здесь используются jQuery, PHP и функции/переменные WooCommerce.
Вот как в итоге будет выглядеть результат сниппета:
- Не смотря на слова автора предыдущего хака о том, что jQuery передает всю инфу вариации в виде объекта, мне больше нравится считывание данных в этом случае – последовательное, с проверками (IF), похожее на код полноценного WP-плагина.
- С другой стороны представленный метод определения события (через setTimeout, blur) как-то не особо зашел, прошлый лучше.
- Важно! Параметр вариации считывается в строке $attributes = array(‘pa_color’), куда вы можете поставить абсолютно любое значение (pa_ здесь – просто приставка, атрибут = color).
3. Определяем текущую выделенную вариацию
Третий сниппет использует, в принципе, те же PHP/jQuery фишки, о которых говорилось выше, поэтому будет как бонус. Однако и здесь есть полезная информация – при выборе вариации WooCommerce создает скрытое поле с значением variation_id. Не знаю почему, но у меня на нескольких сайтах вот так (а должен быть ID):
Возможно он равен нулю, потому что я использую отображение вариативных значений в виде чекбоксов, а не выпадающего списка (Select), что идет по умолчанию. Хотя, даже не смотря на это, параметр variation_id, который также используется и в первых двух хаках выше, у меня нормально выводился через alert и не равнялся нулю.
В общем, как бы там ни было, третий сниппет выглядит так:
Его из всех трех я не тестировал, но по коду все выглядит вполне рабочим: вставка хука woocommerce_before_add_to_cart_quantity, проверка вариативного продукта $product, использование jQuery. Однако (!) как я уже сказал выше, у меня variation_id, почему-то всегда = 0, и в таком случае никакого события «change» для этой переменной может просто не произойти. Нужно разбираться.
4. Подмена скрипта add-to-cart-variation.js для вариаций
Во время работы над одним сайтом выяснил достаточно интересную закономерность в работе вариативных товаров, которая может вам пригодиться. Если вкратце по задаче – нужно было сделать наложение 2х картинок для товара, одна из которых считывалась из вариации, вторая – просто изображение.
Изначально в шаблоне единичного просмотра продукции я пытался подменить стандартный процесс генерирования превью с wc_get_gallery_image_html на свой, где и делал «склейку» двух фоток, однако при переключении параметров продукта (размер, цвет и т.п.) эта затея переставала работать.
Оказывается функция wc_get_gallery_image_html срабатывает только при первой «прорисовке» страницы, а дальше за все переключения картинок отвечают JS-скрипты, что находятся в assets/js/frontend/add-to-cart-variation.js. В него то вам и нужно вносить изменения, если хотите полностью управлять сменой картинок для вариаций.
В магазине этот файл подключается через функцию woocommerce_variable_add_to_cart(), и самое классное, что она является «pluggable», то есть вы можеет создать функцию с таким же именем functions.php, после чего она будет срабатывать вместо базовой. Копируете ее исходный код + заменяете вызов классического скрипта на свой.
Здесь ваш новый файл заливается в директорию с шаблоном по адресу путь_к_теме/js/my-add-to-cart-variation.js (работает с дочерними), а дальше в нем редактируете скрипты как угодно.
В моем случае, повторюсь, надо было работать с превьюшками продукции, поэтому я нашел и отредактировал функцию $.fn.wc_variations_image_update, которая как раз отвечает за “обновление” изображений.
Итого. Все сниппеты вручную добавляются в файл функций либо установите плагин Code Snippets. Изначально в работе я использовал второй метод для считывания значения вариаций и данных из базы, но совместил его с первым способом срабатывания jQuery-событий.
Однако, учитывая опыт и находки, изложенные в последнем четвертом пункте, есть вероятность, что вам даже не придется создавать какие-то дополнительные сниппеты для перехвата JS-событий, а достаточно будет покопаться в файле add-to-cart-variation.js. Как минимум, моя исходная подмена функции wc_get_gallery_image_html для генерирования превью, по сути, оказалась не нужной.
Вообще, если вы неплохо разбираетесь в JavaScript, то сегодняшний пост представит вам массу возможностей для редактирования страницы продукции и не только – сможете менять картинки, цены и др. Если есть что интересного дополнить, пишем в комментариях.