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. Parameter options je 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. Parameter address je 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.