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

Избранное

18.06.2016

543

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка отдельных блоков на странице

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

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

/
Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

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

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

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