/* Container & Form */
.sink-filter-wrapper {
font-family: Arial, sans-serif;
margin: 20px;
position: relative; /* for loader overlay if needed */
}
.filter-line {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-line label {
font-weight: bold;
margin-right: 5px;
}
/* Hover styles for dropdowns */
.filter-line select {
padding: 5px;
transition: background-color 0.2s ease;
}
.filter-line select:hover {
background-color: #f2f2f2;
}
/* Button styling snippet with updated color #01a895 */
.filter-line button,
.go-to-product-button {
/* Fallback background color & border color updated to #01a895 */
--button_gradient_top_color: #01a895;
--button_border_color: #01a895;
--button_accent_color: #ffffff; /* Fallback text color */
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
font-family: var(--button_typography-font-family, Arial, sans-serif);
font-weight: var(--button_typography-font-weight, 400);
font-style: var(--button_typography-font-style, normal);
letter-spacing: var(--button_typography-letter-spacing, normal);
border-width: var(--button_border_width-top, 0) var(--button_border_width-right, 0) var(--button_border_width-bottom, 0) var(--button_border_width-left, 0);
border-style: solid;
border-radius: var(--button-border-radius-top-left, 3px) var(--button-border-radius-top-right, 3px) var(--button-border-radius-bottom-right, 3px) var(--button-border-radius-bottom-left, 3px);
text-transform: var(--button_text_transform, none);
transition: all .2s;
margin: var(--button_margin-top, 0) var(--button_margin-right, 0) var(--button_margin-bottom, 0) var(--button_margin-left, 0);
background: var(--button_gradient_top_color);
border-color: var(--button_border_color);
padding-top: var(--button_padding-top, 5px);
padding-right: var(--button_padding-right, 12px);
padding-bottom: var(--button_padding-bottom, 5px);
padding-left: var(--button_padding-left, 12px);
line-height: var(--button_line_height, 1);
font-size: var(--button_font_size, 14px);
color: var(--button_accent_color);
box-shadow: none !important;
outline: 0;
}
/* Hover effect for buttons remains #005f88 and text stays white */
.filter-line button:hover,
.go-to-product-button:hover {
background-color: #005f88;
color: #fff;
}
/* Results container: full width, no grid */
#results {
display: block;
width: 100%;
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
}
/* Heading inside #results */
#results h2 {
margin-top: 0;
}
/* Product items & fade-in transition */
.product-item {
display: inline-flex;
flex-direction: row;
width: auto;
max-width: 100%;
margin: 10px;
padding: 10px;
background: #fff;
border-radius: 4px;
border-left: 4px solid #0073aa;
gap: 15px;
/* Fade-in transition */
opacity: 0;
transform: translateY(10px);
transition: opacity 1.5s ease, transform 1.5s ease;
}
@media (max-width: 768px) {
.product-item {
flex-direction: column;
width: 90%;
}
}
.product-item.fade-in {
opacity: 1;
transform: translateY(0);
}
.product-item h3 {
margin-top: 0;
color: #0073aa;
}
/* Each product inside the item */
.sink-product {
margin-bottom: -10px;
}
.sink-product img {
width: 150px !important;
height: 100px !important;
object-fit: cover;
margin-bottom: 10px;
}
/* Price styling */
.product-price {
font-size: 14px;
margin: 5px 0;
}
.old-price {
color: #777;
text-decoration: line-through;
margin-right: 6px;
}
.discount-price {
color: red;
font-weight: bold;
}
.discount-price small {
font-weight: normal;
}
/* Loading Overlay (dimming background) */
body.loading {
background-color: rgba(0,0,0,0.2);
pointer-events: none;
user-select: none;
}
// Hardcoded product data, including pricing
const sinkProducts = [
{
bowl: "1 Domestic / Shallow Bowl",
yesNo: "No",
products: [
{
title: "GT20",
id: 3957,
link: "product/small-grease-trap-under-sink-gt20/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/BGT-inside-1-400x272.jpeg",
oldPrice: "£175.00",
discountPrice: "£149.00"
},
{
title: "EPX20",
id: 6147,
link: "/product/epx20/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT7-main-400x272.png",
oldPrice: "£149.00",
discountPrice: "£129.00"
}
]
},
{
bowl: "1",
yesNo: "No",
products: [
{
title: "GT40",
id: 3969,
link: "/product/gt40/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/BGT-inside-1-400x272.jpeg",
oldPrice: "£199.00",
discountPrice: "£179.00"
},
{
title: "EPX40",
id: 3931,
link: "/product/epx40/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT7-main-400x272.png",
oldPrice: "£199.00",
discountPrice: "£165.00"
}
]
},
{
bowl: "1",
yesNo: "Yes",
products: [
{
title: "GT60",
id: 6144,
link: "/product/gt60/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT-inside-scaled.jpeg",
oldPrice: "£249.00",
discountPrice: "£215.00"
}
]
},
{
bowl: "2",
yesNo: "No",
products: [
{
title: "GT80",
id: 3967,
link: "/product/gt80/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/BGT-inside-400x272.jpeg",
oldPrice: "£299.00",
discountPrice: "£249.00"
},
{
title: "GT100",
id: 3966,
link: "/product/gt100/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT-inside-scaled.jpeg",
oldPrice: "£349.00",
discountPrice: "£295.00"
},
{
title: "GTLH",
id: 5805,
link: "/product/gtlh/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT-inside-scaled.jpeg",
oldPrice: "£349.00",
discountPrice: "£329.00"
},
{
title: "EPX100",
id: 3940,
link: "/product/epx100/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main-400x248.png",
oldPrice: "£399.00",
discountPrice: "£348.00"
}
]
},
{
bowl: "2",
yesNo: "Yes",
products: [
{
title: "GT100",
id: 3966,
link: "/product/gt100/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT-inside-scaled.jpeg",
oldPrice: "£349.00",
discountPrice: "£295.00"
},
{
title: "GTLH",
id: 5805,
link: "/product/gtlh/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT-inside-scaled.jpeg",
oldPrice: "£310.00",
discountPrice: "£290.00"
},
{
title: "EPX100",
id: 3940,
link: "/product/epx100/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main-400x248.png",
oldPrice: "£330.00",
discountPrice: "£299.00"
}
]
},
{
bowl: "3",
yesNo: "No",
products: [
{
title: "EPX200",
id: 6035,
link: "/product/epx200/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main.png",
oldPrice: "£499.00",
discountPrice: "£479.00"
}
]
},
{
bowl: "3",
yesNo: "Yes",
products: [
{
title: "EPX200",
id: 6035,
link: "/product/epx200/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main-400x248.png",
oldPrice: "£499.00",
discountPrice: "£479.00"
}
]
},
{
bowl: "4",
yesNo: "No",
products: [
{
title: "EPX200",
id: 6035,
link: "/product/epx200/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main-400x248.png",
oldPrice: "£499.00",
discountPrice: "£479.00"
}
]
},
{
bowl: "4",
yesNo: "Yes",
products: [
{
title: "EPX200",
id: 6035,
link: "/product/epx200/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2023/07/GT25-main-400x248.png",
oldPrice: "£499.00",
discountPrice: "£479.00"
}
]
},
{
bowl: "5+",
yesNo: "-",
products: [
{
title: "EPX400",
id: 6130,
link: "/product/epx400/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2024/07/Image-400x345.jpeg",
oldPrice: "£799.00",
discountPrice: "£699.00"
},
{
title: "XL Grease Management",
id: null,
link: "/xl-grease-management/",
image: "https://www.greasetrapstore.co.uk/wp-content/uploads/2024/01/JUMBO-ISO-CUTAWAY-GREASE-500x500.webp",
// Instead of prices, show text here:
oldPrice: "",
discountPrice: ""
}
]
}
];
document.addEventListener('DOMContentLoaded', () => {
const filterBtn = document.getElementById('filterBtn');
const numBowlsSelect = document.getElementById('numBowlsSelect');
const yesNoSelect = document.getElementById('yesNoSelect');
const resultsDiv = document.getElementById('results');
const loader = document.getElementById('loader');
// Start loading overlay
function startLoading() {
document.body.classList.add('loading');
if (loader) loader.style.display = 'block';
}
// Stop loading overlay
function stopLoading() {
document.body.classList.remove('loading');
if (loader) loader.style.display = 'none';
}
// Filter button click
filterBtn.addEventListener('click', () => {
startLoading();
const selectedBowl = numBowlsSelect.value;
const selectedYesNo = yesNoSelect.value;
// Input validation
if (!selectedBowl) {
alert("Please select a number of bowls.");
stopLoading();
return;
}
if (selectedBowl !== "5+" && !selectedYesNo) {
alert("Please select an option for the feature (Yes or No).");
stopLoading();
return;
}
if (selectedBowl === "1 Domestic / Shallow Bowl" && selectedYesNo === "Yes") {
alert("No products available for '1 Domestic / Shallow Bowl' with 'Yes'.");
resultsDiv.innerHTML = "
-- Select --
1 Domestic / Shallow Bowl
1
2
3
4
5+
-- Select --
Yes
No
Welcome to our Grease Trap Calculator. Enter your current system details above, and we'll recommend the products you need.
No products match your selection.
"; stopLoading(); return; } // Filter logic const filtered = sinkProducts.filter(item => { if (item.bowl === selectedBowl) { return (selectedBowl === "5+" || item.yesNo === selectedYesNo); } return false; }); renderResults(filtered); }); // Render the filtered results function renderResults(filteredItems) { // Clear old results and display heading resultsDiv.innerHTML = "We recommend these products:
"; if (!filteredItems.length) { resultsDiv.innerHTML += "No products match your selection.
"; stopLoading(); return; } // Build product items filteredItems.forEach(item => { let rowHTML = ``;
item.products.forEach(prod => {
if (prod.link) {
rowHTML += `
`;
resultsDiv.innerHTML += rowHTML;
});
// Fade-in effect for newly added items
const productItems = resultsDiv.querySelectorAll('.product-item');
productItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add('fade-in');
}, 50 * index);
});
stopLoading();
}
});
${ prod.image ? `
` : '' }
`;
} else {
rowHTML += `${prod.title}
${ // If the product ID is null, display text instead of price block prod.id === null ? `Click Below
` : (prod.oldPrice && prod.discountPrice ? `${prod.oldPrice} ${prod.discountPrice} ex. VAT
` : '') }${prod.title}
`; } }); rowHTML += `
