В одном из проектов возникла необходимость поместить карусель товаров Woocomerce. Были поставлены следующие условия:
- Карусель должна выводиться по шорткоду
- Карусель должна содержать два условных вида товаров, которые задаются по их id. (например товары по акции и новинки)
- Переключение между видами товаров карусели
Поскольку мне не хотелось использовать стороннее решение (по совершенно разным причинам) было решено написать своё. Сразу скажу что в данном случае я использовал functions.php, хотя все это можно оформить и в отдельный плагин.
Создание шорткода с передачей атрибутов
Шорткод — констукция вида [название шорткода и параметры] которая позволяет вставлять некоторое содержимое в запись и страницу. Например в какой-либо странице или записи нам нужно добавить какую-то информацию из так называемой бэкенд (backend) части нашего сайта. То есть нам нужно взять некоторую информацию с помощью API WordPress, обработать ее каким то определенным способом по определенной логике, и вывести результат.
В случае карусели мы должны получить некоторое количество товаров с помощью id, обернуть нужную информацию о товаре в верстку и вывести это на экран. Id товаров будут передаваться при помощи стандартного механизма атрибутов.
Базово создание шорткода выглядит следующим образом
//[fl_carusel]
function fl_carusel_func( $atts )
{
// тут происходит все самое интересное
}
add_shortcode( 'fl_carusel', 'fl_carusel_func' );
В том месте где мы хотим выводить нашу карусель мы можем написать следующее
[fl_carusel stock_ids='479, 477, 38, 1177, 534,27' new_ids='38, 479, 1161,1121,1055']
Шорткод передает 2 атрибута, которые мы можем получить внутри функции в массиве $atts. В функции мы получим их примерно так:
$stock_ids = explode(',',$atts['stock_ids']); // Получаем id товаров в массив
$new_ids = explode(',',$atts['new_ids']); // Получаем id товаров в массив
Получение информации о товарах WooCoomerce
Для получения информации о товаре WooCoomerce существует функция, которая может получить информацию о товаре по id. Функция возвращает объект товара, в свойствах которого находятся необходимая информация о товаре.
wc_get_product( id )
В цикле мы перебираем товары id которых содержаться в $stock_ids и $new_ids и выводим необходимую информацию о товаре.
for ($i = 0;$i<count($stock_ids);$i++){
$product = wc_get_product( $stock_ids[$i] ); //Получаем объект товара
if ($product){
$result .= '<div class="fl_carusel_card_item fl_carusel_card_item_'.$i.'">';
$osnprice = $product->get_price(); // Основная цена
$product_name = $product->get_name(); // Имя товара
$sku = $product->get_sku(); // Артикул
$img = $product->get_image(); // Изображение
$url = get_permalink($stock_ids[$i]); // Ссылка на товар
$result .= $img;
$result .= '<h4 class="fl_product_name">'.$product_name.'</h4>';
$result .= ($sku) ? '<p class="fl_sku_str"> <span class="fl_sku_lable">Артикул:</span> <span class="fl_sku_value">'.$sku.'</span></p>': '<p class="fl_sku_str"> <span class="fl_sku_lable">Артикул не указан</span></p>';
$result .= '<p class="fl_osnprice_str"><span class="fl_osnprice_value">'.$osnprice.'</span> <span class="fl_osnprice_currency_symbol">'.get_woocommerce_currency_symbol().'</span></p>';
$result .= '<p><a href="'.$url.'" class="fl_button">Купить</a></p>';
$result .= '</div>';
}
}
Проворачиваем такой цикл и для $new_ids. В переменной $result мы накапливаем html строку для передачи ее бразеру.
Оборачиваем результат в верстку
Когда мы получили необходимую информацию о товарах нам нужно обернуть все в верстку, и с помощью JQuery заставить это работать. На этом подробно останавливаться не буду.