Faceted Search Implementation in Drupal

all right oh stage good and i go to okay all right and there we go okay so i'm gonna wait a couple minutes wait for everyone here to join all right all right we have pablo we have devin we have bill pablo thank you for joining twice i'm told by my colleagues that i have a tendency to do that all right i'll give it uh another minute and then we'll get started here okay all right okay okay so today's talk is going to be on faceted search in drupal all right first of all about a little bit about myself i'm brad i've been crafting software solutions for about the last 20 years i now run agility solutions uh along with a number of colleagues you might have met already although i started and run the company i've actually always been and always will keep my head in the code i find that to be very very important as we um in terms of making business decisions that rely on technology advising clients and uh and uh keeping the process tight uh of course managing the software development process especially on a budget can be very challenging so uh so i i keep my head i keep my hand in all aspects of the business um i'm also a cpa i have a master's degree in software engineer cpa being an accountant by the way in in in american parliament um i have a master's degree in software engineering from harvard and my bachelor's degree was in psychology so after i finish this technical talk i'm happy to hear about your personal technical or tax problems a little bit about agility solutions we're an award-winning team of drupal experts uh world-class designers creative marketers and web developers um we work with uh mobile applications uh web applications uh uh e-commerce we're doing a huge amount of b2b e-commerce lately our clients include both very large and very small organizations in fact our first client that we cut our that we cut our teeth on was microsoft providing management consulting services as well as development services to them we've done websites for uh for a few fortune 500 companies as well as just you know small startups uh some of them in silicon valley some of them some of them uh in arizona throughout in and throughout the country uh we're also a two-time award winner uh the ac we engage uh best return on investment award which means that we provide a lot of value to our clients and might consider raising our rate someday just kidding so today's talk is going to be about faceted search um first of all we have to define it it's a fancy term for a simple concept which again is uh not so simple to implement all the time um the good news is drupal actually exposes some some great tools to make it make it work with lots of moving parts so that we're going to review the modules and prerequisites for implementing faceted search in a drupal environment and then this being a live demo i'm going to actually build a faceted search page for a 35 000 product catalog before your very eyes showing all the steps and all the all the pieces that go into it and then we're going to and then i'll time allowing i'll also go through some performance optimization options uh and some uh some other you know more advanced opportunities to uh to optimize the user experience uh and the uh and the performance of those those pages all right so let's dive into it first of all what is faceted search uh think about search with all the little check boxes on the left so um so amazon of course famously uh uh has uh uh when you get into their search pages uh they have a whole bunch of different kind uh different ways to navigate the products at different levels and layers um and uh then we'll also also put a quick walk through of a search page that we did for a client so uh so for amazon wherever there we go uh so in amazon of course we got a search page very simple uh bike light uh it's getting darker out there and uh i need a light for my bicycle so i can bounce through the mountains of phoenix uh before the sun rises and uh and you can filter your brands clicking through them you can see you can you can have different kind of and or functions there you can have range functions there you can have a layered search functions there and in fact the uh drupal faceted search uh has configurations to uh to uh actually handle all of these so um and then uh and then i'll show you a little bit of a simple uh a faceted search that we created for client of ours uh this is helmer scientific uh this company create uh just to give a little bit of context this is a healthcare company uh they build refrigerators that have you know for the healthcare industry which have multiple redundancies so imagine storing a lot of covid vaccine a lot of that is do or die if it goes bad then then people can die so these people so helmer creates refrigeration systems with redundancies uh for the clinical and uh scientific communities uh where uh where these things are literally uh that people's lives depend on uh proper storage of uh of biological samples um so for this company we created a search page um it it has purchasable and non-purchasable products uh we'll primarily just show you the non-purchasable ones right now uh and then and then a faceted search so from the home page you can always jump in click on product and here you go and now we can filter through different products it's pretty quick and in fact our options uh change based on what's selected and uh and we're able to then we can also do keyword search so we do a full text search on the product um all right and there we go um so uh so it's a quick rundown and you can see that we have full text search we have a number of facets uh in this case each fuji is fastest is a taxonomy vocabulary which i'll show you um and then we have uh the search summary and then we have the product themselves which can be displayed in different ways this one's somewhat complex uh and we'll talk i'll try to get a little bit some of the theming concepts uh toward the end okay all right um so next um so now there's a lot of moving parts to this and so now i'm going to start walking through those first of all modules and prerequisites uh i hear that there's this wonderful uh uh tool called drupal so first of all we're gonna need that we've used this in drupal 8 sites it should work in drupal 9 there's no reason why it shouldn't however we have not tested it quite yet um on that on the ver on that version uh so so uh let me know if you guys know spin this up in drupal 9 and it works without a hitch then a solar search instance uh you're going to be searching in a lot of products right potentially so it's best to have a search server uh drupal of course integrates very well with solar now we use aqua cloud and aqueous search which is super easy to wire up but other options do exist then you have search api module that is that's the module that actually wires up the search functionality um uh the indexing and uh and and allows you to connect to solar uh then we have facets uh which enables those uh the faceted search and then we have depending on how you're doing some things you might use to use exposed filter blocks to control the rendering of the search uh search filters uh and then uh aqueous search which wires up the aqueous search uh feature with uh uh with the search api then you'll want to configure your favorite entity we use the drupal commerce a lot however you can use any fieldable entity type so if you're using content types that will work drupal commerce products anything that you need there um and so that works in fact the helmer site includes two separate search pages one for um one for uh uh drew for one for products and one for content so uh and then devel generate for uh for your demo purposes uh that's part of the devel project we use that to generate a whole bunch of products because uh uh goodness knows for this for this speech i did not manually enter 35 000 products so um any questions at all on the um uh on the modules anything else there all right awesome great okay so um uh so now uh as they say on all all of your kids toys on christmas some assembly required so now we're going to start walking through an actual implementation uh we're going to install we're going to show you the above modules installed uh we're going to configure the entity and show that show it set up then we're going to populate the entity data or show that and how that works using devel and then we're going to configure the api indexing and such so let's dive into it uh first step installing the modules and showing the modules installed so i'm going to actually go back and use it as a cheat sheet so first of all we're going to go to search api facets so i have a my demo site up here we extend it okay so facets boom facets and you can also see where you have a few a few additional modules you can activate summary is that that fancy chip that showed up at the top here sorry there we go so that that's the summary if you want to activate that um you can do uh there is a map widget for geospatial search pretty cool uh we have actually implemented that before and it was in a separate project and uh that gets pretty amazing um then we have the range widget um which is for of course doing those product range or those price ranges and such and then there's a separate module for activating a restful api that way you can actually use used faceted search with uh with rest which is very very cool uh we've actually used that as well so it's a lot of neat opportunities there okay next we're going to look at cheat sheet um so here we're going to go look at facets search api okay search api all right so we have our search api here again you can you know additional modules you can activate location location-based search things like that then then i'm not going to get into these optional ones right now because they're more specific but aqueous search that's a simple one all that does is it uh it it helps you set up your search index and i'll we'll get into that momentarily okay great all right so next we're going to configure our entity including including taxonomy vocabularies uh we are using drupal commerce for this one so we already have uh our product types set up okay so configuration products product types and we can manage our fields and you can see here we have a few fields this is pretty simple demo purposes um and and so we have a body we have our taxonomy field for categories which i'll show you uh basically checkbox we have our taxonomy field for uses so what the product might be used for uh we have a product image we have the store that's already set up and variations it's part of the product variations those are things that we that dive into other parts of commerce okay so now uh the other important key thing here this is the taxonomy vocabularies and so we have product categories you can see here and we have a few terms already populated awards coffee mugs monogram pens so on and so forth okay and same thing for uses uh things you might give awards out for bowling pinewood derby scouting so on and so forth okay all right so that's the basic setup the basic site building um and now we're going to get into populating your entity data so with this we're using uh develop gen so here in the devel module that's right i will show you develop generate okay and that way you can generate dummy data okay and so here we'll get into configuration development generate products okay and you'd do this do this okay 35 000 products okay and then you can set different for the product you can set price ranges uh date ranges um uh um uh so on and so forth that way you can you know set the parameters of the products that you're creating um and then you push go and it creates those products i'm gonna say spare you waiting for 35 000 products to be generated we actually already have them so uh so now we can go into our products and we can see we have all of our products here okay 50 per page we have 700 pages of them okay all right and of course this is all using greeking because we're generating the products um uh and and default fields to keep things simple all right great uh so now uh we have our our data populated we have uh the entity configured now we're going to get into the nitty-gritty of the search api uh so now what we're going to do we're going to configure the search api server and the index so now we go to configure search metadata search api there we go and here you can see we already have actually uh the aqueous stuff it actually wires up automatically when you activate modules however if we wanted to add a server server and and here you could either do a backend database i don't recommend it database indexing is very very slow uh and you'll hit a wall very quickly so we're connected to a solar server um and um uh on the solar server you can we of course have a connector for aqua uh that pretty much you usually don't have to do that if you're using aqueous search it wires itself up however we have basic author off and standard and with this you'll just set up the parameters of whatever your solar server is and get that working okay all right so once you have your server set up then you create your index okay similarly and i'm just going to edit the current one we have the index here and this is what we're actually going to be searching on all right now in the index you're going to configure your entity types one's going to be for this one content so that would be typical nodes and then the other we have is products that's the one we're actually going to be searching here then we configure the product data source select which bundles we'll be searching uh we can filter those so on and so forth and then finally we select the server we're going to set it up for okay and of course we have this one already configured so now that we have our index created now we're going to have to assign fields to it okay so now and i used to have a cheat sheet up here i'm actually going to go ahead and do that i had to restart my browser before right immediately before this started and it took away some of my cheat sheets so bear with me for 10 seconds here just divert your eyes pretend i'm not doing any of this all right there we go perfect great all right so now we're going to go into search api there we go our search index and fields okay now uh now you can look look at the screen again um so so now what we're going to do is add the um add the index fields to our search index uh of course this can be a little bit of a beast to navigate um but it's also very dynamic i mean you can dig into uh uh images and yeah and and things in a pretty good degree of granularity look at that we can go into the different fields and the different parts of the taxonomy terms uh but we're not going to do that we're just going to do it at a much higher level so the fields we're going to do we're going to index the body which is some text potentially categories the title and the uses okay i'm not sure if we're gonna get any data in the body but uh but we'll go through that exercise anyway all right great so now we have our fields here okay so now now we're going to set them up make sure we're indexing them for the right kind of search so we have the body there's going to be a full text search okay categories so categories and uses are taxonomy terms those are going to be identified by their ids so you're actually just all you're doing there is just uh indexing their integers and you'll see how those connect a little bit down the road and then and then finally we're gonna uh we're gonna index the title and we're gonna set that one to full text search as well okay all right save changes great okay so next we've got our uh our index fields okay then now we're going to index our entity data so now we go into our index yep we can see here now we have our index set up it tells us that it's connected that's wonderful um and we have zero of uh we have zero entities actually indexed here okay so now we'll start an index i usually try to keep the batches relatively small all right uh between 50 and 75 um and in fact i might just do yeah i'll just keep it at 50 okay and we'll push index all right great now it's indexing so now i'd like to take this time to talk a little bit about the election just kidding we're not going there uh so instead we're going to be moving on to uh diving into the uh [Music] creating the view that's going to take enough time to let this time out um so we're going to go to views keep this page up so we can keep an eye on it and in the views we're going to create a new view it's going to be a page view okay so here we go we're going to say product product search all right and there we go and now we're going to show are we going to show products no we're not showing products we're actually showing our search index we're actually searching on our search index so so we're going to select that then we're going to create a page product search is our path in this case we're going to display a grid however there are other options but for simplicity's sake we're just going to display a grid of fields and then we're going to have 30 pages 30 items per page okay we use a pager and that's about it again we all know drupal's awesome so the views also have potential rest export there we go and there's our search all right now we're going to add the fields to our search so we already have our body in there okay which i don't think there's actually any data in there um and now we're going to add our title and when possible we like to use index fields that way we're simply rendering directly from the index it doesn't have to go to the database and resolve it okay and sometimes it doesn't always work perfectly but but when we can we like to do that okay and we're going to link the title to the product and that's about it great and now add the remaining fields uh we're going to add product image all right there we are that's not indexed it is an image though so makes sense why and it's still very efficient to pull and render and then variations variations is important for commerce because when you when you buy something in drupal commerce you're not in the default configuration you're actually not buying a product you're buying a product variations the granular version of that product which includes all the pricing information the add to cart form and all of that stuff okay so now uh we're going to render our image so to do that we're going to use entity field mapping we're going to use a thumbnail format where we have a thumbnail image style okay and then we're going to link the image to the content to the product all right excellent next we have our variations variations we're going to display this is a commerce thing but display it as an add to cart form okay and we're going to combine order items containing the same product variation that way we don't cartesian out our our products and uh and have what seem to be duplicate products and then um and then we will uh yeah display all values in the same route so on and so forth oh yes zoom in so there we go there's a little bit more detail there okay i'm gonna make sure that i have this right while you guys take a look at that all right excellent okay great all right now i've got to zoom out somehow oh no okay so now we'll apply and there's our view okay there we go um and now uh now finally we're going to add our full text search [Music] okay so there we go full text search and here we're going to expose this filter okay and we're going to have a single filter full text search and then we get to select our the fields for it so we're going to have product body and product title that way we'll be searching over body and title indexed fields with the full text search okay all right and then that's about it okay there we are okay so now you can see we're it's kind of shaping up here we're seeing we're seeing what this is going to look like all right and then finally we're going to activate ajax so that the search is nice and snappy and live all right i think that's it so let's take a look oh i hate the mini pager there we go much better all right great all right so we'll save this and now we'll take a look at our search page product hyphen search product search all right and there we go nice simple product search uh we can actually and we can search it nice and snappy and so on all right so that's a simple search page next we're going to create our facets uh so uh so the next step uh now that we have the view created we have the uh everything is well a lot of things are indexed um and as you can see our index is complete uh now we're going to uh create some facets so configuration search and metadata and facets great okay looks like we have a question here um all right oh my gosh i think i've lost my window here um i am so sorry i can't find my hop-in window now oh there it is okay yes contextual filters with search indexes um yes uh contextual it is a view so contextual filters should work um when you one thing we have run into is when you do have complex forms depending on how the form is being rendered you might run into some uh some rendering issues um but uh yes contextual filters uh should work with your search indexes all right excellent uh so next um okay so uh so now we're going to dive in and create the facets so we go to facets okay and this is this is where it gets a little strange so now we have uh this is these are the different search opportunities or search view opportunities for for adding facets okay and what we're going to be using here is the search uh views page product page one i'm going to verify that actually uh product search advanced page one of product search yes we you know product search page one so it's gonna be this one right here okay so now we're just gonna note it we'll review the configuration which really is very simple uh uh there's not too much here um you can customize the filter key if you want uh and you can configure it for breadcoms which actually i just learned about about an hour ago um so now we can add a facet facet source uh view product search field and here we're going to select one of our taxonomies categories and then save all right so now we go into the facet configuration this can go in a whole bunch of different directions okay not a small configuration page so now what we like to do is a list of you can do a list of links do a list of check boxes a simple array of raw results that you if you want to render it yourself or a drop down so we'll do a list of check boxes which is what people typically associate with faceted search then we're going to show the number of results alongside each item okay lots of different options here you can go through and test and figure out what they do most important one though transform entity id into the label remember we indexed the id of the taxonomy term and uh of course that doesn't mean anything to anybody so if we check this it's going to resolve the label for the ant uh for the taxonomy term and uh we'll display that instead uh then finally we keep going here uh uh you can actually have uh you can actually have it limited so that you uh so you have uh display a more form uh so if you have a whole bunch of uh check boxes you can you know expand and contract it you can do and or searches we'll just do an or one right now but that can you know affect how how it limits your search items uh you know how it limits your uh products um so on and so forth and finally we can sort the facet and in other words sort the check boxes uh based on different um criteria um in fact this can cause them to jump around quite a bit and be confusing so but you can configure that here okay i'm just going to select the defaults boom all right so now we're going to do the same thing for uses so we products okay so now it's going to be insert uh product search and uses right and use this good and we select that and now we have a list of check boxes show the number great [Music] and then we can do transform the entity id and then here all right great okay so now our facets are created okay and the way that we place them on the page is by using blocks all right so uh in drupal of course we have all sorts of different ways to do page building uh we have um a layout builder we have uh panels um uh we have uh uh well those are the two that you would imagine using for this and i'm just going to say right now don't uh it's not going to work a faceted search really requires that we use the old fashioned drupal 5 block layout okay um so uh and so what we're going to do is we're going to take our search page and we have about five minutes left here take our search page we're going to add sidebars and we're going to add categories and there you go place that we're going to limit that to our search page so we don't want to show it on every page on the site okay in fact the other thing we're going to do i'll just leave that okay and then we're gonna do use this place that display title again we're gonna do the product search save and there we are so now we have our facets set up and they're going to show on that search page again this is the only way you're going to want to set this up um this is one of the big tricks that uh traps that people are going to fall into when they do this um so now go back to our search page reload the page and there are our facets uh we can show the number of items that we're filtering to for each item uh as well as results and our form okay and boom there we go um there we go so uh naturally so are there any questions at this point uh yes yes so the question is are there any particular pitfalls to look out for when you're implementing this for the full first time yes uh everything uh the key here is we you need to really follow these steps uh make sure that you are rendering the uh the view as a page uh views blocks you're gonna run and it'll look like it's working and then you're gonna run into problems so render the view as a page that's number one number two you're going to you you know you really need to use the old-fashioned drupal i think drupal 5 uh you know the early early drupal block layout means of laying out this page so you're going back to old school on this that that's what allows all these complex things to work together um so mine the steps when doing this and that's really why i'm giving this talk i find it worthwhile to do so because it's uh it was a lot of uh a lot of trial and error getting it to work okay um okay um any other questions from sales perspective uh well we can go and we'll go into commerce a little bit more so the question here is from a sales perspective uh why would we use drupal commerce versus shopify and it's a very good question there are um some excellent uh excellent differentiators there especially for given the industry that you're looking at i'm going to wrap i'm going to dive in real quick wrap this up and then i will i do want to circle back on that so finally this this isn't exactly pretty okay uh first the next step is gonna be the theme it uh we're not doing that here um however you can see that uh it can be themed it it also can be rendered as a and this is a themed version um it can also be rendered as a using rest and so you can uh you can decouple it uh and we have done apps where that has been decoupled and it works quite well and so uh so the key there is going to be to you know render everything well encapsulate your rendering code target your entities you know right you know rendered entities properly and then the other thing is you're probably going to want to set this up to render in view modes so there's a so when you render your view items you can render as fields or render is view modes rendered entities um so you're probably going to want to do that that's what we're doing here uh and that that that enables you to do much more complex layouts like this okay um and then and then uh in fact i think this is invalid but there is if you if you are using blocks for uh block display for your uh views you can use music exposed block filters however in this case what we can do is you know you can see the full text search is up here you'd probably want it up here well what you can do is expose the form in the block and then you can drop the block on that page as well and put it right above your your faceted terms and uh um and that creates that uh improved user experience of having the search up here okay um or you know other things can be rendered in other ways so yep and then finally think about how you want to page through your data so here we are using uh the uh [Music] you know the pagers the standard pagers however you can also do uh in infinite paging or infinite scroll or uh view more we usually for mobile friendliness we'll typically use either infinite scroll or we'll use a a view more button at the bottom uh which is much more mobile friendly okay um so uh how much time do i have left i usually have a time keeper here uh i think we're uh we're pretty much wrapping up okay are there any questions at this point awesome okay first of all i want to answer the i will circle back and answer the commerce versus shopify question so drupal commerce is uh we use it a lot so shopify is great for business b2c or business to consumer uh e-commerce it's because a b2c is a very standard simple uh business model uh standardized across uh you know you know the the swath of all retail um and that means that there's a lot of pre-built products out there that have some flexibility but sometimes that flexibility can be a little bit more limited and in modifications and customizations can be a bit daunting or expensive uh our experience working with the likes of shopify or uh or magento for that matter um um i uh we find that it's quite expensive to uh to truly use your imagination as a business person in creating okay i want a special kind of search for this and i want things filtered just like that um i want you know uh you know certain features i want to uh have uh you know purchased approval processes things like that that's where drupal commerce comes in uh if you're looking at a b2b business model something more potentially more complex uh where you really don't want to run into uh limitations in your platform uh in drupal obviously you've seen it happen we can uh we have fieldable entities you can add fields and write code against those fields we create uh any features that you could possibly want and uh while it'll often times require code it will uh take much less time and effort to modify than um uh then uh then some of the more i'd call the monolithic uh uh purpose-oriented uh e-commerce systems uh so that's one of the that's really why uh does that answer your question awesome uh are there any other questions here all right tick tock tick tock all right i'm just thank you very much uh so i want to say thank you all um have a wonderful rest of your weekend and uh feel free to reach out if you have any questions about this thanks so much so oscar thank you so much i appreciate it thanks guys have a great day

Channel: Drupal Camp Costa Rica

Views: 155

Rating: 5 out of 5

Keywords:

Id: nmUgBTy2hls

Length: 51min 18sec (3078 seconds)

Published: Fri Nov 13 2020