script.js

/* global $ emi */
(function () {
  let wishListAjax = false
  $('.add-to-wishlist').on('click', function (e) {
    e.preventDefault()
    const productID = $(this).data('product-id')
    const removeItem = $(this).hasClass('added') ? 1 : 0
    $(this).toggleClass('added')
    if (wishListAjax) {
      wishListAjax.abort()
      wishListAjax = false
    }

    wishListAjax = $.ajax(window.emi.ajax, {
      type: 'POST',
      data: {
        action: 'renka_wishlist_add_or_remove',
        product_id: productID,
        remove_item: removeItem
      },
      dataType: 'json',
      success: (response) => {
        if (response.status === '1') {
          // Todo: Remove hover
          $(this).attr('data-balloon', emi.wishlist_remove)
        } else {
          $(this).attr('data-balloon', emi.wishlist_add)
        }
      },
      complete () {
        wishListAjax = false
      }
    })
  })

  $('.wishlist-remove').on('click', function (e) {
    e.preventDefault()
    const productID = $(this).data('product-id')
    wishListAjax = $.ajax(emi.ajax, {
      type: 'POST',
      data: {
        action: 'renka_wishlist_add_or_remove',
        product_id: productID,
        remove_item: 1
      },
      dataType: 'json',
      success: (response) => {
        $('.wishlist-table tr[data-product-id="' + productID + '"]').fadeOut('slow', () => {
          $(this).remove()
          if (response.count === 0) {
            $('.wishlist-table').fadeOut('slow', function () {
              $('.wishlist-empty').addClass('show')
            })
          }
        })
      }
    })
  })
})()

template.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $wishlist_ids;
//Todo: remove table
$wishlist_ids         = array_keys( $wishlist_ids );
$wishlist_empty_class = '';
if ( ! empty( $wishlist_ids ) ) {
	$query_args = array(
		'post_type'      => 'product',
		'order'          => 'DESC',
		'orderby'        => 'post__in',
		'posts_per_page' => 200, // -1 = no limit
		'post__in'       => $wishlist_ids
	);

	$wishlist_loop = new WP_Query( $query_args );

} else {

	$wishlist_loop = false;
}

if ( $wishlist_loop && $wishlist_loop->have_posts() ) :
	?>


    <table class="table wishlist-table">
        <thead>
        <tr>
            <th colspan="2"><?php esc_html_e( 'Produkt', 'emistoff' ) ?></th>
            <th colspan="2"><?php esc_html_e( 'Preis', 'emistoff' ) ?></th>
        </tr>
        </thead>

        <tbody>
		<?php
		while ( $wishlist_loop->have_posts() ) : $wishlist_loop->the_post();
			global $product;
			?>
            <tr data-product-id="<?php echo $product->get_id(); ?>">
                <td class="product-thumbnail-wishlist">
                    <a href="<?php the_permalink() ?>">
						<?php echo $product->get_image() ?>
                    </a>
                </td>
                <td class="product-title">
                    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <a href="#" class="wishlist-remove"
                       data-product-id="<?php echo $product->get_id(); ?>"><?php esc_html_e( 'Entfernen', 'emistoff' ); ?></a>

                </td>
                <td class="product-prive">
					<?php
					// Price
					woocommerce_template_loop_price();
					?>
					<?php
					$availability      = $product->get_availability();
					$availability_html = empty( $availability['availability'] ) ? '' : '<p class="stock ' . esc_attr( $availability['class'] ) . '">' . esc_html( $availability['availability'] ) . '</p>';
					echo apply_filters( 'woocommerce_stock_html', $availability_html, $availability['availability'], $product );

					?>
                </td>
                <td class="product-actions">
					<?php woocommerce_template_loop_add_to_cart(); ?>
                </td>
            </tr>

		<?php endwhile; ?>
        </tbody>
    </table>
	<?php
else:
	$wishlist_empty_class = 'show';
	?>

<?php endif; ?>

    <div class="text-center wishlist-empty <?php echo $wishlist_empty_class ?>">
        <p>
			<?php _e( 'Ihre Wunschliste ist zurzeit leer. Klicken Sie auf <i class="fa fa-heart pink-icon"></i> um ein Produkt zur Ihrer Wunschliste hinzuzufügen', 'emistoff' ) ?>
        </p>
    </div>
<?php

wishlist.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

class Wish_list {
	private $cookie_name = 'emi-wishlist';

	function __construct() {
		global $wishlist_ids;
		//Todo: not sure this needs a nonce
		add_action( 'wp_ajax_renka_wishlist_add_or_remove', array( $this, 'wishlist_add_or_remove' ) );
		add_action( 'wp_ajax_nopriv_renka_wishlist_add_or_remove', array( $this, 'wishlist_add_or_remove' ) );
		$wishlist_ids = $this->renka_get_product_cookie();

		//Kommt nach dem Add to cart button
		add_action( 'woocommerce_before_shop_loop_item_title', array( $this, 'wishlist_button_for_product' ), 13 );
		add_action( 'emi_wishlist_single_product', array( $this, 'wishlist_button_for_product' ), 13 );
		//Gibt die Wunschliste aus

		add_shortcode( 'renka_wishlist', array( $this, 'renka_wishlist_shortcode' ) );
	}


	function wishlist_add_or_remove() {
		$product_id  = isset( $_POST['product_id'] ) ? intval( $_POST['product_id'] ) : null;
		$return_data = array();
		if ( $product_id ) {
			global $wishlist_ids;
			$remove_item = ( isset( $_POST['remove_item'] ) && $_POST['remove_item'] ) ? true : false;
			if ( $remove_item ) {
				if ( isset( $wishlist_ids[ $product_id ] ) ) {
					unset( $wishlist_ids[ $product_id ] );
					$return_data['status'] = 0;
				}
			} else {
				$wishlist_ids[ $product_id ] = '1';
				$return_data['status']       = '1';
			}
			$this->renka_set_product_cookie( $wishlist_ids );
			$return_data['count'] = count( $wishlist_ids );
		}
		echo json_encode( $return_data );
		exit;
	}

	function renka_get_product_cookie() {
		if ( isset( $_COOKIE[ $this->cookie_name ] ) ) {
			return json_decode( stripslashes( $_COOKIE[ $this->cookie_name ] ), true ); // Return -array- from JSON string
		}

		return array();
	}

	function renka_set_product_cookie( $wishlist_ids = array() ) {
		$wishlist_ids_json = json_encode( stripslashes_deep( $wishlist_ids ) );
		$expiration        = time() + 60 * 60 * 24 * 30; // 30 Tage

		wc_setcookie( $this->cookie_name, $wishlist_ids_json, $expiration );
	}

	function renka_wishlist_shortcode() {
		require_once( 'wishlist_template.php' );
		wp_reset_postdata();
	}


	function wishlist_button_for_product() {
		global $product, $wishlist_ids;
		$button_class = '';
		$tooltip      = null;
		$product_id   = esc_attr( $product->get_id() );

		if ( isset( $wishlist_ids[ $product_id ] ) ) {
			$button_class = 'added';
			$tooltip      = esc_html__( 'Produkt aus der Wunschliste entfernen', 'emistoff' );
		}
		$tooltip = ( $tooltip ) ? $tooltip : esc_html__( 'Produkt zur Wunschliste hinzufügen', 'emistoff' );

		if ( ! is_product() ) {
		echo '<li>';
		}

		$output = sprintf( '<button type="button" data-balloon="%s" data-balloon-pos="up" class="btn-icon add-to-wishlist %s opacity-1" data-product-id="%s"><i class="fa fa-heart"></i></button>',
			$tooltip,
			$button_class,
			$product_id
		);
		echo $output;

		if ( ! is_product() ) {
			echo '</li>';
		}

	}
}

new Wish_list();