How to connect user or listing search pages/directories in Webflow and Tangram

‍

Summary:

1. Create Pages:
   • In Webflow: Design a new page using the “+ New Page” button.
   • In Tangram: Navigate to the "Pages" tab under the wrench icon and create a corresponding backend page.
2. Connect Pages:
   • HTML Template URL: Publish the Webflow page and copy its live URL. Paste it into the "HTML Template URL" field in Tangram.
3. Define Sections in Tangram:
   • Filter Section:
     • Assign filter values (e.g., categories) using the tg-section-id and tg-filter-value attributes.
     • Include a hidden tg-import-type attribute (opposite the page type, e.g., user for listing pages).
   • Tile Section:
     • Wrap listing tiles in a tg-section-id attribute and define tg-import-type as listing.
     • For mixed data (e.g., user info within listings), nest specific tg-import-type wrappers.
4. Push Data:
   • Specify field groups (e.g., title, photo, avatar) for each section.
   • Use the Tangram admin interface to define and connect data fields.
5. Set Navigation Links:
   • Use Tangram’s friendly route (e.g., https://app.yourcomany.com/search-listings) as the URL for buttons or navigation links on your site.

By ensuring proper setup for front-end and back-end pages, defining sections and data fields, and linking pages, the search functionality will integrate seamlessly.

‍
Video Transcription:

" Hello, in this video, we'll be covering how to connect search pages in Webflow in the process for that. So the first step is always creating the page in Webflow and the corresponding backend page in Tangram.  Within Webflow, you'll create a new page by clicking the plus new page button and designing the page as you see fit.

And then in Tangram, that would involve going to the pages tab within the admin account, which is underneath the wrench icon. It's the first tab and click a plus new page if you don't already have. And then we have a corresponding page for the page you want to connect. And in this case, we will be connecting a listing search page.

Like the service search page, once you have the front end page created and the backend page created, you want to make sure that all of the tabs are filled out in the backend of Tangram.  We need to get the HTML template URL. What does that mean? It's the URL of the page you want to connect from Webflow.

In Webflow, we would get that URL by clicking the publish button while being on the page we want to connect and clicking the little arrow to copy the live version or URL of the page. Then we would paste it into that HTML template URL field. Once we have that we would hit save. And we would, we would define the sections and the data we want to send to the page on Webflow.

From Tangram. There's two sections that you need to define on search pages, the filter section and the tile section. On listing search pages, the filter section will probably have listing data, and that's it.  You just select under the plus new button on the pushed field groups tab for that section, which listings you want to be able to filter.

And under the push filters. tab, you'd select which drop down values you want to automatically pull in filters from.  In this case, maybe the category field, we want to be a filter on the search page, as is shown here. We would pop open that drop down and we could connect the category fields and pull them automatically from Tangram if we have the attribute tg-filter-value = {field_id} and the friendly field that you connected there.

But the important part is that you have A section around all of the places you're pulling in filter values with the attribute tg-section-id = {section_id} and the ID of the section that you're connecting.  If we go to the services search page, the section tab, you can copy that TG section listing filters ID and paste it on the div for  the tg-section-id = {section_id}, which is a div around all of the filter value information you wanna pull in.

just basically around all the filters on the page. And one caveat, one little quirk that you have to include is you have to define an import type within all sections on Tangram. And even though we're not pulling in listing data or user data, just filter data, just create a div inside of that. filter section where you define the import type that is opposite to the type of page you're working on.

It's a little bit confusing, but in this case, we're connecting a listing search page.  The import type we'll need to put inside of the service filters section would be a user, tg-import-type = "user"    information needs to be defined somewhere.  We just put it on an empty div and hide that div. And by put it on, I mean connect the attribute tg-import-type equals user, and just hide it.

This is a listing search page, so we have to define tg-import-type = "user" inside of the filter section. Now if this was a user search page, this would be tg-import-type = "listing".  Just a little quirk probably the most confusing part about connecting the search page in Tangram, but an important piece to mention nonetheless for now.

Now the second section, that represents the tile information here, and by tile I mean this little information of listings that will be copy and pasted and duplicated for every listing that shows up on the site.  We refer to this that I'm copy and pasting as the listing tile. And as long as you have this section as a div defined somewhere around that grid of Listings and the attribute TG section ID equals the service tile id, which we can copy from here and paste in there.

And then have the import type defined somewhere within that section ID div, and this would be listing information.  We want to define TG import type listing inside of the service tile section. And the TG import type equals listing attribute would be added here on the bottom right hand side of the screen.

That allows us to pull in listing data inside of that TG import type equals listing. wrapper.  Now we can attach tgAttribute equals like photo or price or whatever field you want connected about the listing inside of there. Please keep in mind if you do have user info inside of the listing the service tile section inside of the listing import type, you have to have tg-import-type = "user" wrapped directly around any user information.

If we're connecting the profile picture here, We need to have tg-import-type user wrapped around that element to let Tangram know it's user information we're pulling in, not listing information, because it's already inside of the tg-import-type listing container. And just to reiterate, everything inside of the tgimporttype listing will be duplicated for every listing that is detected on the search page.

And lastly, what types of information do we send to that service listing tile section and how do we determine that? You'd click manage, define the field groups by looking at your design and saying what types of information do we want inside of This tile section, it looks like there's some listing info and also some user info, like the profile picture.

We would need to connect one on one services for the service listing page and also provider info because we need their avatar or profile picture. And then we would push the individual fields we want to connect inside of that. that tile section, like the title, the photo, the avatar, maybe any tags, and we define that using the plus new button.

And as long as all of the pages are created, both the front end page in Webflow, which is this page, the back end page in Tangram for the search services page, which is right here, and you have all of the links set, like the Webflow link here, you have the sections defined, the two sections, filters, and the tile section, and then you have inside of each section the fields defined.

of what data you want to send or filters to each section in the field groups. The last thing you have to do is from the basic info tab you want, or not the basic info tab, the search pages tab, you can find the friendly route for that page, which is the Tangram version of that page, which is currently just Your subdomain slash search tech services and you need to set that in any of the tabs where you want to link to the search page.

This would be this friendly route is the thing you want linked in all the nav bars or across your site on pages on the home page. If you want a button to send people to the marketplace or search services page, this would be the URL right here that you want to send them to."