V kostce
- Našeptávač adres Launify se do Sylia vkládá úpravou kódu, Sylius nemá pole pro vlastní skripty v administraci.
- V Syliu 2 stačí přidat vlastní hookable do hooku sylius_shop.base#javascripts a jednu Twig šablonu.
- Layout košíku dědí ze základního layoutu obchodu, takže se skript načte i v kroku s adresou.
- Pole adresy mají v Syliu názvy jako sylius_checkout_address[shippingAddress][street].
- Implementace včetně nasazení a mapování polí košíku zabere vývojáři zhruba 30 minut.
Našeptávač adres pro Sylius od Launify nasadíte přidáním krátkého skriptu do layoutu obchodu. Launify je našeptávač adres pro e-shopy: zákazník v košíku začne psát ulici, vybere adresu z návrhů a Launify doplní město a PSČ. Sylius nemá v administraci pole pro vlastní kód, takže úpravu provede vývojář: v Syliu 2 přes Twig Hooks, ve verzi 1.x přes template events. Pak už jen namapujete pole adresy v košíku. Celá implementace včetně nasazení zabere zhruba 30 minut.
Co našeptávač adres přinese e-shopu na Syliu
- Hotové našeptávání místo vlastního vývoje. Sylius našeptávání adres v základu nenabízí. S Launify ho získáte jednou Twig šablonou a pár řádky konfigurace, bez psaní vlastní integrace adresní služby.
- Méně chybných adres. Zákazník vybírá z existujících adres místo ručního psaní, takže ubude překlepů v ulici, čísle domu i PSČ.
- Bez zásahu do formulářů. Našeptávač pracuje s existujícími poli košíku přes mapování, formulářové typy Sylia zůstávají beze změny.
Co budete potřebovat
- Účet v administraci Launify na app.launify.com.
- Přístup ke zdrojovému kódu projektu na Syliu a možnost nasadit změnu.
Vytvořte API klíč v administraci Launify
- Přihlaste se do administrace Launify.
- Klikněte na Integrace → Vytvořit klíč.
- Vyplňte název klíče a domény e-shopu, na kterých má klíč fungovat, včetně testovacího prostředí, a klikněte na Uložit.
- Na řádku s klíčem klikněte na symbol </> a zkopírujte kód z vyskakovacího okna.
Zkopírovaný kód už obsahuje váš API klíč. Vypadá zhruba takto:
<script>
(function(){
function init() {
if(window.Launify) return;
var s = document.createElement("script");
s.src = "https://cdn.launify.com/launify.min.js?t=" + Date.now();
s.async = true;
s.onload = function() {
try {
var launifyInstance = new Launify('YOUR_API_KEY_HERE');
launifyInstance.updateCountry('CZ');
launifyInstance.init();
} catch(e) { console.error(e); }
};
document.head.appendChild(s);
}
if(document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
</script>Pokud kód kopírujete odsud, nahraďte YOUR_API_KEY_HERE svým klíčem a v updateCountry('CZ') nastavte cílovou zemi e-shopu (ISO kód, např. SK, PL, HU, DE).
Vložte našeptávač adres pro Sylius do layoutu obchodu
Sylius 2.x (Twig Hooks):
- Vytvořte šablonu
templates/shop/launify.html.twiga vložte do ní kód zkopírovaný z Launify. - V souboru
config/packages/sylius_twig_hooks.yamlzaregistrujte šablonu do hooku, který se vykresluje před</body>:
sylius_twig_hooks:
hooks:
'sylius_shop.base#javascripts':
launify:
template: 'shop/launify.html.twig'
priority: -100Pokud chcete skript v hlavičce, použijte místo toho hook sylius_shop.base.head. Po úpravě vyčistěte cache příkazem bin/console cache:clear a změnu nasaďte.
Sylius 1.x (template events): šablonu se skriptem zaregistrujte jako blok v události sylius.shop.layout.javascripts v konfiguraci sylius_ui.events. Layout obchodu tuto událost vykresluje na konci stránky včetně košíku.
Máte v layoutu obchodu už Google Tag Manager? Pak můžete kód Launify přidat jako tag typu Vlastní HTML v GTM a nasazení nové verze aplikace se úplně vyhnout. Postup popisuje návod Google Tag Manager.
Namapujte pole košíku
V administraci Launify klikněte na Integrace a sjeďte k části Mapování vstupů a výstupů. První mapovací skupina je už připravená, upravte ji podle polí vašeho košíku nebo přidejte další. Pole můžete zadat podle atributu id, name, class nebo data atributu.
Výchozí formulář adresy v košíku Sylia používá standardní pojmenování Symfony formulářů:
| Údaj | Doručovací adresa (atribut name) | Fakturační adresa (atribut name) |
|---|---|---|
| Ulice | sylius_checkout_address[shippingAddress][street] | sylius_checkout_address[billingAddress][street] |
| Město | sylius_checkout_address[shippingAddress][city] | sylius_checkout_address[billingAddress][city] |
| PSČ | sylius_checkout_address[shippingAddress][postcode] | sylius_checkout_address[billingAddress][postcode] |
Pro doručovací a fakturační adresu vytvořte dvě samostatné mapovací skupiny. Pokud máte formulář upravený, ověřte si názvy v prohlížeči (pravým tlačítkem na pole → Prozkoumat). Když si nebudete vědět rady, napište nám a mapování nastavíme za vás.
Jak ověřit, že našeptávač funguje
- Vložte zboží do košíku a přejděte na krok s adresou.
- Začněte psát ulici do pole adresy. Měly by se objevit návrhy adres.
- Po výběru návrhu zkontrolujte, že se správně doplnilo město a PSČ.
- Změňte zemi nebo zaškrtněte odlišnou fakturační adresu a ověřte, že našeptávač funguje i po překreslení formuláře.
Časté otázky
Má Sylius v administraci pole pro vlastní skripty?
Ne. Sylius je framework pro vývojáře a vlastní skripty se do obchodu přidávají v kódu projektu. V Syliu 2 je nejjednodušší cestou Twig Hook, ve verzi 1.x template event. Úprava je malá, jde o jednu Twig šablonu a několik řádků konfigurace, ale vyžaduje nasazení nové verze aplikace.
Jak dlouho trvá nasazení našeptávače na Sylius?
Zhruba 30 minut práce vývojáře. Vytvoření API klíče a Twig šablony zabere pár minut, registrace hooku a vyčištění cache další pár minut a zbytek času připadá na nasazení, namapování doručovací i fakturační adresy a test. Pokud máte v layoutu Google Tag Manager, zvládnete to bez nasazení.
Načte se skript i v košíku Sylia?
Ano. Layout košíku v Syliu dědí ze základního layoutu obchodu, takže hooky pro hlavičku i pro skripty na konci stránky se vykreslí i v kroku, kde zákazník zadává adresu. Platí to pro Sylius 2 i pro verzi 1.x. Pokud máte vlastní layout košíku, zkontrolujte, že z těchto šablon dědí.
Funguje našeptávač s Live Components v Syliu 2?
Formulář adresy se v Syliu 2 vykresluje jako Live Component a při změnách se může částečně překreslit, například po změně země. Pokud by po překreslení návrhy adres zmizely, ozvěte se nám. Společně s vaším vývojářem ověříme konkrétní formulář a navrhneme řešení.
Zpomalí skript Launify můj e-shop?
Ne výrazně. Skript se načítá asynchronně, takže neblokuje vykreslení stránky, a je optimalizovaný na rychlost. Pokud chcete zátěž minimalizovat úplně, zaregistrujte šablonu jen do hooků layoutu košíku místo základního layoutu. Na ostatních stránkách se pak skript vůbec nenačte.
Hledáte obecný postup pro jinou platformu? Podívejte se na návod Vlastní integrace nebo na nasazení přes Google Tag Manager. Přehled všech podporovaných platforem najdete v článku Launify teď funguje na více než 20 e-shopových platformách.
Nebudete si vědět rady?
Napište nám a integraci nastavíme společně.