Карусель товаров Woocommerce

от | Ноя 6, 2020 | Блог | Нет комментариев

В одном из проектов возникла необходимость поместить карусель товаров Woocomerce. Были поставлены следующие условия:

  1. Карусель должна выводиться по шорткоду
  2. Карусель должна содержать два условных вида товаров, которые задаются по их id. (например товары по акции и новинки)
  3. Переключение между видами товаров карусели

Поскольку мне не хотелось использовать стороннее решение (по совершенно разным причинам) было решено написать своё. Сразу скажу что в данном случае я использовал 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 заставить это работать. На этом подробно останавливаться не буду.

Исходные файлы проекта