/ Сайтостроение / Плагины / Избранное

Избранное

18.06.2016

636

Реализуем функционал Избранное. Нам надо сделать кнопку добавить в Избранное в шаблоне самой записи и в цикле вывода записей категории. И отдельная страница Избранное где выводятся избранные записи.

Плагин Favorites

По данному функционалу, пожалуй лучший плагин! Не сложные настройки. Отключил функцию счетчика избранных записей (здесь она не уместна, тем более если вы используете счетчик просмотра записей).

Можно отключить вставку кнопок по-умолчанию и вставить их кодом самому в шаблоны
$post_id — берется по-умолчанию (внутри цикла)
$site_id — берутся основной сайт (если сайт единственный), делаем переменную ID (если мультисайт)

<?php the_favorites_button ( $post_id, $site_id ); ?>

Создаем страницу (называем ее как хотим, например Favorites) и вставляем в нее шорткоды (если отображаются двойные квадратные скобки — убрать)

[[user_favorites]][[/user_favorites]]
[[clear_favorites_button site_id="" text=""]]

В этой странице будут отображаться список избранных записей.

Если на сайте установлен плагин WP Super Cache, то в его настройках надо исключить из кэширования страницу с выводом Избранного

Подумать как можно оформить список записей (добавить миниатюру), разделять записи по категориям и самое главное: поделится списком (по почте и в соц. сетях)

Отправку избранного можно реализовать дополнением к плагину Contact Form 7 — Dynamic Text Extension. Выводим форму на странице Favorites c динамическим полем (скрытым), внутри поля — шорткод с выводим избранных записей (единственный недостаток список будет приходить с экранированными тегами html).

Избранные товары

Подключим функционал плагина Favorites к интернет-магазину Woocommerce. В настройках Display & Post Types выберем тип записей — товары.

Настраиваем внешний вид кнопки Избранное, там же в настройках Display & Post Types. Если выбрать Custom Markup, то мы сами прописываем в полях необходимое содержание кнопок. Я предпочитаю:

<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>

Стили кнопки:

.simplefavorite-button {position: absolute; z-index: 9; right: 25px; top: 25px;}

.simplefavorite-button .fa {margin-right: 0; font-size: 20px; color: #ff5724;}

Добавляем кнопку Избранное у товаров, в категории и в карточке:

function woocommerce_favorite_product(  ) { 
the_favorites_button ();
};

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_favorite_product', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_favorite_product', 5 );

Подобные функции лучше оборачивать в проверку

if(function_exists('the_favorites_button')){ the_favorites_button(); }

Если этого не сделать, то без плагина в шаблоне будет происходить ошибка.

Общее количество избранных товаров

Добавляем в шапку (либо в другое место на сайте) количество избранного товара:

<div id="site-favorit"><a href="/favorite/" title="Перейти в избранное"><i class="fa fa-heart" aria-hidden="true"><div id="total-fav"><?php the_user_favorites_count(); ?></div></i></a></div>

Стили для отображения общего количества

#site-favorit .fa {font-size: 28px; position: relative; color: #93e100;}

#total-fav {
    position: absolute;
    top: 5px;
    right: -10px;
    background: #ff5723;
    color: #fff;
    font-weight: bold;
    width: 17px;
    line-height: 17px;
    font-size: 11px;
    text-align: center;
    border-radius: 15px;
}

Прописываем функции и создаем скрипт favorite.js для ajax-обновления количества

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {

	wp_enqueue_script( 'favorite', get_template_directory_uri() . '/js/favorite.js', array('jquery'), '1.0', true );

	wp_localize_script( 'favorite', 'totalfav', array(
		'ajax_url' => admin_url( 'admin-ajax.php' ),
	));

}


add_action( 'wp_ajax_nopriv_refresh_total_favorite', 'refresh_total_favorite' );
add_action( 'wp_ajax_refresh_total_favorite', 'refresh_total_favorite' );

function refresh_total_favorite() {
	
	the_user_favorites_count();
	
	die();
}

Скрипт favorite.js

jQuery( document ).on( 'click', '.simplefavorite-button', function() {
	
	setTimeout(function () { 
	jQuery.ajax({
		url : totalfav.ajax_url,
		type : 'post',
		data : {
			action : 'refresh_total_favorite',
		},
		success : function( response ) {
			jQuery('#total-fav').html( response ); 
		}
	});
	}, 500);
})

Изначально решение работало некорректно (количество отличалось на одну единицу), пока не добавил в скрипт setTimeout. В браузере Firefox наблюдаются сбои в работе данного скрипта.

Страница избранных товаров

Создаем страницу Избранное с постоянной ссылкой favorite (во-первых для порядка, а во-вторых мы ранее указали в виде ссылки в шапке), вставляем в нее шорткоды (убрать двойные квадратные скобки) вывода списка избранных товаров:

[[user_favorites include_thumbnails=»true» thumbnail_size=»thumbnail» include_buttons=»true»]]
[[clear_favorites_button]]

Оформляем список

.favorites-list li {display: flex; align-items: center; position: relative;}

Список товаров выглядит довольно скромно. Было бы куда удобнее вывести мини-карточки товаров.

Получаем массив id избранных товаров — get_user_favorites(); С помощью этого массива мы можем создать абсолютно любой шаблон вывода товаров. Например:

<div class="carousel"><div class="multiple-items woocommerce products">
  
<?php $favorit_product = get_user_favorites();
	
$args = array(
  'post_type' => 'product',
  'posts_per_page' => 10,
  'include' => $favorit_product
	
);
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>

<div <?php post_class( $classes ); ?>><span>
	<?php
	do_action( 'woocommerce_before_shop_loop_item' );
	do_action( 'woocommerce_before_shop_loop_item_title' );
	do_action( 'woocommerce_shop_loop_item_title' );
	do_action( 'woocommerce_after_shop_loop_item_title' );
	do_action( 'woocommerce_after_shop_loop_item' );
	?>
</span></div>

<?php endforeach;
wp_reset_postdata() ?>
  
</div></div>

И обязательно оборачиваем в условие if ( get_user_favorites() ):, иначе при отсутствии товаров в Избранном начнут выводиться все товары, т.к. мы получим пустой массив в параметре include.

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/
Фильтр по меткам (изменение основного запроса)

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (ajax). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /
Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Избранное
Стили и скрипты
Рекомендации для васСтили и скриптыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.