/ Плагины / Избранное

Избранное

HIT

18.06.2016

1858

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

Плагин 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.

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

  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах. В funсtion.php // Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего Читать далее »

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

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

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