Scribd
Upload
5 views3 pages

Product Filter Button Implementation

The document provides JavaScript code to dynamically create filter buttons for product categories based on unique messages found in the product grid. It includes functionality to filter displayed products by category and a 'Show All' button to reset the filter. The buttons are styled with specific CSS properties and have hover effects for better user interaction.

Uploaded by

rakibhassan552
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Product Filter Button Implementation

The document provides JavaScript code to dynamically create filter buttons for product categories based on unique messages found in the product grid. It includes functionality to filter displayed products by category and a 'Show All' button to reset the filter. The buttons are styled with specific CSS properties and have hover effects for better user interaction.

Uploaded by

rakibhassan552
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

//manual

//inside the div with class ""product-grid", add the element "<div style="margin:
5px;" class="categories-for-filter"></div>" .
//Paste the JS code on Script snippet, then run and you are done!!

const productMessages = [Link]('.product-message');

const uniqueCategories = new Set();

[Link]((element) => {
[Link]([Link]());
});

const categoriesArray = [Link](uniqueCategories);

const filterContainer = [Link]('.categories-for-filter');

[Link]((category) => {
const button = [Link]('button');
[Link] = category;

[Link] = '8px';
[Link] = '12px 20px';
[Link] = '2px solid #ff7f50';
[Link] = '12px';
[Link] = '#ffa500';
[Link] = '#fff';
[Link] = '14px';
[Link] = 'bold';
[Link] = 'pointer';
[Link] = '0 4px 8px rgba(0, 0, 0, 0.1)';
[Link] = 'all 0.3s ease';

[Link]('mouseover', () => {
[Link] = '#ff8c00';
[Link] = '#e67e22';
[Link] = 'scale(1.05)';
[Link] = '0 6px 12px rgba(0, 0, 0, 0.15)';
});

[Link]('mouseout', () => {
[Link] = '#ffa500';
[Link] = '#ff7f50';
[Link] = 'scale(1)';
[Link] = '0 4px 8px rgba(0, 0, 0, 0.1)';
});

[Link]('click', () => {
filterProducts(category);
});

if (filterContainer) {
[Link](button);
} else {
[Link]('Container with class "categories-for-filter" not found.');
}
});

function filterProducts(selectedCategory) {
const productWrappers = [Link]('.product-wrapper');

[Link]((wrapper) => {
const messageElement = [Link]('.product-message');
if (messageElement && [Link]() ===
selectedCategory) {
[Link] = '';
} else {
[Link] = 'none';
}
});
}

const showAllButton = [Link]('button');


[Link] = 'Show All';

[Link] = '8px';
[Link] = '12px 20px';
[Link] = '2px solid #ff7f50';
[Link] = '12px';
[Link] = '#ffa500';
[Link] = '#fff';
[Link] = '14px';
[Link] = 'bold';
[Link] = 'pointer';
[Link] = '0 4px 8px rgba(0, 0, 0, 0.1)';
[Link] = 'all 0.3s ease';

[Link]('mouseover', () => {
[Link] = '#ff8c00';
[Link] = '#e67e22';
[Link] = 'scale(1.05)';
[Link] = '0 6px 12px rgba(0, 0, 0, 0.15)';
});

[Link]('mouseout', () => {
[Link] = '#ffa500';
[Link] = '#ff7f50';
[Link] = 'scale(1)';
[Link] = '0 4px 8px rgba(0, 0, 0, 0.1)';
});

[Link]('click', () => {
const productWrappers = [Link]('.product-wrapper');
[Link]((wrapper) => {
[Link] = '';
});
});

if (filterContainer) {
[Link](showAllButton);
}

You might also like