Add a border IF there are products inside of wishlist

  • jazzu

    (@jazzu)


    2 years, 7 months ago

    Hi!

    I have a question about adding a border to my wishlist counter. I’ve got the TI Wishlist for WooCommerce plugin, that has the option to add a wishlist counter to my primary menu. I added that, and added a bit of CSS to make it look the way I wanted to.

    But I’m facing an issue here.

    When the wishlist is empty, it doesn’t show the number (just like i want it). I wrote some CSS to add a border to the products counter, but I don’t know how to make it appear only when items are added to the wishlist.

    TLDR: I wrote some CSS to add a border to wishlist counter, but I want it to appear only when there are products added to the wishlist.

    Without items in wishlist: Wishlist without products
    Items in wishlist: Wishlist with products

    Thank you!

    • This topic was modified 2 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • mango404

    (@mango404)

    2 years, 7 months ago

    Maybe JavaScript?
    call function onload and check for innerHTML. If true add styles.

    Otherwise you could script it in php in your Plugin templates. Check for the Wishlist count number and add a class to the Html element if true. And add the border css to that class

    • This reply was modified 2 years, 7 months ago by mango404.
    Thread Starter jazzu

    (@jazzu)

    2 years, 7 months ago

    Hi @mango404 !

    Thank you for your fast reply. I know a bit about CSS, but not about JavaScript.
    I think I should focus on this part of the code here:

    	public static function add_to_menu($items, $menu, $args)
	{
		$menu_cnt = count($items) + 1;
		$menu_ids = tinv_get_option('topline', 'menu');

		if (!is_array($menu_ids)) {
			$menu_ids = array($menu_ids);
			$menu_ids = array_filter($menu_ids);
		}

		foreach ($menu_ids as $menu_id) {

			if ($menu_id == $menu->term_id && apply_filters('tinvwl_add_to_menu', true, $menu_id)) {

				$menu_order = tinv_get_option('topline', 'menu_order') ? tinv_get_option('topline', 'menu_order') : 100;

    But I don’t know how I would go on about that part..

    Thank you for your time

    Mahafuz

    (@mahfuz01)

    2 years, 7 months ago

    Hey jazzu,

    You can add a few lines of jquery to check if the span tag contains any number inside of it and if there is no number then add a class border-none.

    You can simply use this jquery codes to check and add the class.

    var wishList = $('.wishlist_products_counter_number');
if ( wishList.text() === '' ) {
    wishList.addClass( 'no-border' )
}

    After that, you can simply add this one of line CSS code to hide the border for an empty span.

    .wishlist_products_counter_number.no-border {
    border: 0px solid;
}

    You can just simply add the codes that I’ve mentioned above. Hopefully, this will give you the solution you want.

    Thanks Best
    Mahafuz

    mango404

    (@mango404)

    2 years, 7 months ago

    It’s better to use php on that becouse JavaScript works locally on the Users device while php works server sided. By using more JS it could affect the Sites performance.
    But honestly JS would be easier i think and little JS wont affect your Sites performance:

    //the function
function addBorderIfValue() {
	// wishlist-count should be the id name of the Html element you ant to add border to
	var borderElement = document.getElementById("wishlist-count");
	// Check if borderElement has text and add border if so
	if (borderElement.innerHTML.length != 0) {
		borderElement.style.border = "2px solid #fff";
	}
}

// Call it when page loads
addBorderIfValue()

    Just add this between <script></script> tags. You could also add a class instead of styles width:

    //the function
function addBorderIfValue() {
	// wishlist-count should be the id name of the Html element you ant to add border to
	var borderElement = document.getElementById("wishlist-count");
	// Check if borderElement has text and add border if so
	if (borderElement.innerHTML.length != 0) {
		borderElement.classList.add("class-name");
	}
}

// Call it when page loads
addBorderIfValue()

    I cannot help you with the PHP aproach. I’m sorry. Hope it helps 🙂

    • This reply was modified 2 years, 7 months ago by mango404.
    Thread Starter jazzu

    (@jazzu)

    2 years, 7 months ago

    Hi @mango404 !

    I really appreciate you actually writing the code for me!
    I tried putting it in functions.php, but it says there’s an error syntax error, unexpected ‘var’ (T_VAR)

    What should I do?

    Thank you again!

    Thread Starter jazzu

    (@jazzu)

    2 years, 7 months ago

    Hi @mango404 .

    Due to terrible support from plugin authors and the wishlist having a lot of problems, I’ve decided to disable it.

    I really apprectiate you taking your time to go out of your way to help me out.

    Thank you once more.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    2 years, 7 months ago

    Moved to Fixing WordPress, this is not an Everything else WordPress topic.

    Please ask plugin specific questions in that plugin’s dedicated sub-forum instead.

    https://wordpress.org/support/plugin/woocommerce/#new-post

    mango404

    (@mango404)

    2 years, 7 months ago

    Yo should only write PHP Code in your functions.php. That script i gave you is JavaScript. You have to add script tags arround it.

    Some ways to do so:

    1. Add JavaScript plugin and paste it in there
    2. Go to your theme Template right bevore </body> ends and paste it here with the script tags arround it
    3. Go to your Theme Template and link a script file like so:
    <script src=”/scripts/scripts.js”></script>
    Now create the js file in that location and paste the function i gave you in there.

    No Problem, glad i could help

    • This reply was modified 2 years, 7 months ago by mango404.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Add a border IF there are products inside of wishlist’ is closed to new replies.