Не так давно, моя команда столкнулась с одной не тривиальной задачей (хотя на просторах интернета было много обсуждений на данную тему, и задача в принципе тривиальная, но есть в ней один небольшой изъян, который как раз был достаточно сложно реализуем). Суть в том, что нам требовалось распилить карточку товаров на составные части и произвести разделение формы выбора параметров вариативного товара на отдельно — кнопку, атрибуты, цену, и статус в наличии. Согласно ТЗ заказчика, карточка должна была получиться трехколоночной, левая часть — изображение, середина — (заголовок, описание, выбор атрибутов и дополнительная кнопка: «Переход в конструктор дизайна»), и наконец правая часть: это блок с ценой, наличием, блоком количества, и кнопкой добавить в корзину.
Основной вопрос по распилу можно было реализовать хуками от WooCommerce, что и было сделано, как именно это делать, можно найти информацию на просторах интернета, данная статья не об этом, а о том, как отделить форму параметров от кнопки. Вы можете сказать, что для кнопки «Добавить в корзину» есть хук, и все будет хорошо, НО это не так, данный вопрос можно было бы закрыть через хук, при условии, что товары будут простые, а не вариативные, как в нашем случае.
После некоторых манипуляций, а так же поиска решения на просторах сети, мне пришла в голову мысль о создании дублирующих элементов в правой части и взаимодействие по методу проксирования. Это означает, что в карточке товаров будет по 2 элемента: кнопка «Добавить в корзину», «Выбор количества», «Цена» и прочее, что требовалось перенести в правую часть, а поскольку я больше соотношу свои проф.навыки к операционному управлению, менеджменту и не много технаря, то пришлось искать варианты решения так же на просторах интернета, но его не было. Следовательно реализовали его своими силами по следующей схеме:
Установили модуль визуального редактора шаблона карточки товара «DHWCPage — WooCommerce Page Builder«, он выполняет те же самые функции, что и работа с хуками через function.php, но в визуальном представлении с ним работать проще и быстрее, т.к. время являлось первостепенным фактором. Далее мы создали шаблон вариативной карточки, см.скрин ниже:
Настроили визуальное представление и осталось дело за малым (точнее за многим), необходимо было создать элементы дублирующие функционал элементов карточки товара, и поместить их в правую секцию, настроить их взаимодействие и после скрыть материнские элементы из визуального отображения.
Первая была кнопка «Добавить в корзину».
Создаем элемент в редакторе «вставка HTML», в нем html элемент «Кнопка» — <button> и вешаем на него функцию jquery:
<script> function oneClick() { $('.click_add_cart_new').click() }; </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><button class="single_add_to_cart_button" onclick="oneClick()"><span class="addCartIcon">Добавить в корзину</span></button></p>И о чудо, при нажатии на кнопку, происходило нажатие на кнопку «Добавить в корзину». Наша новая кнопка имела привязку по классу материнского элемента на странице, конечно предварительно мы добавили свой класс ( .click_add_cart_new ) в файлах шаблонов WooCommerce (через код), т.к. изначально не получалось привязаться к материнскому классу.
Осталось дело за малым, скрыть из поле зрения материнский класс ( display: none ), и результат можно увидеть на скрине ниже:
И вроде все хорошо, но после решения задачи, пришла в голову другая мысль, а зачем создавать дубликаты элементов на странице и идти по пути создания еще больших проблем в дальнейшем, когда jquery позволяет производить перемещение элементов по DOM дереву с привязкой к конкретному ID или классу?
После некоторых поисков подобного функционала в основном на JS (уж очень не хотелось идти по пути jquery), все же было принято решение делать на jquery, т.к. JS упорно не желал заводиться и выполнять поставленные задачи, конечно с данным вопросом я буду разбираться позже, т.к. стало очень интересно из какого места у меня растут руки, в тот момент они были явно из ж…ы) Ну да ладно, т.к. решение было принято идем по данному пути.
Что потребовалось?
Создать в шаблоне карточки товара несколько HTML элементов, в которые разместить блоки DIV с объявленными классами или ID, что и было сделано, скрин ниже:
Далее дело техники, идем в браузер, открываем страницу, включаем режим разработчика (F12), и ищем классы элементов которые требуется вырезать с основной позиции и вставить в наш правый блок, и таких элементов оказалось 2:
- Выбор количества (класс div.quantity )
- Цена товара (класс .woocommerce-variation)
Собственно их то мы и будем использовать для перемещения, и код будет следующий:
document.addEventListener("DOMContentLoaded", function(){ $('.woocommerce-variation').appendTo('.woocommerce-quantity-copy'); $('div.quantity').appendTo('.woocommerce-quantity-copy'); });Данный код был объявлен глобально во всем проекте, т.к. в планах отображать отдельные товары на посадочных страницах данного проекта, следовательно данный код должен срабатывать везде.
Описание: берем блок с классом woocommerce-variation, перемещаем его в наш блок DIV с классом woocommerce-variation-price-copy, и берем блок div.quantity и так же перекидываем его в блок DIV с классом woocommerce-quantity-copy, как говорил мой дед, вот и вся любовь))!
При чем самое замечательное в том, что материнский элемент не надо срывать, т.к. идет не дублирование, а перемещение.
А вот и последний скрин готовой карточки товара:
Если интересно, то в карточку были добавлены 2 дополнительные кнопки: купить в 1 клик — это модуль BuyOneClick, и «Заказать со своим рисунком» — это просто кнопка с ссылкой на конструктор.