Is hier toevallig iemand die ervaring heeft met de API van Print.com?

https://developer.print.com/referenc...-configuration

Wil graag voor elkaar krijgen met Javascript dat alle opties getoond worden. Wanneer een gebruiker een optie kiest, moeten andere opties die niet compatibel zijn uitgeschakeld worden. Krijg het echter niet lekker voor elkaar en hoop dat iemand hier ervaring heeft met de API en mij wat uitleg kan geven over hoe het aan te pakken.

Om alle opties van een product weer te geven en incompatibele combinaties uit te schakelen met JavaScript, kun je gebruikmaken van de excludes-informatie uit de Print.com API. Hiermee kun je dynamisch de beschikbare opties aanpassen op basis van de keuzes van de gebruiker.

Stap 1: Haal productgegevens op

Gebruik de volgende API-aanroep om de productgegevens, inclusief de uitsluitingen (excludes), op te halen:

GET /products/{sku}?fields=excludes



Vervang {sku} door de specifieke product-SKU. De response bevat een lijst van combinaties die niet toegestaan zijn.

Stap 2: Verwerk de excludes in JavaScript

Sla de excludes op in een JavaScript-array:

const excludes = [
{
property: "material",
options: ["300gr_sbs", "280gr_linnen", "350gr_atelier"]
},
{
property: "spot_finish",
options: [
"double_sided_embossed_partial_gloss_40",
"double_sided_foil_gold",
"double_sided_foil_silver",
"double_sided_foil_copper",
"double_sided_embossed_partial_gloss_80",
"double_sided_foil_rose",
"double_sided_foil_rainbow",
"double_sided_foil_glitter"
]
}
];



Deze structuur geeft aan welke combinaties van opties niet toegestaan zijn.

Stap 3: Controleer op incompatibele combinaties

Wanneer een gebruiker een optie selecteert, controleer je of deze keuze leidt tot een incompatibele combinatie:

function isCombinationValid(selectedOptions) {
return !excludes.some(exclude => {
return exclude.options.includes(selectedOptions[exclude.property]);
});
}



Deze functie retourneert false als de combinatie niet geldig is.

Stap 4: Schakel incompatibele opties uit in de UI

Op basis van de geldige combinaties kun je de beschikbare opties in de gebruikersinterface aanpassen:

function updateOptions(selectedOptions) {
// Voor elke eigenschap (bijv. 'material', 'spot_finish')
Object.keys(selectedOptions).forEach(property => {
const options = getOptionsForProperty(property); // Haal beschikbare opties op
options.forEach(option => {
const testSelection = { ...selectedOptions, [property]: option };
const isValid = isCombinationValid(testSelection);
const optionElement = document.querySelector(`#${property} option[value="${option}"]`);
if (optionElement) {
optionElement.disabled = !isValid;
}
});
});
}



Deze functie schakelt opties uit die leiden tot een incompatibele combinatie.

Voorbeeld: Gebruik in een formulier

Stel je hebt een formulier met select-elementen voor 'material' en 'spot_finish':

<select id="material" onchange="handleSelectionChange()">
<option value="300gr_sbs">300gr SBS</option>
<option value="280gr_linnen">280gr Linnen</option>
<option value="350gr_atelier">350gr Atelier</option>
</select>

<select id="spot_finish" onchange="handleSelectionChange()">
<option value="double_sided_foil_gold">Goudfolie dubbelzijdig</option>
<option value="double_sided_foil_silver">Zilverfolie dubbelzijdig</option>
<!-- Meer opties -->
</select>



De handleSelectionChange-functie haalt de huidige selectie op en past de beschikbare opties aan:

function handleSelectionChange() {
const selectedMaterial = document.getElementById('material').value;
const selectedSpotFinish = document.getElementById('spot_finish').value;
const selectedOptions = {
material: selectedMaterial,
spot_finish: selectedSpotFinish
};
updateOptions(selectedOptions);
}



Met deze aanpak zorg je ervoor dat gebruikers alleen geldige combinaties kunnen selecteren, wat de gebruikerservaring verbetert en fouten bij het bestellen voorkomt.

Nu een stap verder met een concreet en werkend voorbeeld op basis van de Print.com excludes-structuur.


Stap 5: Voorbeeld HTML + JS in werking

Laten we aannemen dat we twee eigenschappen hebben:

Material (materiaal)

Spot Finish (afwerking)


HTML

<label>Materiaal:</label>
<select id="material">
<option value="300gr_sbs">300gr SBS</option>
<option value="280gr_linnen">280gr Linnen</option>
<option value="350gr_atelier">350gr Atelier</option>
</select>

<label>Afwerking:</label>
<select id="spot_finish">
<option value="double_sided_foil_gold">Goudfolie dubbelzijdig</option>
<option value="double_sided_foil_silver">Zilverfolie dubbelzijdig</option>
<option value="double_sided_embossed_partial_gloss_40">Glo ss 40</option>
</select>

JavaScript

const excludes = [
{
combination: {
material: "280gr_linnen",
spot_finish: "double_sided_foil_gold"
}
},
{
combination: {
material: "350gr_atelier",
spot_finish: "double_sided_foil_silver"
}
}
];

const selects = {
material: document.getElementById("material"),
spot_finish: document.getElementById("spot_finish")
};

// Bij wijziging opnieuw opties updaten
Object.values(selects).forEach(select =>
select.addEventListener("change", updateDisabledOptions)
);

function updateDisabledOptions() {
const selected = {
material: selects.material.value,
spot_finish: selects.spot_finish.value
};

Object.keys(selects).forEach(key => {
const currentSelect = selects[key];
Array.from(currentSelect.options).forEach(option => {
const testCombo = { ...selected, [key]: option.value };
const invalid = excludes.some(rule =>
Object.entries(rule.combination).every(
([prop, val]) => testCombo[prop] === val
)
);
option.disabled = invalid;
});
});
}

// Initieel aanroepen
updateDisabledOptions();


---

Wat dit script doet:

Toont álle opties.

Als een gebruiker een optie kiest, controleert het script de excludes om te zien of die keuze een andere optie uitsluit.

Die uitgesloten optie wordt disabled gemaakt in de dropdown.



---

Stap 6: Optioneel – visueel uitschakelen i.p.v. disabled

Wil je liever geen disabled, maar bijvoorbeeld visueel verbergen of markeren als "niet beschikbaar", dan kun je in plaats daarvan een classList.add('hidden') of option.classList.add('unavailable') gebruiken.

Bijvoorbeeld:

if (invalid) {
option.classList.add("unavailable");
} else {
option.classList.remove("unavailable");
}

En dan in CSS:

.unavailable {
color: #aaa;
}