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.

​