anton-s
12/18/2019 - 3:17 PM

Система избранного для Wordpress (localstorage)

Все работает даже с кешем, грузит аяксом посты из избранного пользователя. Есть добавление, удаление, вывод избранного.

Использование

Достаточно разнести код ниже по файлам, а в нужном месте добавить кнопки соответствующие:

Для удаления из избранного: <span class="scf_remove_fav_btn" title="Удалить из избранного" data-id="<?php the_ID(); ?>"><i class="fa fa-close"></i></span>

Для добавления в избранное: <span class="scf_add_fav_btn clearfix" data-id="<?php the_ID(); ?>"> <i class="fa fa-star"></i> Добавить в избранное</span>


	//Добавление поста в избранное
	function add_fav_item( post_id ) {
		let posts_storage = get_fav_items();
		posts_storage.push( post_id );
		save_fav_items( posts_storage );
	}

	//Сохранение избранного
	function save_fav_items( posts_ids ) {
		let posts_storage = posts_ids.filter( onlyUnique );
		localStorage.setItem( 'favorites_posts', JSON.stringify( posts_storage ) );
	}

	//Удаление постов из изранного
	function remove_fav_item( post_id ) {
		let posts_storage = get_fav_items();
		posts_storage     = posts_storage.filter( function( e ) {
			return e !== post_id;
		} );
		save_fav_items( posts_storage );
	}

	//Получаем айдишники избранного
	function get_fav_items() {
		let posts_storage = localStorage.getItem( 'favorites_posts' );
		return ( posts_storage ) ? JSON.parse( posts_storage ) : [];
	}

	//Отлавливаем события добавления в избранное
	$( '.scf_add_fav_btn' ).click( function( e ) {
		add_fav_item( $( this ).attr( 'data-id' ) );
		$( this ).text( 'Добавлено в избранное' );
	} );


  //Хелпер, чтобы уникализировать массивы значений
	function onlyUnique( value, index, self ) {
		return self.indexOf( value ) === index;
	}

	//Отлавливаем события удаления из избранного
	$fav_wrapper.on( 'click', '.scf_remove_fav_btn', function() {

		remove_fav_item( $( this ).attr( 'data-id' ) );
		$( this ).parent( 'li' ).remove();
	} );
// Этот кусок кода нужен только на странице вывода избранного.


// Подготовим себе все нужное
	let $fav_wrapper = $( '#scf_favorites' ); // Куда будем вставлять наши посты
	let post_ids     = get_fav_items(); // Получаем избранное
	let data         = {
		action: 'scf_get_favorites', // Название єкшна
		posts: post_ids,
	};
	
  // Делаем сам запрос и вставляем результат в наш div
	$.ajax( {
		type: 'POST',
		url: ajaxurl,
		data: data,
	} ).done( function( response ) {
		$fav_wrapper.html( response );
	} );
<?php 

//Добавляем екшн
add_action( 'wp_ajax_scf_get_favorites', 'scf_get_favorites_callback' );
add_action( 'wp_ajax_nopriv_scf_get_favorites', 'scf_get_favorites_callback' );

function scf_get_favorites_callback() {
  global $post;
	$post_ids = $_POST['posts'];

	if ( $post_ids ) {
		$posts = get_posts( [ 'numberposts' => - 1, 'post_type' => 'post', 'post__in' => $post_ids ] );
		foreach ( $posts as $post ): setup_postdata( $post ); 
		  get_template_part('loop');
		endforeach;
	} else {
		echo "<div class='no-fav'>В вашем избранном пока пусто <span>Смотрите наши фото-подборки, добавляйте в избранное, чтобы не потерять лучшее</span></div>";
	}

	wp_die();
}