Disabling “Add to Cart” button on Wishlist Page for products containing specific tags

This tutorial demonstrates how to selectively disable the “Add to Cart” button for specific products on the default wishlist page of Smart Wishlist on your Shopify store. This is particularly useful for items tagged as “tag1”, “tag2”, or any other tag you define, preventing customers from adding them directly to their cart from the wishlist.

Scenario: You have a Shopify store using the Smart Wishlist app. You want to disable the “Add to Cart” button for products tagged with “tag1” or “tag2” to guide customers towards a specific inquiry process for these items.

Solution: We’ll utilize JavaScript within your Shopify theme to achieve this. Here’s the code snippet and a breakdown of how it works:

Code snippet

{% unless template %}
<script type="text/javascript">
  const sw_tags = ["tag1", "tag2"]; // List of tags to disable "Add to Cart"

  WishlistLoadedCallback = function() {
    if ($("#bookmarks").has(".addsingleproduct").length > 0) {
      const wishlist_data_source = shared_wishlist === 0 ? wishlist_item_data : wishlist_item_data_shared;

      $("#bookmarks .addsingleproduct").each(function() {
        let disableAddButton = false; 
        const currentButton = $(this);
        wishlist_data_source.forEach(wp_temp_product => {
         if(currentButton.data('productid')==wp_temp_product.id){ 
          if (sw_tags.some(sw_tag => wp_temp_product.tags.includes(sw_tag))) {
            disableAddButton = true;
          }}
        });

        if (disableAddButton) {
          currentButton.addClass("disabled");
        }
      });
    }
  };
</script>
{% endunless %}

Explanation:

1. sw_tags Array: This array stores the Shopify product tags that should trigger the “Add to Cart” button to be disabled. In this case, it’s “tag1” and “tag2”.
2. WishlistLoadedCallback Function: This function is likely provided by the Smart Wishlist app and is called when the wishlist has finished loading. We use this to ensure our code executes at the right time.
3. $(“#bookmarks”).has(“.addsingleproduct”).length > 0: This checks if there are any “Add to Cart” buttons (.addsingleproduct) within the wishlist container (#bookmarks).
4. wishlist_data_source: This variable determines the data source for the wishlist items based on whether it’s a shared wishlist or not. This is likely specific to the Smart Wishlist app.
5. $(“#bookmarks .addsingleproduct”).each(function() { … });: This iterates through each “Add to Cart” button on the wishlist page.
6. wishlist_data_source.forEach(…): This loop iterates through the wishlist item data.
7. sw_tags.some(…): This checks if any of the tags in the sw_tags array are present in the wp_temp_product.tags array (the tags associated with the current wishlist item).
8. currentButton.addClass(“disabled”);: If a matching tag is found, the disabled class is added to the “Add to Cart” button. You’ll likely need to define the styling for the disabled class in your CSS to visually indicate the button is inactive.

Implementation:

1. Create a new snippet titled wishlist-enhancements. It creates the file snippets/wishlist-enhancements.liquid.
2. Paste the above code within the snippet file.
3. Add the following code anywhere before closing </head> in layout/theme.liquid.
   
   {% include ‘wishlist-enhancements’ %}
   
4. Add CSS rules to your theme’s stylesheet to style the disabled class. For instance:
   
   .addsingleproduct.disabled { opacity: 0.5; pointer-events: none; }