Frontend filtering with brand widgets based on the selected category in Magento
Implementing category-based brand filtering for enhanced user experience.
Introduction
Adding brand filtering to frontend pages based on a selected category is a powerful feature that improves the user experience while also providing a structured way to manage brand visibility. This implementation allows customers to filter products by brand, ensuring a seamless navigation experience. By filtering brands based on the selected category, users can quickly find products that match their preferences, improving both visual clarity and usability. This approach simplifies the shopping experience by offering a more intuitive navigation flow, allowing customers to access products of a particular brand without unnecessary scrolling or searching.
Implementation Overview
Migrating Brand Attributes
The brand attribute was defined as a swatch-type attribute, and its values and images were migrated from Magento 1. This ensured consistency in branding across the platform. The migration process involved extracting the brand data from Magento 1's eav_attribute table and mapping it to the new structure in Magento 2, keeping associations with products.
Widget Creation Workflow
Adding a Widget
- The admin user initiates widget creation
- A form appears prompting for the widget name and the target category
- A dropdown search helps select the appropriate category from a structured list
Saving and Editing
Upon clicking "Save and Continue," the page remains open, transitioning into the edit mode.
- In the edit mode the category field becomes disabled to prevent changes, ensuring that brand selections remain relevant to the initially chosen category.
- This restriction avoids conflicts and ensures that brands are only associated with their intended categories.
Adding Brands
- Clicking "Add Brands" button opens a modal displaying brands specific to the selected category.
- A collection of brands is retrieved using six table joins to extract brand attributes (name, ID, and thumbnail).
- The query is optimized to ensure minimal performance impact on the database, using indexed fields for faster retrieval.
- Only products visible in the catalog and search are considered, preventing broken links to empty pages.
- The modal includes a search feature for quick brand selection, enhancing usability for administrators.
As an admin user, the functionalities are designed to be also intuitive. You can easily add a new brand widget, or modify an existing one to include new brands. The interface also allows for the deletion of brands, ensuring full control over the content. Additionally, the grid that displays widget data offers advanced filtering options, making it simple to manage and organize the brand information efficiently.
Database Structure
To enhance data management and accessibility, two tables were introduced:
- brand_widget: Stores widget metadata, including the selected category and display settings.
- brand_widget_items: Manages brand associations for each widget, linking them to the selected category.
This separation allows for efficient querying and modifications, making it easier for administrators to manage and update brand lists from the Admin Panel.
| Coloană | Tip | Comentariu |
|---|---|---|
| entity_id | smallint(5) unsigned | ID, Auto Increment |
| category_id | int(11) | Reference to Category Id, Default: 2 |
| name | varchar(255) | Widget Name |
| created_at | timestamp | Created At, Default: current_timestamp() |
| PRIMARY KEY | entity_id | Primary Key |
Tabela: coldo_brand_widget
| Coloană | Tip | Comentariu |
|---|---|---|
| entity_id | smallint(5) unsigned | ID, Auto Increment |
| widget_id | smallint(5) unsigned | Reference to Widget Id |
| brand_id | int(11) | Reference to Brand Id, Default: NULL |
| position | int(11) | Position, Default: 0 |
| created_at | timestamp | Created At, Default: current_timestamp() |
| PRIMARY KEY | entity | Primary Key |
| UNIQUE KEY | widget_id, brand_id | Unique constraint for widget_id and brand_id |
| FOREIGN KEY | widget_id | Foreign Key referencing coldo_brand_widget(entity_id), ON DELETE CASCADE |
Tabela: coldo_brand_widget_items
Frontend Integration with Page Builder
Customizing Brand Display
Within Page Builder, admin users can:
- Add a Brands section as a new content block
- Choose display mode: Grid or Carousel
- Select the specific widget and limit the number of displayed brands
- Adjust visual styles such as layout spacing, font size, and thumbnail dimensions for better alignment with the store’s theme.
User Experience
On the frontend, from a customer's perspective, navigation becomes more intuitive as the thumbnail of each brand is displayed, making it visually intuitive and pleasant. Clicking on a brand's thumbnail directs the user to a page destined only for the products that belong to the selected category and brand, simplifying the shopping experience.
Impact of Category-Based Brand Filtering on User Navigation and Admin Control
This approach not only boosts user interaction by simplifying product discovery but also keeps the browsing experience clear. For admins, brand widgets provide a tidy system for managing brand visibility. Admin users can easily create, change, and improve widgets, with the ability to add or remove brands as needed. This flexible control allows businesses to quickly adjust their branding efforts, ensuring product display matches marketing aims. The outcome is a balance between user access and backend management efficiency, enhancing overall satisfaction.
This bar chart illustrates the impact of category-based brand filtering on user experience and administrative capabilities in Magento. The percentages show user engagement, admin control effectiveness, ease of product discovery, and visual clarity, highlighting how well the brand widgets contribute to improved navigation and management.
Conclusion
This implementation links the gap between technical efficiency and user experience. By structuring brand filtering around category-based widgets, customers can effortlessly browse products, while administrators maintain control over brand visibility through an intuitive interface. The structured approach to data retrieval and frontend rendering ensures scalability, allowing businesses to expand their product catalog without compromising performance.
