…
async function populateModalFromData(imageId) {
const response = await fetch(‘/wp-content/uploads/print_catalog.json’);
const catalog = await response.json();// Filter options for this image
const options = catalog.filter(item => item.image_id === imageId);if (options.length === 0) {
console.warn(`No options found for ${imageId}`);
return;
}// Extract unique values for dropdowns
const sizes = […new Set(options.map(opt => opt.size))];
const materials = […new Set(options.map(opt => opt.material))];
const frames = […new Set(options.map(opt => opt.frame))];// Populate dropdowns (assumes you have these elements)
const sizeSelect = document.getElementById(‘print-size’);
const materialSelect = document.getElementById(‘print-material’);
const frameSelect = document.getElementById(‘print-frame’);
const priceDisplay = document.getElementById(‘print-price’);sizeSelect.innerHTML = sizes.map(size => ``).join(”);
materialSelect.innerHTML = materials.map(mat => ``).join(”);
frameSelect.innerHTML = frames.map(f => ``).join(”);// Update price dynamically
function updatePrice() {
const selectedSize = sizeSelect.value;
const selectedMaterial = materialSelect.value;
const selectedFrame = frameSelect.value;const match = options.find(opt =>
opt.size === selectedSize &&
opt.material === selectedMaterial &&
opt.frame === selectedFrame
);if (match) {
priceDisplay.textContent = `$${match.price.toFixed(2)}`;
} else {
priceDisplay.textContent = “Unavailable combination”;
}// Disable frame if material is Digital
if (selectedMaterial.toLowerCase() === “digital”) {
frameSelect.disabled = true;
frameSelect.value = “None”;
} else {
frameSelect.disabled = false;
}
}sizeSelect.onchange = updatePrice;
materialSelect.onchange = updatePrice;
frameSelect.onchange = updatePrice;// Initial price set
updatePrice();
}
…
Total: $0.00