Requiring Users to Log In Before They Can Add to Wishlist

A key part of Wishlist Plus’s value proposition is allowing users to add items to their Wishlist while browsing your store even if they are not logged in. That is a critical differentiation for our platform because we believe requiring users to log in creates needless friction for the user, and especially so when that requirement is introduced at a very early stage of their shopping journey. They might not have built a relationship with your brand yet, and asking them to create an account and sign in just to bookmark a product they like will most certainly have a negative impact on engagement – thereby costing you an opportunity to begin a relationship with that shopper. Considering the fact that more than two-thirds of your traffic is now likely coming from a mobile device, any additional friction gets magnified that much more.

In fact, when that login requirement is removed, we see a significantly higher rate of engagement for the Wishlist module. And because the Swym platform can identify users across devices even when they aren’t logged in, we can seamlessly connect and sync shoppers’ activity enabling them to easily pick up where they had left off. Along those same lines, we can also help you better personalize your engagement campaigns with those users via targeted emails, retargeting ad campaigns etc.

With that said, there might however be situations where business reasons might warrant ensuring that the shopper is able to add to their Wishlist only after they create an account with your store. In those instances, even though there is additional friction for users, you might be ok with that because users overcoming that friction demonstrate a relatively higher purchase intent for that product. As a Wishlist app, we can support that requirement and this blog post outlines the steps to add this restriction for your store.

To ensure that the “Add to Wishlist” button in your product page verifies that a shopper is logged in before allowing them to add the item, add the following code in your product page’s liquid file. When the shopper clicks on that button on the product page, this code checks if the shopper is logged in and adds the item to the Wishlist ONLY when they are logged in. If they are not logged in, you can make this code redirect the user to your login page – just modify the “else” section in the snippet below (where it says // call your login code) to your custom account page. Note that you will need to add a custom Wishlist button for this snippet to work.

Product page changes

• Add a custom Wishlist button – <a class="custom-add-to-wishlist">Add to Wishlist</a>
• Add the script to hook to the button by the class “custom-add-to-wishlist”

<script>
 var isLoggedIn;
 {% if customer %}
    isLoggedIn = true;
 {% else %}
    isLoggedIn = false;
 {% endif %}

 function wishlistLoginCheckHandler(){
   $(".custom-add-to-wishlist").on("click", function(e){
      e.preventDefault();
      if(isLoggedIn) {
            // code to check for login
            var productData = JSON.parse(JSON.stringify(window.SwymPageData));
            productData.et = SwymTracker.EventTypes.addToWishList;
            _swat.addToWishList(productData, function(){console.log("Added to wishlist");});
       }
       else{
           // call your login code
           window.location = "/account/login";
       }
     });
     } 
     if(!window._swat){
       if(!window.SwymCallbacks){
            window.SwymCallbacks = [];
        }
        window.SwymCallbacks.push(wishlistLoginCheckHandler);
      }
     else{
        wishlistLoginCheckHandler();
   }
</script>

ShellCopy

SwymPageData looks like this:

et: SwymTracker.EventTypes.addToWishList, 
dt:                // product title 
du:               // product full url 
epi:             // variant id 
empi:         // product id 
pr:              // price 
iu:               // image url;

ShellCopy

You can look at swymSnippet for how Swym captures the product data for a given product. For example,

{
   "et":4,
   "dt":"Black and Orange Skull Arm Length Fingerless Gloves",
   "du":"http://swym-shop1.myshopify.com/products/black-and-orange-skull-arm-length-fingerless-gloves",
   "empi":3774411649,
   "epi":10973397377,
   "pr":"3.99",
   "iu":"//cdn.shopify.com/s/files/1/1110/2832/products/600_DB224_Black_Orange_Long_Fingerless_GlovesPS.jpeg?v=1451482336"
}

ShellCopy

Add to Wishlist from Collections pages

If you have enabled an Add to Wishlist button on your collections pages, you’ll want to perform a similar check to ensure that only logged-in users are able to add items to their Wishlist from those pages. In order to enforce the check, follow the following 2 steps.

• Include this snippet in your collections grid item rendering –

{% include 'swym-product-view', product: product %}

<button class="swym-button swym-custom-collections swym-add-to-wishlist-view-product product_{{product.id}}" data-product-id="{{product.id | json}}"></button>

ShellCopy

• Add the following code in the collection.liquid file or the parent file that calls the grid item rendering “custom-add-to-wishlist”

<script>
var isLoggedIn;
{% if customer %}
 isLoggedIn = true;
{% else %}
 isLoggedIn = false;
{% endif %}

function wishlistCollectionsLoginCheckHandler(){
 $(".swym-custom-collections").addClass("swym-loaded");
 window._swat.fetch(function(products){
   $(".swym-button").each(function(i){
     var productId = $(this).data("product-id");
     var items = products.filter(function(x){
       return x.et == window._swat.EventTypes.addToWishList && x.empi == productId;
     });
     if(items.length > 0){
       $(this).addClass("swym-added").attr("disabled", true);
     }
     else{
       var me = this;
       $(this).on("click", function(e){
         e.preventDefault();
         if(isLoggedIn)
         { // code to check for login
           var productId = $(me).data("product-id");
           var productData = JSON.parse(JSON.stringify(SwymViewProducts[productId]));
           productData.et = SwymTracker.EventTypes.addToWishList;
           _swat.addToWishList(productData, function(){console.log("Added to wishlist");});
           $(me).addClass("swym-added").attr("disabled", true);
         }
         else{
           // call your login code
           window.location = "/account/login";
           }
         });
       }});
     });
}
if(!window._swat){
 if(!window.SwymCallbacks){
   window.SwymCallbacks = [];
   }
 window.SwymCallbacks.push(wishlistCollectionsLoginCheckHandler);
 }
else
 {
   wishlistCollectionsLoginCheckHandler();
 }
</script>

ShellCopy

You are done! The Wishlist capability is now behind a login. At any point of time, if you feel like you want to remove this restriction, all you have to do is roll back the code above.