Smartform – jak ho rozběhnout v e-shopu na platformě Shoptet
- 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.
- V administrační aplikaci přidejte doménu Vašeho webu (např. mojedomena.cz).
- Klikněte na aktivaci služeb „Poštovní adresy“ a "Emaily", podle pokynů proveďte platbu.
- 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>
- 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íkaaaaBBBccc
, bude upravený řádek v HTML kódu vypadat takto:smartform.setClientId('aaaBBBccc');
- 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.
- Nezapomeňte vložený a upravený HTML kód v Shoptet administraci uložit.
- 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.