How to connect filters and sorting to your Webflow marketplace with Tangram

‍

Summary:

This video explains how to set up filtering and sorting in Webflow using Tangram. Key points include:

1. Keyword Search: To enable keyword search, use a form element with a plain text input field named "search." Set the form action to the desired search page URL.
2. Dynamic Filters: Populate dropdown filters dynamically by adding a tg-filter-value attribute with the Tangram-friendly field ID (retrieved from the fields table in the admin account). Ensure the dropdown is within a tg-section div, with the section and import types properly defined.
3. Section and Page Setup: For search pages, define two sections in both the Webflow front end and Tangram back end:
   • A filter section for filters.
   • A tile section for listing tiles, which duplicates the listing data dynamically. Each section needs a unique ID and the appropriate Tangram attributes.
4. Min/Max Filters: For integer fields like price, use form inputs named min_<fieldID> and max_<fieldID>. Set the form action to the search page URL.
5. Sorting: Create buttons or links that navigate to a search page with sorting parameters appended to the URL (e.g., ?sort_by=created_at_descending for newest listings).
6. Currently Selected Filters: Add a tg-add-on-id attribute with show-search-values to display active filters as tags on the page.
7. Location Search: For location-based filters, use an input field named "location" and set the form action to the search page URL.
8. Pre-Filters: Link directly to search pages with predefined filters by appending ?val_<fieldID>=value to the URL. Multiple filters can be combined with commas, and spaces in values should be replaced with +.

The documentation within Tangram's admin panel provides further technical details.

‍

Video Transcript:

" Hello, in this video we'll be covering filtering and sorting with Tangram within Webflow. , we do cover the technical documentation of this within your platform. If you go to the wrench icon in your admin account, click settings, and then select filtering and sorting under pages. It will repeat in writing what we're covering this video.

But the main things that you'll probably need to know how to do on any search pages or search elements from home pages to your search page would be How do you connect a keyword search like the one we're looking at here where you can type in something and then it will search by that tag and it will search for any listing or user with The content of that keyword in any description field or text field as well as tags that have been added to their profile.

To do so, you'd have a form element with a text field. The type would be a plain text within Webflow, and the name of the field just needs to be a lowercase s, search. And as long as the action is set to go to the URL of your search page that you want the the, the input to search by, for example, slash search services and I would recommend always putting the subdomain in front of the URL, so it would be something like yourcompany.

tangram. co slash search services with an HTTPS in front of it. That's just best practice when linking anything in Tangram. But as long as you have that and the name of the text field is search, this search element will be fully connected on any of your search pages. If you want to connect filters such that the values in a drop down get automatically populated by what values have results on this page, for instance, if we want to show all the categories that have results on this service search page, we could put in the drop down a drop down element a text field with the attribute tg filter value equals the tangram friendly field id so we would grab that id from the fields table within your admin account so that would be located here under the wrench icon at the very top left you'd search for the category field it looks like we have it right here so i'd copy that friendly id and In the tangram attribute, it would be tg, filter value, paste in the category drop down field, and when we publish this, it'll pull in all of the category values into that drop down.

As long as, one caveat, it's inside of a tg section. Meaning we have a div with the TG section ID defined. In this case, we named the section TG section service filters to push all the filter data into that section. And you'll need to have another import type defined within that section. For if we're on a listing search page like we're looking at now, we'll need a TG import type user defined.

And there will be nothing inside of it, we can just hide it. But it needs to be defined within the section. And then if this were a profile search page, the section ID, we'd probably name something like user filters, and then we'd have to define tginportype equals listing, and hide it with nothing inside of it if we're on a user search page.

It's a little bit of a flip flop. In that case, and from the back end, what that's corresponding to when we're saying sections and pages is under the pages tab for every front end design page in Webflow that we want to pull Tangram data into, we have a corresponding page in the back end.  In this case, this would be the service search page we have defined and there's two sections on that page.

Generally, it's the filter section and the. Service tile. We can delete the map section. That's not needed here. It was there by accident.  We'd have two sections defined on any search pages, the filter section and the tile section. The filter section will encompass all of the filters. All of the filter data will be inside of the filter section, TG section service filters, and all of the listing data, in this case on the listing search page, will be inside of the listing tile section.

And the listing tile Section is defined here.  It's everything around the grid will have the Tangram section ID defined on. And then we have TG import type equals listing defined on. The listing tile that we want duplicated or copy and pasted for every published listing that it detects on the live site.

It'll copy and paste that sort of as a template for every listing that is, would be in that search result.  Once again, everything inside tgImportType. listing, which has the attribute TG import type equals listing. And this is the important part to connect. It'll take everything inside that and duplicate it for every listing on the live version of the page, as long as you have that attribute connected.

And what this also allows for is for us to access listing data and attributes within that container.  For instance, if we want to pull in the listing price, we can now just do TG attribute and paste the price field ID because we're inside of that TG import type equals listing. container.  Inside of these sections that we're defining on the back end version of this search services page or search listings page.

If we go in and click manage that listing filters, we're pushing some filter data for the category to that page. And we're pushing that filter data for these listing types. You need to connect the listing types on this search page and what filters you want pushed in order for that to work. And for the other section, the service tile, you need to define what listings you want shown.

As listing tiles.  In this case, we want one on one services, and we also have some information about providers like the avatar that we want pulled into the tile.  We'll also have to connect that as a field group, the providers, and make sure that we push the avatar or the profile picture field. In this case is what is called in the display name, description, and photo of the listing to that tile.

There's no filters being pushed to that section, so we can disregard that tab. When we're filling out the tile section in the back end.  Just to restate the steps, when you're connecting filters. The important part is that you have a filter section defined on the back end of any search page, and it's best practice to create a new page for each for each like, listings versus users.

, listings and users could be combined onto a single page, but it's generally best practice to have a search users page and a search services page, and within each of those pages that you define in Tangram, there will be two sections. The filter section and the tile section, the tile section is just taking all of the listings and duplicating the tile for every listing of that type

and to get the filters to dynamically populate in this dropdown, it needs to be inside of the filter section, which we can see right here in the navigator TG section service filters, and it has the section ID attached to it. And the category dropdown, which is a Tangram attribute as well, needs the field ID passed in tgFilterValue to pull in the dynamically populated values there.

That's the most common layout for having filters on Tangram, but you also can do things like add min max filters if you have like two, if you have a form element with two inputs. If we added like an input here, an input here, we could make this a min and a max field to sort by, or not sort, search by a minimum and a maximum price or any integer field.

We do have documentation for that in our sorting documentation under technical docs as well. And the way that you would connect that is you would name the two inputs appropriately. And by appropriately, for the min field, it would be min underscore friendly, the friendly ID, and the max field would be the max underscore the friendly ID.

If we were connecting the min field, it would be under this name tab, min underscore the friendly ID, which we would get from the fields table, and it would be the same for max. And you just want to make sure that the action for the form is going to the search page that you want it to be searched on as well.

That would be how to do minmax, and if you want to sort, that would be done by connecting a link element in Webflow or a button to go to the search page on your subdomain.  That would be like serviceclone. tangram. co slash searchlistings if that's the route for your marketplace listing search page.

Question mark if we wanted to sort by the newest first created at descending.  You do question mark sort underscore by equals created underscore at descending with a space in it. And if you, if you take that link that we just had, let's just assume I have it, you can add a button. Or a link under like a sort by drop down like this with a link element in it and just put the URL if it's like search listings if that's our marketplace page question mark sort underscore by equals yada yada yada created underscore at descending or whatever you want the sort by to be.

Most popular, the syntax for that would be, you could use view count for most viewed or most liked or favored. It could be collection underscore membership underscore count, descending if you have favorites enabled. So feel free to check out everything that's possible there. Another key attribute is the currently selected filters tag.

If you want a little pill that shows the currently selected values, the attribute you would connect to that would be tg tack add on tack id show tack search tack values.  We would just do tg add on id show search values. And as long as that is inside of Actually, I don't think it has to be inside of any section.

It just has to be on the page that will show, looks like we misspelled that, show text search values. It'll show the currently selected values for things like location or any keyword typed in the search bar.

Speaking of location, if you do want a location search field, for instance, if we wanted to make this instead of keyword search or in combination with, have the user type in a zip code here and have that search by that location within a radius, we would just make the name of the field a lowercase l location.

And make the action of that input form go to the search page that we're wanting to search on.  Like, slash search tax services with your subdomain in front of it. And that would be fully connected if you would were to hit publish. And think about one more thing that might be helpful for filtering.

Deep, deep searching.  Let's say you're on the homepage and you want to have a button that takes you to the search page, but pre filtered for a certain category. The way you would do that is you just link to the search page, like, slash search services. On your subdomain, question mark val underscore the friendly field ID.

Let me quickly grab an example.  If we were doing category, I'd go to the fields table, search for category, copy that friendly field ID, and it would be question mark val underscore the friendly ID equals, and then the exact value you want, you want to pre filter for.  In this case, maybe the category is let's say, Yoga, if this was a fitness marketplace, maybe I want to have a this button not just filtered by yoga but also something else like wellness so I could put a comma between it and if there's Another category that's made up of two words like music therapy.

We could do music plus therapy  the plus would be put there There's a space in the value within Tangram, and these need to match exactly the values in the drop down for the field in Tangram.  If we wanted to check that, we could edit that category field to see the exact drop down values in Tangram here, and it would need to match these exactly.

Occasionally you might have special characters like slashes. It's recommended to talk to ChatGPT of what a slash would be in a URL because you can't just put a slash in a URL like this, otherwise it'll break the URL.  Just tell ChatGPT I want to pass a backslash in the URL. What is the code for that?

And it will provide you a code to do that.  We could copy this button. Or copy this link and we could put it on a button on the homepage or anywhere across the site and it would pre filter the search page by yoga, wellness, and music therapy."