Spôsob dopravy
API endpoint: /plugin/delivery
Umožňuje vytvoriť na eshope vlastný spôsob dopravy a v objednávkovom formulári zobraziť interaktívny výber dodacej adresy.
Vytvorenie nového spôsobu dopravy
POST /plugin/delivery
{
"name": "My Delivery Method",
"description": "Optional Description",
"image": "https://plugin.tld/images/icon.png",
"widget": "<script src="https://plugin.tld/delivery.js"></script>"
}
Vyššie uvedená požiadavka vytvorí na eshope základ nového spôsobu dopravy. Užívateľovi eshopu je ponechaná voľnosť novú dopravu detailnejšie nastaviť (cena dopravy, prepojenie so spôsobmi platieb, názov atď.)
Príklad:
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => 'https://api.webareal.cz/plugin/delivery',
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_POSTFIELDS => json_encode([
"name" => "My Delivery Method",
"description" => "Optional Description",
"image" => "https://plugin.tld/images/icon.png",
"widget" => "<script src="https://plugin.tld/delivery.js"></script>"
])
CURLOPT_HTTPHEADER => array(
'X-Wa-api-token: ' . $api_token, // apiToken získáte při instalaci doplňku, viz. nápověda
'Authorization: Bearer ' . $bearer, // access token získáte zde, údaje zde (záložka API přístup)
'Content-Type: application/json'
),
));
$response = curl_exec($curl);
curl_close($curl);
echo $response;
Práca s widgetom
Pokiaľ zákazník na eshope zvolil tento spôsob dopravy, je na stránke objednávkového formulára vypísaný zadaný HTML/JS kód.
Eshop definuje JS rozhranie BS.delivery pre zjednodušenie práce s popup oknom widgetu a uloženie zvolenej dodacej adresy.
Metódy objektu:
-
openWindow(options)- zobrazenie okna widgetu. Parameteroptionsje objekt s nasledujúcimi vlastnosťami:-
title <string>- názov okna -
body <HTMLElement>- obsah okna -
dialogSize <string>- veľkosť okna. Možné hodnoty:md,lg,full
-
-
closeWindow()- zatvorenie okna widgetu -
goBack()- vrátenie zákazníka na predchádzajúci krok objednávkového procesu -
save(address)- potvrdenie voľby dodacej adresy. Metóda vracia Promise objekt. Parameteraddressje objekt s nasledujúcimi vlastnosťami:-
name <string>- meno na dodacej adrese (voliteľné) -
address <string>- ulica, číslo popisné… -
city <string>- mesto -
zipCode <string>- poštové smerovacie číslo -
data <Object>- voliteľné vlastné údaje (napr. identifikátor zvolenej pobočky).
-
Ukážka jednoduchej implementácie widgetu
document.addEventListener('DOMContentLoaded', () => {
"use strict";
const options = {
title: 'My Delivery',
body: content,
dialogSize: 'lg'
};
const template = `
<div>
<h5>Select pickup point</h5>
<button type="button" class="js-plugin-close">Close</button>
<button type="button" class="js-plugin-confirm">Confirm</button>
</div>
`;
const content = document.createElement('div');
content.innerHTML = template;
const buttons = content.querySelectorAll('button');
for(const button of buttons) {
button.addEventListener('click', e => {
if(e.target.classList.contains('js-plugin-close')) {
BS.delivery.closeWindow();
} else {
BS.delivery.save({
name: 'Name',
address: 'Street, 12',
city: 'City',
zipCode: '12345',
data: {
point: 1,
}
}).then(address => {
console.log(address);
BS.delivery.closeWindow();
}).catch(e => {
console.log(e);
});
}
})
}
setTimeout(() => {
BS.delivery.openWindow(options);
}, 500);
});
Odovzdanie vlastných údajov po vytvorení objednávky
Pokiaľ má doplnok registrovaný order.create webhook, je objekt s údajmi o objednávke rozšírený o vlastné hodnoty address objektu pod kľúčom pluginData.