{"draftJsState":{"blocks":[{"data":{"image":{"id":"5fa615668eb5b23a30d8c65f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карусель товаров для Woocommecre","type":"atomic:image","key":"633g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В одном из проектов возникла необходимость поместить карусель товаров Woocomerce. Были поставлены следующие условия:","type":"unstyled","key":"foh4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карусель должна выводиться по шорткоду","type":"unordered-list-item","key":"jp02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карусель должна содержать два условных вида товаров, которые задаются по их id. (например товары по акции и новинки)","type":"unordered-list-item","key":"8u3b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переключение между видами товаров карусели","type":"unordered-list-item","key":"dhobm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку мне не хотелось использовать стороннее решение (по совершенно разным причинам) было решено написать своё. Сразу скажу что в данном случае я использовал functions.php, хотя все это можно оформить и в отдельный плагин.","type":"unstyled","key":"617a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание шорткода с передачей атрибутов","type":"header-two","key":"hgul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"},{"length":7,"offset":0,"style":"BOLD"}],"text":"Шорткод — констукция вида [название шорткода и параметры] которая позволяет вставлять некоторое содержимое в запись и страницу. Например в какой-либо странице или записи нам нужно добавить какую-то информацию из так называемой бэкенд (backend) части нашего сайта. То есть нам нужно взять некоторую информацию с помощью API WordPress, обработать ее каким то определенным способом по определенной логике, и вывести результат.","type":"unstyled","key":"c8psj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В случае карусели мы должны получить некоторое количество товаров с помощью id, обернуть нужную информацию о товаре в верстку и вывести это на экран. Id товаров будут передаваться при помощи стандартного механизма атрибутов.","type":"unstyled","key":"66cq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базово создание шорткода выглядит следующим образом","type":"unstyled","key":"eq28k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//[fl_carusel]\nfunction fl_carusel_func( $atts )\n{\n // тут происходит все самое интересное\n } \nadd_shortcode( 'fl_carusel', 'fl_carusel_func' );","type":"unstyled","key":"1hpbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В том месте где мы хотим выводить нашу карусель мы можем написать следующее","type":"unstyled","key":"7aa8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[fl_carusel stock_ids='479, 477, 38, 1177, 534,27' new_ids='38, 479, 1161,1121,1055']","type":"unstyled","key":"7h312"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шорткод передает 2 атрибута, которые мы можем получить внутри функции в массиве $atts. В функции мы получим их примерно так:","type":"unstyled","key":"70grm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$stock_ids = explode(',',$atts['stock_ids']); // Получаем id товаров в массив\n$new_ids = explode(',',$atts['new_ids']); // Получаем id товаров в массив","type":"unstyled","key":"9og35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение информации о товарах WooCoomerce","type":"header-two","key":"8aof6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для получения информации о товаре WooCoomerce существует функция, которая может получить информацию о товаре по id. Функция возвращает объект товара, в свойствах которого находятся необходимая информация о товаре.","type":"unstyled","key":"cm5in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"wc_get_product( id )","type":"unstyled","key":"1mbuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В цикле мы перебираем товары id которых содержаться в $stock_ids и $new_ids и выводим необходимую информацию о товаре.","type":"unstyled","key":"5354f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for ($i = 0;$i';\n $osnprice = $product->get_price(); // Основная цена\n $product_name = $product->get_name(); // Имя товара\n $sku = $product->get_sku(); // Артикул\n $img = $product->get_image(); // Изображение\n $url = get_permalink($stock_ids[$i]); // Ссылка на товар\n $result .= $img;\n $result .= '

'.$product_name.'

';\n $result .= ($sku) ? '

Артикул: '.$sku.'

': '

Артикул не указан

';\n $result .= '

'.$osnprice.' '.get_woocommerce_currency_symbol().'

';\n $result .= '

Купить

';\n $result .= '';\n }\n \n}","type":"unstyled","key":"aq0lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проворачиваем такой цикл и для $new_ids. В переменной $result мы накапливаем html строку для передачи ее бразеру.","type":"unstyled","key":"67j2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оборачиваем результат в верстку","type":"header-two","key":"el35g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда мы получили необходимую информацию о товарах нам нужно обернуть все в верстку, и с помощью JQuery заставить это работать. На этом подробно останавливаться не буду.","type":"unstyled","key":"cjvd8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":23,"offset":0}],"inlineStyleRanges":[],"text":"Ссылка на файлы проекта","type":"unstyled","key":"1rhc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"amvs6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8bv70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"UrEuvOFq21n4lUVQyC3T"}],"entityMap":{"0":{"data":{"url":"https://yadi.sk/d/c2mapZkNbOUfIw"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}