Displaying Notifications for Wishlist Actions in Smart Wishlist

Want to give your customers instant feedback when they add or remove items from their wishlist? This guide will show you how to create sleek notification messages using Smart Wishlist and some simple code.

How It Works

1. Notifications: When a customer interacts with the wishlist (adding or removing a product), a small message will briefly appear at the bottom of their screen.
2. Customization: You can change the look and feel of these notifications to match your store’s design.

Code Implementation

1. Copy and Paste:

JavaScript

var SmartWishlistItemAdded=function(){	$('#sw_added_notification').fadeIn('slow', function(){$(this).delay(2000).fadeOut();});}
var SmartWishlistItemRemoved=function(){	$('#sw_removed_notification').fadeIn('slow', function(){$(this).delay(2000).fadeOut();});}

SWCallbackExpressWishlistProductItemAdded=SWCallbackExpressWishlistCollectionItemAdded=SWCallbackCustomerWishlistProductItemAdded=SWCallbackCustomerWishlistCollectionItemAdded=SmartWishlistItemAdded;

SWCallbackExpressWishlistProductItemRemoved=SWCallbackExpressWishlistCollectionItemRemoved=SWCallbackCustomerWishlistProductItemRemoved=SWCallbackCustomerWishlistCollectionItemRemoved=SmartWishlistItemRemoved;

$("body").append('<div id="sw_added_notification" style="display: none;"><div class="sw_alert sw_alert_added"><i class="fa fa-check-circle-o"></i> Item successfully added to Wishlist. </div></div><div id="sw_removed_notification" style="display: none;"><div class="sw_alert sw_alert_removed"><i class="fa fa-check-circle-o"></i> Item successfully removed from Wishlist. </div></div>');

CSS

#sw_added_notification, #sw_removed_notification{position: fixed;bottom: 50px;text-align: center;margin: 0 auto;width: 100%; z-index: 9;display:none;}
.sw_alert {color: #fff;padding: 20px 20px;display: inline-block;width: 350px;border-radius: 5px;font-size: 15px;}
.sw_alert_link {text-decoration: underline;color: #fff;}


.sw_alert.sw_alert_added {
    background-color: #13a76a;
}

.sw_alert.sw_alert_removed {
    background-color: red;
}

2. Place in Theme: Add this code to your theme’s main Javascript file (theme.js or similar) or within a <script> tag in your theme.liquid layout file. Make sure this script is included on all pages where the wishlist functionality is active.

Code Breakdown (Optional)

• SmartWishlistItemAdded and SmartWishlistItemRemoved: These functions control the appearance and timing of the notification messages.
• SWCallback...: These lines connect the Smart Wishlist actions (adding/removing) to your custom notification functions.
• $("body").append...: This part creates the HTML structure for the notification messages. The content is initially hidden.
• CSS: The styles define the position, colors, and appearance of the notifications.

Customization

• Colors: Change the background colors (#13a76a for added, red for removed) to match your store’s theme.
• Icons: Replace or remove the Font Awesome icons (fa fa-check-circle-o) as desired.
• Text: Modify the text content of the messages.
• Animation: Experiment with different effects by adjusting the jQuery .fadeIn and .fadeOut methods.
• Position: Adjust the bottom property in the CSS if you want the notifications to appear elsewhere on the screen.