wp_add_inline_script( 'jk-variation-swatches', '
jQuery(function($) {
const standardRingSizes = [
"48","49","50","51","52","53","54","55","56","57",
"58","59","60","61","62","63","64","65","66","67",
"68","69","70"
];
const materialAttr = "attribute_pa_material";
const sizeAttr = "attribute_pa_groesse";
$(".variations_form").each(function() {
const $form = $(this);
const variations = $form.data("product_variations");
if (!variations || !Array.isArray(variations)) {
return;
}
buildSwatches();
refreshSwatches();
$form.on("change found_variation reset_data hide_variation", function() {
setTimeout(refreshSwatches, 80);
});
$form.on("click", ".reset_variations", function() {
setTimeout(function() {
$form.find("select[name^=\'attribute_\']").val("");
refreshSwatches();
}, 100);
});
$form.on("click", ".jk-swatch", function(e) {
e.preventDefault();
const $swatch = $(this);
const value = String($swatch.data("value"));
const attrName = $swatch.closest(".jk-swatches").data("attribute_name");
if ($swatch.hasClass("jk-unavailable")) {
return;
}
if (attrName === materialAttr) {
selectMaterialAndAutoAdjust(value);
} else {
$form.find("select[name=\'" + attrName + "\']").val(value).trigger("change");
autoFillMissingAttributes();
$form.trigger("check_variations");
}
setTimeout(refreshSwatches, 120);
});
function buildSwatches() {
$form.find("select[name^=\'attribute_\']").each(function() {
const $select = $(this);
const attrName = $select.attr("name");
if ($select.next(".jk-swatches").length) {
return;
}
const $swatches = $("
");
let values = [];
$select.find("option").each(function() {
const value = $(this).val();
const label = $(this).text();
if (!value) {
return;
}
values.push({
value: value,
label: label,
virtual: false
});
});
if (attrName === sizeAttr) {
standardRingSizes.forEach(function(size) {
if (!values.some(v => v.value === size)) {
values.push({
value: size,
label: size,
virtual: true
});
}
});
values.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
}
values.forEach(function(item) {
const $li = $(" ")
.addClass("jk-swatch")
.attr("data-value", item.value)
.attr("title", item.label)
.toggleClass("jk-virtual", !!item.virtual)
.attr("role", "button")
.attr("aria-label", item.label);
const $span = $(" ").text(item.label);
if (attrName === materialAttr) {
const imageUrl = getVariationImageForAttribute(attrName, item.value);
$li.addClass("jk-material-swatch");
if (imageUrl) {
$span.css("background-image", "url(" + imageUrl + ")");
$span.text("");
}
}
$li.append($span);
$swatches.append($li);
});
$select.hide().after($swatches);
});
}
function selectMaterialAndAutoAdjust(materialValue) {
const matchingVariation = findBestVariationForAttribute(materialAttr, materialValue);
if (!matchingVariation || !matchingVariation.attributes) {
return;
}
Object.keys(matchingVariation.attributes).forEach(function(attrName) {
const attrValue = matchingVariation.attributes[attrName];
if (!attrValue) {
return;
}
$form.find("select[name=\'" + attrName + "\']").val(attrValue).trigger("change");
});
$form.trigger("check_variations");
}
function autoFillMissingAttributes() {
const currentValues = getCurrentValues();
const candidates = variations.filter(function(variation) {
return isVariationAvailable(variation) && variationMatchesSelected(variation, currentValues);
});
if (!candidates.length) {
return;
}
const best = candidates[0];
Object.keys(best.attributes).forEach(function(attrName) {
const $select = $form.find("select[name=\'" + attrName + "\']");
if (!$select.val() && best.attributes[attrName]) {
$select.val(best.attributes[attrName]).trigger("change");
}
});
}
function findBestVariationForAttribute(attrName, value) {
const currentValues = getCurrentValues();
let candidates = variations.filter(function(variation) {
return isVariationAvailable(variation) &&
variation.attributes &&
variation.attributes[attrName] === value;
});
if (!candidates.length) {
return null;
}
candidates.sort(function(a, b) {
return scoreVariation(b, currentValues, attrName) - scoreVariation(a, currentValues, attrName);
});
return candidates[0];
}
function scoreVariation(variation, currentValues, changedAttr) {
let score = 0;
Object.keys(currentValues).forEach(function(attrName) {
if (attrName === changedAttr) {
return;
}
if (
currentValues[attrName] &&
variation.attributes[attrName] === currentValues[attrName]
) {
score += 10;
}
});
return score;
}
function getCurrentValues() {
const values = {};
$form.find("select[name^=\'attribute_\']").each(function() {
values[$(this).attr("name")] = $(this).val();
});
return values;
}
function isVariationAvailable(variation) {
return variation &&
variation.is_in_stock &&
variation.variation_is_active &&
variation.variation_is_visible;
}
function variationMatchesSelected(variation, selectedValues) {
if (!variation.attributes) {
return false;
}
let matches = true;
Object.keys(selectedValues).forEach(function(attrName) {
const selectedValue = selectedValues[attrName];
if (!selectedValue) {
return;
}
if (variation.attributes[attrName] !== selectedValue) {
matches = false;
}
});
return matches;
}
function getVariationImageForAttribute(attrName, value) {
const match = variations.find(function(variation) {
return variation.attributes &&
variation.attributes[attrName] === value &&
variation.image;
});
if (!match || !match.image) {
return "";
}
return match.image.gallery_thumbnail_src ||
match.image.thumb_src ||
match.image.src ||
match.image.full_src ||
"";
}
function refreshSwatches() {
const currentValues = getCurrentValues();
$form.find(".jk-swatches").each(function() {
const $wrapper = $(this);
const attrName = $wrapper.data("attribute_name");
$wrapper.find(".jk-swatch").each(function() {
const $item = $(this);
const value = String($item.data("value"));
const possible = variations.some(function(variation) {
if (!isVariationAvailable(variation)) {
return false;
}
if (!variation.attributes || variation.attributes[attrName] !== value) {
return false;
}
const testValues = Object.assign({}, currentValues);
testValues[attrName] = value;
return variationMatchesSelected(variation, testValues);
});
$item.toggleClass("jk-unavailable", !possible);
$item.toggleClass(
"selected",
currentValues[attrName] === value
);
});
});
}
});
});
' );
Tetra Terra (438) von NOMOS Glashütte bei Juwelier Lorenz in Berlin
Sie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von Turnstile . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von Vimeo . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von YouTube . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Sie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von Facebook . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von Instagram . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Sie sehen gerade einen Platzhalterinhalt von Google Maps . Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen