DBP SIDING
BESTEL.INNODEEN.NL
kg
CO2 opslag 🌿
////// KLEUR AFB ADDITIONEEL BIJ PRODUCT //////
jQuery(document).ready(function($){
// only run on product 2317
if ( ! $('body').hasClass('postid-2317') ) return;
console.log('Color-only swatch script loaded');
// 1) Inject CSS override to strip background & shadow
$('head').append(`
`);
// 2) Target the exact WooCommerce gallery wrapper
var $gallery = $('div.woocommerce-product-gallery.woocommerce-product-gallery--with-images.images').first();
if (!$gallery.length) {
console.error('Gallery wrapper not found; aborting.');
return;
}
var $colorBox = null;
// 3) Create & insert the colour box immediately after the gallery
function ensureColorBox() {
if ($colorBox) {
$colorBox.remove();
}
$colorBox = $('');
$gallery.after($colorBox);
console.log('Inserted #swatch-color');
}
// 4) Remove the box when not needed
function removeColorBox() {
if ($colorBox) {
$colorBox.remove();
$colorBox = null;
console.log('Removed #swatch-color');
}
}
// 5) Render the selected colour into the box
function renderColor(props) {
if (!$colorBox) return;
$colorBox.empty();
if (!props.full_src) return;
$('![]()
', {
src: props.full_src,
alt: props.alt || props.title || '',
title: props.title || ''
}).appendTo($colorBox);
}
// 6) Show/hide the box based on whether the kleur radios are visible
function toggleColorBox() {
var $colors = $('input[name="fpf_3558365"]');
if ($colors.length && $colors.is(':visible')) {
ensureColorBox();
var init = document.querySelector('input[name="fpf_3558365"]:checked');
if (init && init.dataset.imageProps) {
try {
renderColor(JSON.parse(init.dataset.imageProps));
} catch(e){
console.error('Invalid JSON:', e);
}
}
} else {
removeColorBox();
}
}
// initial check on page load (small delay for AJAX)
setTimeout(toggleColorBox, 50);
// re-run when profiel changes (in case kleur group shows/hides)
$('body').on('change', 'input[name="2355_profiel"]', function(){
setTimeout(toggleColorBox, 50);
});
// 7) Capture-phase listener on kleur radios to block default swap
document.body.addEventListener('change', function(e){
var tgt = e.target;
if (tgt.name === 'fpf_3558365' && tgt.dataset.imageProps) {
var $colors = $('input[name="fpf_3558365"]');
if (!($colors.length && $colors.is(':visible'))) return;
e.stopImmediatePropagation();
e.preventDefault();
var props;
try {
props = JSON.parse(tgt.dataset.imageProps);
} catch(err) {
return console.error('Invalid JSON in data-image-props:', err);
}
ensureColorBox();
renderColor(props);
}
}, true);
});
