Pokročilé nastavení
Každý e-shop potřebuje jiné nastavení. Naše Vue.Js komponenty jsou na to připravené. Ukážeme si jak změnit měnu a překlady. Podíváme se na statickou a dynamickou konfiguraci.
Změna měny
Změnu měny lze provést přidáním následujícího kusu kódu:
Apicart.configure({
// ...
vueComponentsTranslator: {
currencyFormats: {
en: {
currency: {
currency: 'CZK'
}
}
}
}
// ...
})
U překladů i měny používáme vue-i18n a detailní nastavení lze nalézt v oficiální dokumentaci.
Překlady
Aktuálně máme dostupné 3 jazyky:
- Angličtina (výchozí)
- Čeština
- Slovenština
Všechny překlady jsou dostupné v Github repozitáři ve složce localization.
Pokud chcete upravit nějaký překlad přímo na webu, provedete to následovně.
Řekněme, že chcete změnit text tlačítka koupit z Přidat do košíku na Koupit Otevřete si soubor s českými překlady. Najdete si tlačítko koupit, které má klíč buyButton. Přidejte následující kus kódu do stránky
Apicart.configure({
// ...
vueComponentsTranslator: {
// ...
actualLocale: 'cs', // cs-CZ, en, en-US, sk
localization: {
cs: {
buyButton: "Koupit"
}
}
}
// ...
})
Pokud bychom chtěli upravit zanořený překlad, tak zkopírujeme sekci, kterou chceme upravit, odstraníme překlady, které nepotřebujeme a přidáme vlastn. Zkusíme takto změnit například tlačítko dropdownu košíku.
Kód bude vypadat takto:
Apicart.configure({
// ...
vueComponentsTranslator: {
// ...
localization: {
cs: {
cartDropdown: {
toggleButton: "Nákupní košík"
}
}
}
}
// ...
})
Statická konfigurace
Statická konfigurace se nastavuje ještě před načtením jakéhokoliv našeho skriptu. Využívá se hlavně pro to, že některé věci mohou být nastavené už v základu na jednom místě. Zároveň některé naše skripty potřebují konfiguraci ještě před tím, než se načtou. Taková konfigurace je třeba pro cache, zda-li se má vše přecachovat s novým nahráním aplikace nebo ne.
var ApicartConfig = {
// You can configure dev environment like this
env: 'dev',
storage: {
// Random string, number or a date.
// When the cache key is different then the one in customer browser, Apicart will purge existing cache and will load new data
// Cache key must be set before any of our script is loaded
cacheKey: 3
}
// ...
}
Dynamická konfigurace
Dynamická konfigurace se provádí přes Apicart.configure(). Může být použita po načtení našich skriptů a spouští událost v Event Dispatcheru apicart:configured.
Apicart.configure({
// ...
});
Apicart.Utils.EventDispatcher.addListener('custom-configuration-listener', 'apicart:configure', () => {
alert('Apicart configured');
});
Kam teď?
Aplikaci můžete spustit zdarma například pomocí Github Pages. Nepotřebujete k tomu ani doménu. Zde je například jednoduchý návod, jak si Github Pages vytvořit.
Na Github Pages je spuštěn i náš https://sandbox.apicart.net.
V případě jakéhokoliv dotazu nás neváhejte kontaktovat na e-mail support@apicart.net.