Metode de livrare

Endpoint API: /plugin/delivery

Vă permite să creați o metodă personalizată de livrare în magazin și să afișați o selecție interactivă a adresei de livrare în formularul de comandă.

Crearea unei noi metode de livrare

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

Cererea de mai sus va crea baza pentru o nouă metodă de livrare în magazinul electronic. Utilizatorul magazinului electronic are libertatea de a configura mai detaliat noua transportare (prețul transportului, conexiunea cu metodele de plată, numele etc.)

Exemplu: 

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

Lucrul cu widget-ul

Dacă clientul a selectat această metodă de livrare în magazin, codul HTML/JS este afișat pe pagina formularului de comandă.

Magazinul electronic definește o interfață JS BS.delivery pentru a simplifica lucrul cu fereastra pop-up a widget-ului și pentru a salva adresa de livrare selectată.

Metodele obiectului sunt:

  • openWindow(options) - afișează fereastra widget-ului. Parametrul options este un obiect cu următoarele proprietăți:
    • title <string> - numele ferestrei
    • body <HTMLElement> - conținutul ferestrei
    • dialogSize <string> - dimensiunea ferestrei. Valori posibile: md, lg, full
  • closeWindow() - închide fereastra widget-ului
  • goBack() - returnează clientul la pasul anterior al procesului de comandă
  • save(address) - confirmă alegerea adresei de livrare. Metoda returnează un obiect Promisiune. Parametrul address este un obiect cu următoarele proprietăți:
    • name <string> - nume pe adresa de livrare (opțional)
    • address <string> - stradă, număr descriptiv...
    • city <string> - oraș
    • zipCode <string> - cod poștal
    • data <Object> - date personalizate opționale (de exemplu, identificatorul sucursalei selectate).

Exemplu de implementare simplă a widget-ului

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

Trimiterea propriilor date după crearea unei comenzi

Dacă modulul a înregistrat webhook order.create, obiectul de date al comenzii este extins cu valorile personalizate ale obiectului address sub cheia pluginData.

Înapoi