Customizing the wishlist layout and text

Hi Adri,

What version of the plugin are you using?
Since 2.0.4 version, plugins bundle options to customize the strings you want to change, under WP Dashboard -> YIT Plugins -> Wishlist -> Settings (here a screen)

For your second request, I suggest you to read this topic, where we achieved something similar to a masonry view

Obviously, you can hide columns you don’t need from wishlist settings panel

Let me know iif this helps
Have a nice day ??

Thank you for your reply.
I will study and try this in the next couple of days.
After that I will get back to you. It seems that I was looking to deep (at least for the text issue).
I have the latest update installed so the text issue must be simple.
Thanx again and I will let you Know.

Have a nice day as well ??

I’m working on it and I have made a little progress.
The wishlist is shown in a masonry fashion. Great.

See screen

I run into a problem. When I try to delete an item an error is presentede. “Could not remove the item from the wishlist”. And the masonry breaks.

See second screen

I use this code in my functions.php:

function twentytwelve_child_masonry() {
	if (!is_admin()) {

                wp_register_script ('eventemitter_loaded' , get_stylesheet_directory_uri() . '/js/eventEmitter.js' , Array() , '4.2.11' ,true);
                wp_enqueue_script ('eventemitter_loaded');

                wp_register_script ('eventie_loaded' , get_stylesheet_directory_uri() . '/js/eventie.js' , Array() , '1.0.5' ,true);
                wp_enqueue_script ('eventie_loaded');

                wp_register_script ('images_loaded' , get_stylesheet_directory_uri() . '/js/imagesloaded.js' , Array() , '3.1.8' ,true);
                wp_enqueue_script ('images_loaded');

		wp_register_script('twentytwelve_child_masonry', get_stylesheet_directory_uri() . '/js/masonry.pkgd.min.js' , array(),'3.2.1', true);
                wp_enqueue_script('twentytwelve_child_masonry');

		add_action('wp_footer', 'twentytwelve_child_add_masonry');
		function twentytwelve_child_add_masonry() { ?>
			<script>
                        (function( $ ) {
                            "use strict";
                            $(function() {
                            //set the container that Masonry will be inside of in a var
                            var container = document.querySelector('#masonry_wrapper');
                            //create empty var msnry
                            var msnry;
                            // initialize Masonry after all images have loaded
                            imagesLoaded( container, function() {
                                msnry = new Masonry( container, {
                                    itemSelector: '.product',
                                    isAnimated: true
                                });
                                });
                            });
                            }(jQuery));
			</script>
		<?php
		}
	}
}

and ik call it with:

<?php twentytwelve_child_masonry()?>

Can you please advice me why this is happening and what I have to do to fix it?

When clicking on the Add to Cart button something similar happens.
The product is added to the cart, so far so good.
However the wishlist is not updated. Only the masonry breaks.

I think something like this must do the trick and I hope this can be done on the backend so it wil not be visible to the visitors:

On clicking the remove button or after the product is added to the cart:
– Unload the masonry scripts
– Reload the page
– Remove the item from the whislist
– Load the masonry scripts
– Reload the page

I’m trying for more than a day now, without any progress. I simply can’t figure out which code I have to put where.

Please advice.

EDIT:

I found out that the <a href code is outputted in my html as:

<a href="/wishlist/?remove_from_wishlist=3759" class="remove remove_from_wishlist" title="Remove this product"></a>

when the masonry is off.

When the masonry is on the output in the html is:

<a href="/wp-admin/admin-ajax.php?remove_from_wishlist=3748" class="remove remove_from_wishlist" title="Remove this product"></a>

after clicking the delete link. So, it seems to me that it “looks” to a wrong place to perform the action. Sorry but I’m just a beginner. Can anyone help me? Please?

Hi again Adri

I’m sorry, but we schedule weekly support on wp.org, so it may require some time to process support request

Anyway, it’s really difficult to help you with code without doing some test; I’ll try to give you some hint

1. First of all, every time something changes in the wishlist theme, your will need to refresh the masonry; this can be done with js, but it is quite library dependant

For example, if you’re using this excellent library, you can re init view simply calling layout method like this

$('body').on('removed_from_wishlist', function(){
    msnry.layout();
});

2. Error message “Error. Unable to remove the product from the wishlist.” is sent in two conditions
a. DB Error (unlikely)
b. Empty / not numeric remove_from_wishlist param received by server
Can you please check remove link? Usually remove from wishlist is performed via ajax; does your implementetation make a synchronousrequest to server?

Please, in the next answer, share with us a link of your installation, so I can check a couple of things myself

Let me know if this helps

Have a nice day ??

Hi, thank you for your reply. I’m struggling a lot with this.

Hereby my comments on your reply:
1) Luckily I use that library for the masonry view and thank you for your code to re init the masonry. However…. where do I have to put that code? Sorry but I’m still to be treated like a newbie and feel stupid about that.

2) When I type the remove url in the address field of the browser the item is removed correctly. So, IMHO there is no DB error. The remove link in the html output is: <a href="/wishlist/?remove_from_wishlist=3759" class="remove remove_from_wishlist" title="Remove this product"></a> but after clicking (and the error) it change to <a href="/wp-admin/admin-ajax.php?remove_from_wishlist=3748" class="remove remove_from_wishlist" title="Remove this product"></a>.

The link cange for the remaining items as well.

I’m developing this site on a local machine so I’m not able to provide you with an online installation. So it is not that easy to give you access. I hope we can find another way.

I hope to hear from you soon.

Regards.

Hi again,

I implemented something similar to what you need, and I will describe you my solution

I will assume that wishlist-view has no customization, and that you followed previous css guide to transform wishlist from table to grid

All you have to do is add this function to functions.php file of your theme

function add_masonry(){
	wp_enqueue_script( 'images-loaded', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js', array( 'jquery' ), false, true );
	wp_enqueue_script( 'jquery-masonry', 'https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js', array( 'jquery', 'images-loaded' ), false, true );
	wc_enqueue_js( '
	    jQuery(document).ready(function($){
	        var init_masonry = function(){
		        $(".wishlist_table").imagesLoaded( function() {
	                $(".wishlist_table tbody").masonry({
		                itemSelector: "tr",
		                percentPosition: true
		            });
	            });
            }

            $("body").on("removed_from_wishlist", init_masonry);
            init_masonry();
	    });
	' );
}
add_action( 'wp_enqueue_scripts', 'add_masonry' );

This should setup the masonry, and re-init it after product removed; anyway, I can’t find something wrong on my local installation with remove links, and all seems to work just fine

So I suggest you to revert all your customization, as problem may lay here

Here some screen of my test:
– masonry view
– remove from wishlist url
– remove from wishlist processing
– after remove from wishlist

Let me know if this code works for you
Have a nice day ??

Hi, thank you for your reply and your effort put into this to help me out.

I worked on it for the past 2 days but sadly it did not work out well. I commented out my “own” masonry function and added yours in my functions.php. I alson renamed the customized wishlist-view.php file so it is not used at this moment.

When I load the page something is happening. A kind of masonry is applied but it is all in the upperleft corner of the browser window.

See screenshot here.

I looked a bit deeper in the html output and saw that the images-loaded script from cloudflare is used but that the local masonry scripts are loaded and not the one from cloudflare.

You can see it here.

It even happens with the standard twentytwelve theme.
That the page is messed up is (I think) a css issue. I saw that some style elements are injected inline. I feel so stupid but I really don’t know what to do next.

Please advice.

Ops, my bad! ??

I forgot about this little css rule that is required for this customization

.wishlist_table tbody{
    display: block;
}

Please, add it at the end of the style.css of your theme

I just want to remark that this is not the solution I would adopt, as force a table into a masonry view is not a good practice, but is the less expensive solution that I found

Anyway, I hope at least you will obtain something similar to the masonry view you need

Let me know if this solves the problem of “floatted” elements

Have a nice day ??

Hi there,

Thanks a lot for your help! I worked it out. It was a bit of pain in the…. to work the css out but I managed.
It looks like this right now.
When an item is removed the masonry builds up again properly.

However I stumbled into another issue.
When an item is added to the cart (which works fine) the masonry is not re-initialized.
It looks like this.

Can you think of another smart solution to solve this?
Thanks in advance.

Regards,

Adri

Hi again!

It’s been hard, but in the end I succeeded and I’m here with some news.

I think you can resolve your problem with a simple change in the code I posted last week: all you have to do is add “cart_page_refreshed” event as trigger for masonry re-init

So, the code will become something like this:

function add_masonry(){
	wp_enqueue_script( 'images-loaded', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js', array( 'jquery' ), false, true );
	wp_enqueue_script( 'jquery-masonry', 'https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js', array( 'jquery', 'images-loaded' ), false, true );
	wc_enqueue_js( '
	    jQuery(document).ready(function($){
	        var init_masonry = function(){
		        $(".wishlist_table").imagesLoaded( function() {
	                $(".wishlist_table tbody").masonry({
		                itemSelector: "tr",
		                percentPosition: true
		            });
	            });
            }

            $("body").on("removed_from_wishlist cart_page_refreshed", init_masonry);
            init_masonry();
	    });
	' );
}
add_action( 'wp_enqueue_scripts', 'add_masonry' );

Note that I changed this

$("body").on("removed_from_wishlist", init_masonry);

to this

$("body").on("removed_from_wishlist cart_page_refreshed", init_masonry);

Replace previous code with the new one, and let me know if everything works correctly

Have a nice day ??

YEAH!!!! It works. Great.

Thank you very much.

Have a nice day too! ??

You’re welcome!

I’ll mark this thread as resolved

If you have appreciated our plugin and our support, please don’t forget to give us a 5-star vote, and consider buying our premium version: here you can find more information about it, and here you can try a live demo of the plugin. ??

Have a nice day!