Избранное

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

Плагин 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=""]

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

Отправку избранного можно реализовать дополнением к плагину 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);
})

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

Создаем страницу Избранное с постоянной ссылкой 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.

Поделиться в соц. сетях: