Integrace BZUCO e-shopu na webové stránky postavené na platformě Wix

Integrace BZUCO e-shopu do webových stránek na platformě Wix může být komplikovaná kvůli restriktivním politikám Wixu, zejména pokud jde o používání iframů. Tento návod vás provede kroky, jak úspěšně přidat BZUCO e-shop na váš web pomocí Custom Elementu.

Integrace pomocí Custom Elementu

1. Uložení JavaScriptového kódu

• V editoru Wixu vytvořte soubor s názvem bzuco-eshop.jsve složce custom-elements:

• Do souboru bzuco-eshop.js vložte následující kód:

class BzucoEshop extends HTMLElement {
    instance = '';
    bzucoConfig = `{ sessionStore: 'localstorage' }`;


    createScriptConfigTag() {
        const script = document.createElement('script');
        script.text = 'var bzucoConfig = ' + this.bzucoConfig + ';';


        return script;
    }


    createScriptSrcTag() {
        const script = document.createElement('script');
        script.src = `https://${this.instance}.bzuco.cloud/resources/frontend/embed.js`;


        return script;
    }


    connectedCallback() {
        this.appendChild(this.createScriptConfigTag());
        this.appendChild(this.createScriptSrcTag());
    }


    attributeChangedCallback(name, oldValue, newValue) {   
        switch (name) {
            case 'instance': this.instance = newValue; break;
            case 'config': this.bzucoConfig = newValue; break;
        }
    }


    static get observedAttributes() {
        return ['instance', 'config'];
    }
}


customElements.define('bzuco-eshop', BzucoEshop);

2. Vytvoření Custom Elementu

• V editoru Wixu a přejděte na stránku, kam chcete BZUCO e-shop umístit.
  
  
• Přidejte nový Custom Element podle návodu: Wix Editor: Adding a Custom Element to Your Site. 

Jako zdroj (source) vyberte “Velo file” a následně bzuco-eshop.js. Do “Tag name” zadejte “bzuco-eshop”.

3. Přizpůsobení Custom Elementu

• V editoru Wixu klikněte na váš nově umístěný Custom Element a následně na tlačítko “Set Attributes”. V zobrazeném dialogu klikněte na tlačítko “Set Attributes”. Zadejte nový atribut s názvem instance, do “Value” vyplňte název vaší BZUCO instance a potvrďte tlačítkem “Set”.
  

• Nyní byste již měli vidět náhled vašeho BZUCO e-shopu přímo v editoru Wixu.
• BZUCO e-shop můžete dále přizpůsobit nastavením dalšího atributu s názevem bzucoConfig - ve výše uvedeném kódu je nastavena jeho výchozí hodnota obsahující parametr sessionStorage, který je nezbytný pro stránky vytvořené ve Wixu.

4. Testování a ověření funkčnosti

1. Publikujte změny na vašem webu a ověřte, že se BZUCO e-shop zobrazuje a funguje správně (zejména funkce nákupního košíku).
2. Pokud e-shop funguje správně, máte integraci úspěšně dokončenou.

DOPORUČENÍ

Doporučujeme ověřit všechny kroky s vaším webovým vývojářem, pokud nejste zkušený frontendový vývojář.

Pokud narazíte na jakékoliv problémy nebo potřebujete další pomoc, neváhejte kontaktovat technickou podporu BZUCO.