Algemeen
Voor toegang tot de plugins moet u een "dealer" account hebben van Perfecta en de plugin moet voor u geactiveerd worden op deze account.
Geef daarvoor alle door u gebruikte domeinnamen en IP adressen door bij de aanvraag voor de plugin activatie.
U ontvangt dan uw gepersonaliseerde API code die kan gebruikt worden vanop deze domeinnamen (frontend API) en IP adressen (backend API)
Frontend API imlementatie
De frontend API implementatie zorgt ervoor dat gebruikers van uw website een configurator en 3D model zien op uw website.
Daarvoor dient u onderstaande code te implementeren.
Beide CSS bestanden kan u achterwege laten en vervangen door uw eigen CSS. Deze bestanden dienen als basis om funcioneel werkende configurator en 3D model te hebben.
In de head van uw HTML code:
<script src="https://www.perfecta.be/modules/custom/o2_plugin/js/configurator.js"></script>
<link rel="stylesheet" href="https://www.perfecta.be/modules/custom/o2_plugin/css/configurator.css">
<script type="module" src="https://www.perfecta.be/modules/custom/o2_plugin/js/3d.js"></script>
<link rel="stylesheet" href="https://www.perfecta.be/modules/custom/o2_plugin/css/3d.css">In de body van uw HTML code:
<div id="perfecta-3d-wrapper"
data-ean="{ean}"
data-pp-url="https://www.perfecta.be"
data-pp-code="{code}"
data-pp-language="nl"
><iframe
id="perfecta-3d-embed"
src="{3D-url}"
frameborder="0"
width="100%"
height="100%"
allowfullscreen
></iframe>
<section>
<button id="perfecta-3d-screenshot">Take screenshot</button>
<button id="perfecta-3d-fullscreen">Fullscreen</button>
</section>
</div>
<div id="perfecta-configurator-wrapper"
data-ean="{ean}"
data-pp-url="https://www.perfecta.be"
data-pp-code="{code}"
data-pp-language="nl"
></div>Vervang in deze code telkens:
- {ean} door de EAN code zonder de accolades, bv. 5400987133787
- {3D-url} door de 3D URL zonder de accolades, bv. https://app.vectary.com/p/7LdGC1tPRtKtrYmXE33Uvs
- {code} door uw persoonlijke API code zonder accolades
- het data-pp-language attribuut aanvaard 4 talen: nl, fr, en, de
Deze 2 div-elementen kunnen eender waar in uw pagina staan, ze hoeven niet bij elkaar te staan.
De EAN codes en de 3D URL's voor producten kunnen opgevraagd worden via de backend API.
Reageren op wijzigingen aan de configurator
Wanneer de configurator een wijziging heeft ingeladen kan u Javascript code implementeren om op de wijziging te reageren.
Dit kan door op de configurator-div een data-customload-fx attribuut toe te voegen.
De informatie van deze callback functie is belangrijk om de juiste prijs te tonen en om de gekozen configuratie op te slaan voor latere verwerking.
De "configuration" en "ean" heeft u nodig om prijsinformatie in uw backend implementatie te verifiëren. Zie "Backend API implementatie > /plugins/price/{ean}/{configuration}/{code}"
Zie het voorbeeld hieronder:
<script>
function pp_load(element, data) {
console.log(element);
console.log(data);
}
</script>
<div id="perfecta-configurator-wrapper"
data-ean="{ean}"
data-pp-url="https://www.perfecta.be"
data-pp-code="{code}"
data-pp-language="nl"
data-custom-load-fx="pp_load"
></div>De "data" variabele bevat alle informatie over de zonet ingeladen configuratie. Hieronder een voorbeeld:
{
"ean": "5400987256035",
"productId": "271-5414161304665:5415039368987,5414161304672:5415039804362,5414161304696:5414161321426",
"configuration": {
"5414161304665": "5415039368987",
"5414161304672": "5415039804362",
"5414161304696": "5414161321426"
},
"configurationHuman": {
"5414161304665": {
"property": "kleur onderstel",
"value": "EP79 - antraciet"
},
"5414161304672": {
"property": "kleur bekleding",
"value": "M382 - taupe"
},
"5414161304696": {
"property": "hoogte",
"value": "65"
}
},
"salesPrice": "31200",
"salesVatPrice": "5415",
"salesVatRate": "21"
}Prijzen zijn altijd zonder komma, dus x100.
De BTW is uitgedrukt in procent en is vervat in de prijs.
Backend API implementatie
De backend API laat u toe een overzicht van alle producten te krijgen inclusief alle nuttige informatie.
Er zijn 5 endpoints beschikbaar op https://www.perfecta.be/
- /plugins/timestamps/{code}
- /plugins/programs/{code}
- /plugins/products/{code}
- /plugins/price/{ean}/{configuration}/{code}
- /plugins/infotexts/{code}
Vervang telkens {code} door uw API code.
Deze API calls zullen enkel werken op de door u opgegeven IP adressen.
PHP voorbeeldcode
<?php
$code = '{code}';
$endpoint = '/plugins/products/' . $code;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://www.perfecta.be/nl' . $endpoint);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$server_output = curl_exec ($ch);
curl_close ($ch);
print_r($server_output);/plugins/timestamps/{code}
Deze API call geeft timestamps terug voor de andere API calls. Deze timestamps geven aan wanneer de laatste wijziging was aan het resultaat van de andere API calls.
Deze timestamps kunnen gebruikt worden om de andere API calls enkel aan te roepen wanneer er informatie gewijzigd is. Dit voorkomt hoge verwerkingstijd op zowel uw website als die van Perfecta.
voorbeeld resultaat:
{
"product": 1729242807
"infotext": 1728028781
"inspiratie": 1728981667
"program": 1729242478
}/plugins/programs/{code}
Alle producten behoren tot 1 of meerdere "programs" (categoriën). Via deze API call kan u een overzicht krijgen van alle programs, hun benaming in 4 talen en de unieke ID.
voorbeeld resultaat:
[
0 => { ... }
...
2 => {
"id": "5414161310239"
"nl": {
"name": "barkrukken"
}
"en": {
"name": "bar stool"
}
"fr": {
"name": "tabourets bar"
}
"de": {
"name": "Barhocker"
}
}
3 => { ... }
...
]/plugins/products/{code}
Deze API call geeft een overzicht van alle producten.
voorbeeld resultaat:
[
0 => { ... }
...
8 => {
"ean": "5400987255717"
"name": "BarZoom"
"lowest_price": {
"price": 216
"vat-price": 37.49
"vat-rate": "21%"
}
"default_configuration": {
"5414161304665": "5415039368987"
"5414161304672": "5415039804362"
"5414161304696": "5414161307932"
"5415039095142": "5400987257391"
}
"default_price": {
"price": 247.6
"vat-price": 42.97
"vat-rate": "21%"
}
"ranking": "1"
"3d": "https://app.vectary.com/p/6enfapJPAleNnKtsdaykQv"
"programs": [
0 => "5400987167706"
1 => "5415039410402"
]
"images": [
0 => "https://www.perfecta.be/sites/default/files/cat/BarZoom%20ht65%20ep79%20V475%20%28FD%200801%29.jpg"
1 => "https://www.perfecta.be/sites/default/files/cat/BarZoom%20ht80%20ep79%20V480%20%28FD%200805%29.jpg"
]
"documents": [
0 => "https://www.perfecta.be/sites/default/files/cat/PRODUCTFICHE_BarZoom.pdf"
]
"name_translations": {
"nl": "BarZoom"
"fr": "BarZoom"
"de": "BarZoom"
"en": "BarZoom"
}
}
...
]/plugins/price/{ean}/{configuration}/{code}
Met deze API call kan u de prijs van een specifieke configuratie opvragen.
Voor deze api call heeft u de "configuration" en "ean" nodig die u vanuit de frontend API heeft ontvangen.
Zie "Frontend API imlementatie > Reageren op wijzigingen aan de configurator".
De configuration moet u omzetten van JSON-array/object naar een URL-veilige string.
Voorbeeld:
https://www.perfecta.be/plugins/price/5400987133787/{"5414161304665":"5415039368987","5414161304672":"5415039804362","5414161304696":"5414161307932"}/PP-1234-1
Deze API call dient om de prijs voor configuraties die u in uw winkelwagentje plaatst in de backend te controleren.
Prijzen die uit de frontend API komen, kunnen immers gemanipuleerd worden door de eindgebruiker.
voorbeeld resultaat:
{
"ean": "5400987133787"
"configuration": {
"5414161304665": "5415039368987"
"5414161304672": "5415039804362"
"5414161304696": "5414161307932"
}
"price": 156
"vat-price": 27.07
"vat-rate": 21
}- Prijzen zijn altijd in Amerikaanse kommanotatie, dus met een . als komma-indicator
- BTW is steeds als percentage
- Het BTW bedrag is altijd inbegrepen in de prijs
/plugins/infotexts/{code}
Alle producten kunnen algemene infoteksten gebruiken. Deze geven extra informatie over bv. het onderhoud van de materialen.
Elke infotext bevat een array van EAN codes van producten die deze infotext gebruiken.
In het voorbeeld hieronder is de tekst ingekort.
voorbeeld resultaat:
[
0 => {
"id": "16300"
"products": [
0 => "5414161406536"
1 => "5414161939577"
2 => "5415039094541"
...
]
"nl": {
"name": "frame"
"text": {
"value": "<h4>Onderstel</h4>
<p>Stof afnemen met een licht vochtige doek. Vet en vloeistoffen onmiddellijk opnemen ..."
"format": "full_html"
}
}
"en": { ... }
"fr": { ... }
"de": { ... }
}
...
]