Welcome to the "Restaurant of Mistaken Orders"! 🍽️ Here, where unexpected combinations lead to delightful discoveries, today's special is a scrumptious walkthrough of an "external component" in Sitecore Content Hub. Our aim? To preset a search filter based on a user group.
Before we dive into the intricacies of our dish, allow me to present to you the recipe card. Our entire cooking procedure, ingredients, and secret techniques are documented in our digital cookbook, right here: Sitecore Content Hub External Component on GitHub. As we journey through this culinary adventure, we'll be referring to this repository. It's the source of our inspiration and the backbone of today's dish!
With that said, a quick reminder: our restaurant thrives on the unexpected. Just as you might find a sprinkle of chocolate on your spaghetti (surprisingly delicious), expect a blend of technical details, humor, and chef anecdotes as we delve deeper.
1. The Ingredients: Our TypeScript Files
To cook up our search filter dish, we have the following TypeScript files as our main ingredients:
FilterDictionary.ts: This is like our recipe book. It defines how each user group correlates to a specific filter.
index.tsx: Our main entry point, just like the kitchen's bustling center!
HideSearchFilters.tsx & AddSearchFilters.tsx: These are the spices and seasonings, handling how filters appear or disappear based on user actions.
FilterConfig.ts: Think of this as the kitchen's guideline – setting the configurations for our filters.
2. Cooking Procedure: How it Works
a) Determining the User Group
First, our code checks which user group the logged-in user belongs to. Using our FilterDictionary.ts, it then fetches the corresponding preset filter for that group. Just like how I, as a chef, would pick a unique seasoning for each dish!
b) Setting the Filters
With the preset filter determined, the code utilizes the components HideSearchFilters.tsx and AddSearchFilters.tsx to adjust the search filters accordingly.
For example:
This process ensures that the user sees only the search filters relevant to their group.
3. Sourcing the Secret Sauce: Fetching toFilterRequest Values
Here's where our secret ingredient comes in: the toFilterRequest values. But how do we source these?
Accessing Browser Developer Tools: Just like opening the secret drawer of spices, open your browser and head to the Developer Tools.
Navigating to the Network Tab: Within Developer Tools, select the "Network" tab.
Filtering for Fetch/XHR: Make sure you have the "Fetch/XHR" option selected.
Performing a Search: On your Sitecore Content Hub, perform a search. In the Developer Tools, you'll notice an entry titled "search" on the left.
Extracting the Values: By setting the filter, you can now extract the required toFilterRequest values to use in your code.
This is similar to how I sometimes peek into other chefs' recipes to find that perfect spice mix. 😉
4. Final Plating
With everything set, our user will now experience a search filter uniquely tailored to their user group. A delightful experience that ensures content relevance and reduces unnecessary noise.
5. A Chef's Note
Remember, just as in our restaurant, it's all about experimentation. You might not get the desired taste in the first go, but with a pinch of persistence and a sprinkle of creativity, you'll cook up a masterpiece!
Wrapping Up
Thank you for dining with us today at the "Restaurant of Mistaken Orders"! We hope this detailed walkthrough has not only satisfied your tech cravings but also added a hint of fun to your coding journey. Until next time, keep experimenting and happy coding! 🍲👩🍳👨🍳
P.S. If you ever want to try spaghetti with chocolate sprinkles, let us know. We're always up for culinary adventures! 😉
Full source code available here: https://github.com/RoelRoozendaal/ch-facets-for-search
Comments
Post a Comment