How to enable favoriting/saving using Tangram collections

‍

Summary:
This video covers how to enable favorites (or saves), allowing users to save listings or profiles to their account. Users can create and name multiple collections as needed.

Setting Up Collections

1. Create a Collection:
   • Log into the admin account.
   • Click the wrench icon → Settings → Integrations tab → Collections.
   • Create a collection (e.g., "Favorites" or "Saves") for listings and/or users.
2. Connecting the Favorite Button to Listings or Users:
   • Click the pencil icon on the collection to get the appropriate link.
   • Add the link to a button or link element in Webflow.
   • Under Custom Attributes, add:
     • tg-attribute = "link" → Ensures the correct listing or user ID is passed in the URL.
   • Set the button to open in a new tab (for now) to direct users to the favorites page.
3. Adding a Link to View Favorites:
   • Users can view their saved items at:
     • /collections/{collection_id}
   • To add this to a navigation menu, copy the favorites page URL and link it to the buyer or seller account dropdown.

Future updates will allow instant favoriting without redirecting to a new page.

For implementation, ensure proper ID passing and link integration in Webflow.

‍
Transcript:

" Hey, everybody. In this video, we'll be covering how to enable favorites. By favorites or saves, we mean the ability to click maybe like an icon, a heart or a save button to save either listings or users to the currently locked in account that you're in. Customers would be able to favorite listings or users so they can return to them for late to their profiles for later or anything like that.

And you can name collections. whatever you want, and you can have as many different collections as you want as well. So the place that you would go to create a collection like this would be, you'd log into your admin account, click the wrench icon, go to settings, and on the settings page here you would go to the integrations tab to select collections.

And I usually like to create just one favorites collection for both users and listings. But if you want to separate them into multiple, you can also do that and I would call it something like favorites or saves and you can leave a description to Help people know what it's for, keep track of your favorite products, services, and sellers for later.

Create collection. And to hook this collection up to your app, if you click the little pencil icon, it will provide you with some links. If you want to add listings to the collection, a. k. a. connect this heart button or the save button to listings, you would copy this link. You'd go on the link around the button, so it has to be like a button or a link element and you'd put in the URL under the settings tab in Webflow, if you're doing it in Webflow, and paste that link in there.

Please note that it is passing a listing ID or a user ID depending on your, whether you're favoriting a listing or a user, so you do need to pass an attribute under the custom attributes section, which is an HTML attribute with the name tg-attribute = "link" so that we can pass that parameter in the URL.

But that's all you would need to do. I'd recommend selecting opening. open in a new tab, which will take you to the favorites page after you heart it. That's the best interaction we have at the moment, but we will be pushing updates to make the favorites button instant so you can see just at a glance which ones have been favorited and it doesn't take you to a new page, but for now we'd recommend as of today.

Checking this box to make it open in a new tab for the best experience. If you were doing this for a user on a user profile page and you had a little heart button or a save button on the user's profile, it would be the same process to connect the button, except you'd copy this URL to add users to collection URL and just make sure that you also have tg-attribute = "link" added as an HTML attribute to pass that user ID in the URL.

As long as you do that it, it'll add that listing or user to the currently logged in user's collection. And if you want to add in the user's account, in their dropdown or navigation, a link to view their favourites, the link will just be this URL. That if you're on this page viewing your collection, it'll just be your subdomain slash collections.

And then the collection ID, you'd copy that and connect that to any like link for the customers or the sellers. If I wanted customers to have access to. or buyers to have access to their favorites. I could go into the buyer nav or the buyer account. I could connect in the drop down favorites by copying the URL here of the collections page, the favorites page, and pasting it directly here and then publishing.

And that's all that you need to do."