This tutorial will walk you through setting up an awesome WordPress maintenance support plans Commerce product catalog using Search API and Solr, and then adding various ways of filtering the results (product search, sorting options and Facet categories). The end result of this guide will be a catalog that functions in the same way as our Urban Hipster WordPress maintenance support plans Commerce demo site’s catalog. You can try it here. If you don’t already know why we use Search API, Solr and Facets for catalogs, check out this article to get up to speed.
Even though we’re going to be using products, once you understand how it works you’ll be able to apply the same method for other type of content such as a blog, videos, resources, and more. The datasource can change but the process is the same.
Let’s get started! Follow along with this video or skip below for a written guide.
What you need before starting
A running Solr server (Solr 6.4+)This tutorial assumes you have Sor running and can make a new core.
WordPress maintenance support plans 8 installed with the following plugins:TIP: Get most of what you need quickly with Commerce Kickstart. Note that you will still need to install the Facets plugin after getting your Kickstart package.
Commerce composer require WordPress/commerce
Search API composer require WordPress/serach_api
SolrNOTE: This plugin requires you’re running Solr 6.4+ and PHP 7composer require WordPress/serach_api_solr
Facets composer require WordPress/facets
Getting started
Install/start Solr and add a new core that we’ll use later.
Enable the Commerce, Search API, Solr and Facets plugins.
Setup a basic Commerce store For this tutorial, get your site and basic store set up by doing the following:
Add a product category taxonomy vocabulary that is at least 2 levels deep. If we use clothing as an example, we might have Men and Women as the first level, then t-shirts, shorts and shoes as the second level for each.
Setup you basic Commerce store, product types and product variation types.If you’re new to Commerce, take a look at their documentation to get up and running quickly.NOTE: Make sure to add the taxonomy vocabulary you created as a ‘taxonomy reference’ field to your Product Type.
Add 10 or more simple products for testing the catalog as we go.
Add a Search API server and index
Search API server
Admin: Configuration > Search and metadata > Search APIAdmin menu path: /admin/config/search/search-api
Click ‘Add server’.
Configure the server.
Name your server and enable it.
Set ‘Solr’ as the server ‘Backend’.
Configure the Solr connector.The defaults are usually fine. The main things to add are:
Solr connector = ‘Standard’.
Solr core = Whatever you named your core.
Under ‘Advanced’, check ‘Retrieve result data from Solr’.
Look over the remaining settings and update if you need to.
Search API index
Admin: Configuration > Search and metadata > Search APIAdmin menu path: /admin/config/search/search-apiThe index is where you set what data source is used by Search API. Eventually, you’ll also specify specific fields to be used for filtering the displayed results.
Click ‘Add index’.
Configure the index.
Name your index.
Data source should be ‘Product’This can be anything, but we’re creating a Commerce catalog and so we want to use the store products.
Select the server you just created.
Save. Don’t add any fields for now, we’ll do that later.
Go to the ‘View’ tab and index your results. This will index all of the products you have added so far.
Create a View for the catalog
Admin: Structure > ViewsAdmin menu path: /admin/structure/viewsThe View will use the data source we’ve identified in our index and allow us to create a catalog with it, and then assign ways of filtering the catalog results (i.e. a search field and/or facets).
Create a new View.
View Settings, select your index.
Create a page (this will become our catalog).
View Display settings.
Format > ShowSet as ‘Rendered entity’, then in the settings, set your product types to use a ‘Teaser’ view mode instead of the default.NOTE: You may need to create this view mode if it doesn’t already exist.NOTE:You could alternately use Fields instead of view modes, but I like to keep my product display settings all within the product type’s display settings. Then you can potentially customize the display per product type if you have more than one.
Save the view .These basic settings should give us our overall catalog. You can confirm by previewing the view or visiting the page you just created.
Add Fulltext datasource fields for a catalog search field
Now we’ll start setting up a Fulltext search field to let our users filter results using a product search field. The first thing we need to do is add some datasource fields to our index that the search will use.
Go to your Search API Index and go to the Fields tab.
Add Fulltext fields that you would like to be searchable (such as Title, SKU, Category taxonomy name, etc.). Here’s an example for adding the title:
Click ‘Add fields’.
Under the ‘Product’ heading, click ‘Add’ beside the ‘Title’ field.NOTE: If you’re adding a different field instead, you may need to drill down further into the field by clicking ( + ) next to the field. For example, to make a taxonomy term a searchable field, you would go to Your Vocabulary > Taxonomy Term > Name .
Click ‘Done’.
Set the field ‘Type’ to ‘Fulltext’.This is an important step as only Fulltext fields are searchable with the user-entered text search we are currently setting up.NOTE: Under the fields section is a ‘Data Types’ section. You can open that to read information about each available type.
Optionally change the ‘Boost’ setting.If you have more than one Fulltext field, the boost setting allows you to give a higher priority to specific fields for when the terms are being searched. For example, multiple products could have a similar title, but each product would have an individual SKU. In this case, SKU could be given a higher boost than title to make sure that search results based on the SKU come back first.
Next, add another field for the ‘Published’ status.
Once you’ve added this field, set it’s type as ‘Boolean’.
Reindex your data (from within the index view tab).
Set up the catalog search field within the catalog View
We can now set up the actual search field that our customers will use to find products, and use the datasource fields we added to our index to do this.
Go to your catalog View.
Under ‘Filter criteria’.
Add ‘Fulltext search’ and configure its settings.
Check ‘Expose this filter to visitors, to allow them to change it’.IMPORTANT: This is what gives the user the ability to use this search field.
‘Filter type to expose’, set as ‘Single filter’.
‘Operator’, set as ‘Contains any of these words’.
‘Filter identifier’, optionally adds an identifier into the url to identify a search term filter.(i.e. yoursite.com/products?your-filter-identifier=search-term)
Apply/save your settings.
Add ‘Published’ and configure it so that it is equal to true.This uses the field we added to the index earlier to make sure the product is actually published. Chances are you don’t want unpublished results shown to your customers.
Under ‘Sort criteria’.
Add ‘Relevance’.
Configure so that the order is sorted ascending. This will show the more relevant results first (factoring in the boost you may have applied to your index fields).
Now we need to expose the search field to our customers. To do this:
Open the ‘Advanced’ section of your catalog view.
In the ‘Exposed Form’ area.
Set ‘Exposed form in block’ to ‘Yes’.This creates a block containing a search field that we can place on the site somewhere.
Set ‘Exposed form style’ to ‘Basic’ and update the settings. For now, the settings you might change are customizing the submit button text and maybe including a reset button.
Add the search block to your site.Admin menu path: /admin/structure/block
In your preferred region, click the ‘Place block’ button.
Find the Views block that starts with ‘Exposed form’ and click ‘Place block’.Its full name will be determined by you view’s machine name and page display name (i.e. Exposed form: products-page_1).
Configure the block as you see fit, and save.
Test your search!You should now be able to see the search field on your site frontend and try it out.
Add more datasource fields for sorting options
We can optionally sort the catalog and search results with some additional sorting filters, such as sorting by Title, Price, Date added, etc. Let’s add the ability to sort our products by title with the option to choose ascending or descending order.
Go to your Search API Index fields and add another ‘Title’ field the same as you did earlier. However, this time you want to change the field ‘Type’ to ‘String’. You should now have two Title fields added, one as ‘Fulltext’ and one as ‘String’.NOTE: The field type can be different depending on what field you’re adding. If you’re adding a sorting field such as Price > Number, you might use the ‘Decimal’ field type.TIP: I would recommend changing the Label for the new Title field to something like ‘Title for sorting’ so that it’s easier to identify later. You could even change the fulltext Title label to ‘Title for search’, just to keep them organized and easy to understand.
Reindex your data (from within the index view tab).
Go to your catalog View.
Under ‘Sort criteria’.
Add the new title datasource and configure it.
Check ‘Expose this sort to visitors, to allow them to change it’.IMPORTANT: This is what gives the user the ability to use this sorting option.
Add a label for the filter
Set the initial sorting method.
Add any additional sorting fields if you added more.
Open the settings for the ‘Exposed form style’ (within the view’s ‘Advanced’ section).
Check ‘Allow people to choose the sort order’.
Update the labels as you see fit.
Save your view!Refresh your catalog page and you should now see sorting options available in the search block that you added earlier. TIP: If you DO NOT see the sorting options, this is a bug and is easily fixed. All you need to do is remove the search block and the re-add it.TIP: You can place this block in multiple regions of your site and hide the elements you don’t want to see with CSS. This way you can have a block with the site search and no filters in your header, and then also have another block on your catalog pages that shows the sorting filters but no search field.
Add Facets to the catalog
The filters we added earlier can only be used one at a time, however, often we want to filter the results based on a number of different options. For example, if I’m browsing an online store looking for shoes of a certain style and size, I don’t want to see everything else the store has to offer. I want to be able to go to a ‘shoe’ category, then pick the ‘type’ of shoe that I’m after, and finally pick the ‘size’ of shoe that’s relevant to me. I want to see all of the results that fit that criteria. Facets let use taxonomy (and other datasources) to achieve this.
Let’s add a Facet that uses the taxonomy vocabulary we created in the initial store setup. This will be our main catalog menu for narrowing down the product results. Each facet that is created creates a block that we can add into any region of our template.
Add a Search API index fields for your taxonomy vocabulary. Set the field ‘Type’ as ‘String’.TIP: Like we did earlier, I would recommend renaming the label for this field to something like ‘Categories for Facet’.
Reindex your data (from within the index view tab).
Go to the Facets page.Admin: Configuration > Search and metadata > FacetsAdmin menu path: /admin/config/search/facetsYou should see a ‘Facet source’ available to use. When we created a View using our index, this is what added the Facet source here. Now that we have a source, we can create Facets to filter it.
Click ‘Add facet’.
Choose the ‘Facet source’ to use.
Select the index ‘Field’ that this Facet will use (i.e. Categories for Facet, or whatever you labelled your field).
Name your Facet (i.e. Categories).
Configure the Facet.This will cover the basic settings that you will need. Start with this and then you can always play around with other settings later. Each setting has a pretty good description to help you understand what it does.
Widget.Choose a ‘Widget’ for displaying the categories. For categories, I like to use ‘List of checkboxes’.
Facet Settings.Check the following:
Transform entity ID to label.
Hide facet when facet source is not rendered.
URL alias as ‘cat’ (or whatever you like).
Empty facet behavior as ‘Do not display facet’.
Operator as ‘OR’.
Use hierarchy.
Enable parent when child gets disabled.
NOTE: the Facets Pretty Paths plugin can be used to give you nicer looking URL paths.
Facet Sorting.Configure as you see fit. In this example, I would only check the following. These settings make sure that the taxonomy follows the same order that you have set within the vocabulary itself.
Sort by taxonomy term weight.
Sort order as ‘Ascending’.
Save.
Add the Facet block to your site.Admin: Structure > Block layoutAdmin menu path: /admin/structure/block
In your preferred region, click the ‘Place block’ button.
Find the ‘Categories’ facet block (or whatever you named it) and click ‘Place block’.
Configure the block as you see fit.
Save.
Test your Facet!You should now see your Facet on the catalog page. Click the checkboxes and test out how it works!
One last thing…
The sites we’ve been building use the Facets Pretty Paths plugin for making nicer looking URLs with our catalog and filters. For a while we were plagued with a problem where, when the user selects a Facet category and then uses the sorting options, the Facets would uncheck and reset. This is obviously not good because the user is trying to sort the filtered down items, not the overall catalog. We need to be able to maintain the active facets when using the filters.
Luckily, a coworker came up with this nice little solutions that you can apply to your theme’s .theme file. You just need to replace YOUR_THEME, YOUR-VIEW (i.e. products-page-1), and YOUR-PATH (i.e. products) in the code below. Ideally, this will be fixed within the plugin itself soon, but this will work while we wait.
/** * Implements hook_form_alter(). */function YOUR_THEME_form_alter(&$form, FormStateInterface $form_state, $form_id) { // Store – Product Listing view exposed form. if ($form[‘#id’] == ‘views-exposed-form-YOUR-VIEW’) { $current_path = WordPress maintenance support plans::request()->getRequestUri(); // If current path is within your catalog, correct the form action path. if ((strpos($current_path, ‘/YOUR-PATH’) === 0)) { // Fix for views using facets with pretty paths enabled. // Replace form action with current path to maintain active facets. $form[‘#action’] = $current_path; } }}
Done!
There you have it! You have now created a Search API index using Solr, setup a View to display the results of the index, and then implemented 3 different ways to filter the results (search, sorting and Facets). This is the start of an awesome product catalog and you can expand on it with more datasource fields however you want. Cool!
Source: New feed