Szállítási mód

API végpont: /plugin/delivery

Létrehozható saját szállítási mód a webshopban. A szállítási cím interaktív kivállasztása megjeleníthető a megrendelő lapon.

Új szállítási mód létrehozása

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>"
    }

Ez a kérés fogja létrehozni az új szállítási módot. A webshop tulajdonosa később meg tudja adni a további részleteket a szállítási módhoz (szállítási díj, kapcsolat a fizetési módokkal, név, leírás...)

Példa: 

 
    $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;

PMunka a widgetekkel

Amennyiben a vásárló ezt a szállítási módot választotta a webáruházban a vásárlás során, a HTML/JS kód megjelenik a megrendelőlapon.

Az Eshop definiál egy JS interfészt BS.delivery, hogy leegyszerűsítse a widget felugró ablakkal való munkát és mentse a kiválasztott szállítási címet.

Az objektum metódusai

  • openWindow(options) - A widget ablak megnyitása. A options paraméter egy objektum a következő tulajdonságokkal:
    • title <string> - ablak neve
    • body <HTMLElement> - az ablak tartalma
    • dialogSize <string> - az ablak mérete. Lehetséges értékek: md, lg, full
  • closeWindow() - widget ablak bezárása
  • goBack() - az ügyfél visszatér a rendelési folyamat előző lépéséhez
  • save(address) - a szállítási cím kiválasztás megerősítése. A módszer egy Promise objektumot ad vissza. A address paraméter egy objektum a következő tulajdonságokkal:
    • name <string> - név a szállítási címhez (nem kötelező)
    • address <string> - utca, házszám...
    • city <string> - város
    • zipCode <string> - irányítószám
    • data <Object> - opcionális további adatok (pl. azonosító... ).

Példa egy egyszerű widget megvalósítására

 
    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);
    });

Saját adatok továbbítása a megrendelés létrejötte után

Amennyiben a bővítmény egy order.create webhookot fogad, a rendelési adat objektum pluginData bővül a address értékkel.

Vissza