Hey @UboraGroup ,
Yes, you can definitely achieve a dynamic and interactive menu system using CSS, JavaScript, and Shopify’s metafields to create a dropdown menu for your Search & Discovery-powered navigation. This approach will help manage long lists of options while allowing customers to filter products based on their selections from the dropdown menus.
- HTML Structure for the Dropdown Menus:
You can create dropdowns for each category (based on your metafields), and use JavaScript to filter the other dropdowns based on the selection. Here’s an example structure:
- Populating the Dropdowns Dynamically:
You can use Shopify’s Liquid templating language to pull the values from the product metafields and create the options dynamically. Here’s a simplified example of how to populate the dropdowns with metafield data:
{% assign metafield1_values = product.metafields.custom.filter_1 %}
{% assign metafield2_values = product.metafields.custom.filter_2 %}
{% assign metafield3_values = product.metafields.custom.filter_3 %}
- JavaScript for Filtering Selections:
Now, you’ll need some JavaScript to dynamically filter the dropdowns based on the user’s selections. Here’s an approach where each dropdown is filtered based on previous selections:
document.addEventListener("DOMContentLoaded", function() {
const filter1 = document.getElementById("filter1");
const filter2 = document.getElementById("filter2");
const filter3 = document.getElementById("filter3");
// Function to filter options in dropdowns based on previous selections
function filterOptions() {
// Get selected values from the filters
const selected1 = filter1.value;
const selected2 = filter2.value;
const selected3 = filter3.value;
// Filter logic based on selected values
// Update options of filter2 based on filter1, and filter3 based on filter2, etc.
// For simplicity, assuming you have pre-defined data for filtering
const data = {
filter1: ["Option 1", "Option 2", "Option 3"],
filter2: {
"Option 1": ["Sub-option 1a", "Sub-option 1b"],
"Option 2": ["Sub-option 2a", "Sub-option 2b"],
},
filter3: {
"Sub-option 1a": ["Sub-sub-option 1aa", "Sub-sub-option 1ab"],
"Sub-option 2a": ["Sub-sub-option 2aa", "Sub-sub-option 2ab"],
},
};
// Update filter2 options based on filter1 selection
const options2 = data.filter2[selected1] || [];
filter2.innerHTML = '';
options2.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option;
optionElement.textContent = option;
filter2.appendChild(optionElement);
});
// Update filter3 options based on filter2 selection
const options3 = data.filter3[selected2] || [];
filter3.innerHTML = '';
options3.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option;
optionElement.textContent = option;
filter3.appendChild(optionElement);
});
}
// Add event listeners to trigger filtering
filter1.addEventListener("change", filterOptions);
filter2.addEventListener("change", filterOptions);
filter3.addEventListener("change", filterOptions);
// Initial filter load
filterOptions();
});
- CSS for Styling:
To style the dropdowns and the overall look of your menu, you can add some CSS to make the interface clean and user-friendly:
#filter1, #filter2, #filter3 {
width: 200px;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #ddd;
background-color: #fff;
}
#filter1, #filter2, #filter3 {
display: inline-block;
}
This method allows you to simplify your menu system significantly by using dropdowns instead of showing hundreds of options at once. The selections can be dynamically filtered based on what the customer chooses, making for a more intuitive and interactive shopping experience.
Let me know if you need any further clarification or help with the implementation!
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
