Smartform – jak ho rozběhnout v e-shopu na platformě Shoptet

1. Zaregistrujte se v administrační aplikaci. Tím získáte své clientId, které později vložíte do zdrojového kódu pro přihlášení k Smartformu.
2. V administrační aplikaci přidejte doménu Vašeho webu (např. mojedomena.cz).
3. Klikněte na aktivaci služeb „Poštovní adresy“ a "Emaily", podle pokynů proveďte platbu.
4. V administraci Shoptetu vložte následující HTML kód. V administraci se kód vkládá v menu „Vzhled a obsah“, submenu „Editor“, záložka „HTML kód“, odstavec „Záhlaví“ (viz obrázek níže).

   <!-- Smartform naseptavac adres -->
   <script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
   <script type="text/javascript">
       var smartform = smartform || {};
       smartform.beforeInit = function () {
           smartform.setClientId('CLIENT_ID');
       }
   
       smartform.afterInit = function () {
           // Nastavení našeptávání adres. V případě, že nemáte zapnutou validaci poštovných adres, odstraňte tento řádek.
           configureAddressesValidation();
           // Nastavení validace emailových adres. V případě, že nemáte zapnutou validaci emailových adres, odstraňte tento řádek.
           configureEmailValidation();
   
   
           smartform.rebindAllForms(function () {
               $("#billCountryId").change(smartformSetCountry);
               smartformSetCountry();
               let a = smartform.getInstance("smartform-instance-email").emailControl.addValidationCallback(emailValidationCallback);
           });
       }
   
       function configureEmailValidation() {
           //Emaily
           if ($("#email").length) {
               $("#email").off()
               $("#email").addClass("smartform-email smartform-instance-email");
               $("#email").parent().removeClass("js-validated-element-wrapper");
               $("#email").focusout(function () {
                   if (this.value == "") {
                       $("#email").addClass("js-error-field")
                       document.querySelector('#email ~ .js-validator-msg').classList.remove("msg-email-ok")
                       document.querySelector('#email ~ .js-validator-msg').innerHTML = "Povinné pole"
                   }
               })
               createEmailResult()
           }
       }
   
       function configureAddressesValidation() {
           //Poštovní adresy
           if ($("#billStreet").length) {
               if ($("#billHouseNumber").length) {
                   $("#billStreet").addClass("smartform-address-street smartform-instance-1");
                   $("#billHouseNumber").addClass("smartform-address-number smartform-instance-1");
               } else {
                   $("#billStreet").addClass("smartform-address-street-and-number smartform-instance-1");
               }
               $("#billCity").addClass("smartform-address-city smartform-instance-1");
               $("#billZip").addClass("smartform-address-zip smartform-instance-1");
           }
   
           if ($("#deliveryStreet").length) {
               if ($("#deliveryHouseNumber").length) {
                   $("#deliveryStreet").addClass("smartform-address-street smartform-instance-2");
                   $("#deliveryHouseNumber").addClass("smartform-address-number smartform-instance-2");
               } else {
                   $("#deliveryStreet").addClass("smartform-address-street-and-number smartform-instance-2");
               }
               $("#deliveryCity").addClass("smartform-address-city smartform-instance-2");
               $("#deliveryZip").addClass("smartform-address-zip smartform-instance-2");
           }
       }
   
       function createEmailResult() {
           let emailResult = document.createElement("div");
           emailResult.classList.add("js-validator-msg")
           emailResult.style.display = 'hidden'
           $("#email").after(emailResult)
       }
   
       /* Validační callback pro validaci emailu. */
       function emailValidationCallback(response) {
           console.log(response);
           let emailResult = document.querySelector('#email ~ .js-validator-msg')
           if (emailResult == null) {
               createEmailResult()
               emailResult = document.querySelector('#email ~ .js-validator-msg')
           }
           emailResult.classList.add("msg-error")
           if (response) {
               let flags = response.result.flags.c
               if (response.result.resultType === 'EXISTS'||response.result.resultType === 'UNKNOWN') {
                   emailResult.innerHTML = 'E-mailová adresa je v pořádku.'
                   $(emailResult).addClass("msg-email-ok").removeClass("msg-error")
                   $("#email").removeClass("js-error-field")
               } else if (response.result.resultType === 'NOT_EXISTS') {
                   if (flags.some(x => x.c == "MAILBOX_NOT_FOUND")) {
                       emailResult.innerHTML = 'E-mailová schránka neexistuje.'
                   } else if (flags.some(x => x.c == "BAD_SYNTAX")) {
                       emailResult.innerHTML = 'Špatně zadaná e-mailová adresa.'
                   } else if (flags.some(x => x.c == "BAD_DOMAIN")) {
                       emailResult.innerHTML = 'Špatně zadaná doména.'
                   }
                   $("#email").addClass("js-error-field")
               }
               emailResult.style.display = 'block'
           }
       }
   
       function smartformSetCountry() {
           var country = $("#billCountryId option:selected").attr("data-code");
           if (smartform.getInstance("smartform-instance-1"))
               smartform.getInstance("smartform-instance-1").addressControl.setCountry(country);
           if (smartform.getInstance("smartform-instance-2"))
               smartform.getInstance("smartform-instance-2").addressControl.setCountry(country);
       }
   </script>
   <style>
       .msg-email-ok {
           color: green;
       }
   </style>
   

   
5. Ve vloženém HTML kódu nahraďtě řetězec CLIENTID (na 6. řádku) svým zákaznickým ID (clientId), které získáte po přihlášení do Smartform administrace (vpravo nahoře). Např. pokud je vaše ID zákazníka aaaBBBccc, bude upravený řádek v HTML kódu vypadat takto:

          smartform.setClientId('aaaBBBccc');

6. Pokud se rozhodnete aktivovat pouze jednu službu pro vaše stránky, je třeba změnit HTML kód: odstraňte řádek 11, pokud máte aktivovanou validaci e-mailových adres, nebo řádek 13, v případě validace poštovních adres.
7. Nezapomeňte vložený a upravený HTML kód v Shoptet administraci uložit.
8. Zkontrolujte, jestli Smartform funguje na stránce s druhým krokem objednávky. Měl by se zobrazit u fakturační i doručovací adresy.

V případě jakýchkoli problémů nebo dotazů ohledně rozběhnutí Smartformu nás neváhejte kontaktovat. Rádi Vám s integrací našeptávače pomůžeme.