Wielojęzyczność i tłumaczenie strony

Temu

Języki

Wielojęzyczność i wyszukiwarki

Jeśli masz kilka wersji strony w różnych językach lub dla różnych regionów, pomóż Google je zidentyfikować. Wtedy w wynikach wyszukiwania zostaną przedstawione te wersje Twoich stron, które najlepiej odpowiadają językowi i regionowi użytkownika.
Jednym ze sposobów realizacji wielojęzycznych stron jest tag z atrybutem hreflang. Przykład takiego tagu:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />

Na różnych stronach witryny (kategoriach, stronach, artykułach, kartach produktów i innych) zaimplementowano funkcję wielojęzyczności. Na przykład, jeśli dodałeś kartę produktu w języku angielskim, białoruskim, rosyjskim i ukraińskim, wystarczy we wszystkich kartach produktów w polu «Produkt w innych językach» podać tę samą wartość, na przykład - «1». W takim przypadku, przy otwarciu strony w jednym z języków, zostaną dodane tagi hreflang z linkami do stron w innych językach. Zaleca się używanie ID pierwszej karty produktu, aby uniknąć duplikowania wartości i późniejszych błędów. Na przykład, jeśli dodałeś produkt «Buty sportowe» z ID «12345», to dodając podobny produkt w języku angielskim, wskaż w punkcie «Produkt w innych językach» - «12345».

Główny wybrany język witryny zostanie oznaczony dodatkowym tagiem hreflang="x-default".

Jak utworzyć wielojęzyczną stronę?

Utwórz stronę w jednym języku, następnie tę samą stronę w innym języku i wypełnij pole «Strona w innych językach» tą samą wartością, na przykład, ID pierwszej utworzonej strony. W ten sam sposób wypełniaj artykuły i karty produktu. Strona automatycznie poinformuje wyszukiwarkę o stronie w innych językach, a także o stronie głównej (strona główna będzie odpowiadać głównemu językowi strony, który możesz wskazać w sekcji «Ustawienia», «Strona startowa»).

Do tworzenia kategorii katalogu artykułów lub sklepu zalecamy używanie prefiksu języka. Na przykład kategorię «dress» można utworzyć w innych językach, używając prefiksu «dress_ua», «dress_de», «dress_fr»…  
Używanie tej samej ścieżki do kategorii w innych językach jest możliwe, ale przy imporcie danych, na przykład produktu, mogą wystąpić błędy, ponieważ platforma nie będzie w stanie rozpoznać języka kategorii, do której jest dodawany. Dlatego zalecamy używanie prefiksów w sekcjach z kategoriami, katalogu artykułów i sklepie internetowym. Przy użyciu prefiksów językowych jak opisano powyżej, zmienna «Kategoria w innych językach» zostanie ustawiona automatycznie.

Przy tworzeniu kart produktu, «Kod produktu» musi być unikalny, dlatego w innym języku można użyć na przykład własnych końcówek «SKU/CODE_EN». Jeśli określony jest «Produkt w innym języku», to przy zmianie danych podstawowych (koszt, dostępność, nowość, hit sprzedaży, dostęp), zostaną zaktualizowane wszystkie karty produktu wskazane jako alternatywna wersja głównego produktu.
«Filtr wyszukiwania» i «Bloki/menu» można używać jednocześnie dla wszystkich języków i osobno określić język, na którym go wyświetlać. Na przykład, utwórz «Bloki/menu», nagłówek strony i umieść na wszystkich stronach, podając język «Rosyjski (ru)». Taki blok będzie wyświetlany wszędzie, tylko jeśli otwarta jest rosyjska wersja strony. W ten sam sposób można utworzyć nagłówek dla innych języków. Jeśli potrzebujesz umieścić jakiś kod, nie musisz tworzyć takich «Bloków/menu» dla każdego języka, wystarczy określić język «All (Wszystkie)», a blok będzie wyświetlany niezależnie od języka wybranego przez odwiedzającego.
Prefiks języka na platformie BooStore.pro jest podawany na początku, na przykład «/pl/page.htm».

Szybkie tłumaczenie katalogu produktów na stronie

Do szybkiego tłumaczenia sklepu możesz użyć importu/eksportu przez CSV/XLS, a także usługi Google Translate dla dokumentów.

Kategorie sklepu


Wyeksportuj «Kategorie sklepu». Zastąp wartość «POPRZEDNIEGO» języka w komórce język, na wartość «NOWEGO» języka, a także wykonaj tłumaczenie nazw i opisów (na przykład za pomocą usługi Google Translate dla dokumentów, wcześniej zapisując plik w XLSX). Przy tym «Język» wszystkich podrzędnych kategorii będzie taki sam, jak język kategorii głównej, do której są dodawane. Dlatego dla kategorii głównej (której rodzicem jest «main») ważne jest zastąpienie wartości komórki «Język» na «NOWY JĘZYK». Aby uniknąć możliwych błędów przy późniejszym imporcie produktów, zalecamy używanie unikalnych nazw lub dodawanie do «nazwy» nowych kategorii «_NOWYJĘZYK». Na przykład «category_en», gdzie «en» to nowy dodawany język.

Przed wykonaniem importu należy zapisać plik w formacie «XLS» lub «CSV». Po wykonaniu importu sprawdź, czy język nowych kategorii jest odpowiedni. Jeśli z jakiegoś powodu podano nieprawidłowy język, zastąp język kategorii głównej swojego katalogu, do której są dodane, w sekcji «Sklep» - «Kategorie sklepu». Dla wszystkich podrzędnych podkategorii język również zostanie zastąpiony. Jeśli kategorii nie jest dużo, można skopiować kategorie, zastępując w nich język i nazwę, w sekcji «Sklep» - «Kategorie sklepu».


Dodawanie produktów

Wykonaj eksport produktów w sekcji «Sklep» - «Eksport produktów». Zaznacz pole «Wyeksportuj wszystko». Odznacz pole «Nie eksportuj produktów, których nie ma w magazynie», a także zaznacz pole «Eksportuj kategorie bez transliteracji» - w celu uproszczenia doboru kategorii tłumaczonych produktów. Wykonaj tłumaczenie pliku za pomocą usługi Google Translate dla dokumentów, wcześniej zapisując plik w XLSX. Za pomocą formuł dodaj do kategorii «_język» lub zastąp ich nazwy na nowo utworzone kategorie. Przenieś wartości kolumny «ID» do kolumny «Produkty w innych językach». Koniecznie usuń wartości dla kolumny «ID», aby nie nadpisać istniejących produktów. A także zastąp «Kod produktu», na przykład analogicznie dodając «_język» za pomocą formuł, ponieważ produkty z podobnym «ID» lub «Kodem produktu» zostaną nadpisane.
Wykonaj import w sekcji «Sklep» - «Import produktów». Szybko wypełnić zgodność komórek możesz, klikając «Pola z pliku, wskaż zgodność» - «Wypełnij wybór pól zgodnie z plikiem eksportu (pola «Wyeksportuj wszystko»)».

Ponadto, aby utworzyć poprawną strukturę dla wyszukiwarek, a także przekierowania między produktami w różnych językach, w produktach głównego języka wykonaj eksport i ponowny import, kopiując wartość komórki «ID» do kolumny «Produkty w innych językach». (Przy tym można zaimportować tylko jedną komórkę «Produkt w innych językach» i podać ID lub «Kod produktu», po których zostaną znalezione produkty do nadpisania). W ten sposób zarówno nowe, jak i wcześniej utworzone produkty będą miać identyczne wartości «Produkt w innych językach».

Wielojęzyczność i menu wyboru języka

Możesz umieścić krótki kod {HOTENGINE-SC:langmenu} i określić w ustawieniach strony listę dostępnych języków lub umieścić kod z przykładu poniżej.
Kod z przykładu poniżej tworzy przycisk przejścia na alternatywne języki, przy czym jeśli do strony/artykułu/karty produktu określona jest alternatywna wersja językowa, to zostanie ona wykorzystana.


1)Wstaw kod CSS do Edytora projektu, w zakładkę CSS.
2)Dodaj JavaScript do bloku/menu wyświetlanego na wszystkich stronach.
3)Wstaw kod rozwijanej listy języków w bloku/menu, w którym chcesz go umieścić, na przykład w nagłówku strony.
4)Usuń z bloku niepotrzebne języki (class hotengine-shop-select-language-val)



Kod menu wyboru języka:
Code: html
<nav class="hotengine-shop-select-language-box">
  <span class="hotengine-shop-select-language" data-lang="pl"></span>
  <span class="hotengine-shop-select-language-values">
  <li><a class="hotengine-shop-select-language-val" data-lang="be"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="de"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="en"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="es"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="fr"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="kk"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="pl"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="ru"></a></li>
  <li><a class="hotengine-shop-select-language-val" data-lang="uk"></a></li>
  </span>
  </nav>

Style CSS:
Code: CSS
/*LANGUAGE BLOCK*/
.hotengine-shop-select-language-box { display:inline-block; width:71px; height:auto; overflow:hidden; border:1px solid transparent;  line-height:30px; position:relative; z-index:1000; }
.hotengine-shop-select-language { display:block; width:100%; text-align:center; cursor:pointer; }
.hotengine-shop-select-language-values { display:block; width:100%; vertical-align: top; position:absolute; background:rgba(255, 255, 255, 0.80); }
.hotengine-shop-select-language-box:hover{ overflow:visible;}
.hotengine-shop-select-language-values:hover li{ position:relative; }
.hotengine-shop-select-language-val { width:auto; display:block; margin:0px; vertical-align:top; cursor:pointer; text-align:center; color:inherit; text-decoration:none; }
.hotengine-shop-select-language-val:hover {background:inherit;color:inherit;}


.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="ru"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="ru"]:after { content: "RU"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="en"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="en"]:after { content: "EN"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="uk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="uk"]:after { content: "UA"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="de"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="de"]:after { content: "DE"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="es"]:after,

.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="es"]:after { content: "ES"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="fr"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="fr"]:after { content: "FR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="kk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="kk"]:after { content: "KK"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="be"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="be"]:after { content: "BE"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="ro"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="ro"]:after { content: "RO"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="tr"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="tr"]:after { content: "TR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="it"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="it"]:after { content: "IT"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="sk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="sk"]:after { content: "SK"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="da"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="da"]:after { content: "DA"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="pl"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="pl"]:after { content: "PL"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="zh"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="zh"]:after { content: "ZH"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="hi"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="hi"]:after { content: "HI"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="ar"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="ar"]:after { content: "AR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="pt"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="pt"]:after { content: "PT"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[lang="bn"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[lang="bn"]:after { content: "BN"; }

/*LANGUAGE BLOCK*/

Plik podstawiający ścieżki w linkach (z link[rel="alternate"]):
Code: JavaScript
<script src="/templates/scripts/hotengine-script-language.js"></script>

Zawartość pliku

Zmiana elementów tekstowych na stronie

Wielojęzyczność i zamiana standardowych napisów

Większość napisów i elementów na stronie jest wyświetlana za pomocą pseudoelementów CSS. Na przykład element z klasą .hotengine-form-feedback-yourname-title ma pseudoelement z tekstem.
Tekst jest rozdzielany za pomocą atrybutu lang elementu nadrzędnego html.

Przykład:
Code: CSS

:lang(ru) .hotengine-form-feedback-yourname-title:after{ content:"Ваше имя:"; }
:lang(en) .hotengine-form-feedback-yourname-title:after{ content:"Your name:"; }
:lang(uk) .hotengine-form-feedback-yourname-title:after{ content:"Ваше ім'я:"; }
:lang(de) .hotengine-form-feedback-yourname-title:after{ content:"Ihr name:"; }
:lang(es) .hotengine-form-feedback-yourname-title:after{ content:"Su nombre:"; }
:lang(fr) .hotengine-form-feedback-yourname-title:after{ content:"Votre nom:"; }
:lang(kk) .hotengine-form-feedback-yourname-title:after{ content:"Сіздің атыңыз:"; }
:lang(be) .hotengine-form-feedback-yourname-title:after{ content:"Ваша імя:"; }
:lang(ro) .hotengine-form-feedback-yourname-title:after{ content:"Numele dvs.:"; }
:lang(tr) .hotengine-form-feedback-yourname-title:after{ content:"Adınız:"; }
:lang(it) .hotengine-form-feedback-yourname-title:after{ content:"Il tuo nome:"; }
:lang(sk) .hotengine-form-feedback-yourname-title:after{ content:"Vaše meno:"; }
:lang(da) .hotengine-form-feedback-yourname-title:after{ content:"Dit navn:"; }
:lang(pl) .hotengine-form-feedback-yourname-title:after{ content:"Twoje imię:"; }
:lang(zh) .hotengine-form-feedback-yourname-title:after{ content:"你的名称:"; }
:lang(hi) .hotengine-form-feedback-yourname-title:after{ content:"आपका नाम:"; }
:lang(ar) .hotengine-form-feedback-yourname-title:after{ content:"اسمك:"; }
:lang(pt) .hotengine-form-feedback-yourname-title:after{ content:"Seu nome:"; }
:lang(bn) .hotengine-form-feedback-yourname-title:after{ content:"আপনার নাম:"; }



Pliki z tłumaczeniem standardowych wartości


Jak można przetłumaczyć całą stronę?

Tworząc wielojęzyczną stronę, wskaż język w tworzonej treści (stronie, menu, kategorii...).

Używaj ścieżek z określeniem języka na początku:

/ua/ /ru/ /en/ /pl/ /kk/ /be/ ...

Główny język: jest wskazywany przy rejestracji (zmieniany w «Ustawienia» → «Języki i strona startowa»).

Produkty: język jest określany automatycznie na podstawie kategorii, do której dodawany jest produkt.

Większość elementów na stronie możesz zastąpić za pomocą stylów CSS i pseudoelementów.

Napisy o ilości produktów

:lang(ru).hotengine-shop-product-price_for-lang-1::after { content: "за 1 szt"; }

Zastępuj lang-1 (gdzie 1 — wybrana jednostka miary) i (ru) — kod języka.

Lista wartości jednostek miary:

  • 1 1 szt
  • 2 100 szt
  • 3 1000 szt
  • 4 za 1 opakowanie
  • 5 1 kg
  • 6 1000 kg
  • 7 1 m²
  • 8 za 1 metr
  • 9 za 1 km
  • 10 za komplet
  • 11 za 1 godzinę
  • 12 za 1 dzień
  • 13 za 1 miesiąc
  • 14 za 1 rok
  • 15 za 1 ar
  • 16 za Akr
  • 17 za Hektar
  • 18 za działkę
  • 19 za obiekt
  • 30 za 1 ml
  • 31 za 1 l
  • 32 za 1 km³
  • 33 za 1 m³
  • 34 za 1 dm³
  • 35 za 1 cm³
  • 36 za 1 mm³
  • 37 za 1 hl
  • 38 za 100 gram
  • 39 1 funt
  • 40 za 1 gram
  • 41 za 10 kg
  • 42 za 1 cetnar
  • 43 za 1 tona
  • 44 za 1 ar
  • 45 za 1 para
  • 46 za 1 tuzin
  • 47 za 1 galon
  • 48 za 1 baryłkę
  • 49 za 1 minutę
  • 50 za 1 tydzień
  • 51 za 1 usługę
  • 52 za 1 podróż
  • 53 za 1 osobę
  • 54 za 1 samochód
  • 55 za 1 m.b.

Tłumaczenie przycisków za pomocą JavaScript

Niektóre elementy są zaimplementowane bez pseudoklas i elementów CSS. Na przykład taki element jak przycisk "Wyślij" w koszyku. Do tłumaczenia takiego elementu można użyć JavaScript.
Code: JavaScript
<script>
(function() {
    const init = () => {
        const submitBtn = document.querySelector(`#hotengine-shop-cart-form .hotengine-form-submit input[type="submit"]`);
        if (submitBtn) {
            submitBtn.value = `Wyślij zamówienie`;
        }
    };

    if (document.readyState === `loading`) {
        document.addEventListener(`DOMContentLoaded`, init);
    } else {
        init();
    }
})();
</script>

Więcej szczegółów ...
Na przykład w tym przypadku zmieniamy tekst przycisku wysyłania formularza. Kod należy umieścić na stronie, gdzie znajduje się przycisk. W tym celu należy utworzyć funkcjonalną stronę - Koszyk. I wstawić podany w przykładzie kod w tekst strony.

Tłumaczenie filtra wyszukiwania

Możesz użyć jednego filtra wyszukiwania dla wielu języków. Uprości to proces importu/eksportu produktów i wypełniania witryny.
Tłumaczenie odbywa się za pomocą narzędzia Tłumaczenie wartości charakterystyk.

Możesz również wykonać tłumaczenie za pomocą JavaScript. Jednak przy takim tłumaczeniu eksport XML charakterystyk na MarketPlac'e będzie w jednym języku.
Na przykład, rozważmy tłumaczenie z Angielskiego na Rosyjski.
Pokaż

Utwórz «Blok/Menu» i umieść go na stronach, gdzie włączony jest filtr wyszukiwania.
Na przykład w punkcie «Wprowadź znaki, przy wykryciu których wyświetlać Blok/Menu:» wskaż:
/ua/shop/
/ua/pers_shop/

Przykład tłumaczenia wierszy oraz przycisku «Zastosuj».
Code: JavaScript
<script>
(function() {
  const $dict = {
    "Color": "Колір",
    "Blue": "Синій",
    "Green": "Зелений",
    "Black": "Чорний"
  };

  /*
  Example translations:
  RU: "Color": "Цвет", "Blue": "Синий", "Green": "Зеленый", "Black": "Черный"
  UA: "Color": "Колір", "Blue": "Синій", "Green": "Зелений", "Black": "Чорний"
  PL: "Color": "Kolor", "Blue": "Niebieski", "Green": "Zielony", "Black": "Czarny"
  */

  const applyTranslations = () => {
    Object.entries($dict).forEach(([txtorig, txtnew]) => {
      const selectors = [
        `#shop_catalog_product_types_id_ajax .product_types_valuebox_checkbox span`,
        `#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block_title`,
        `.shop_catalog_product_properties_block .shop_catalog_product_types_block_title`,
        `.shop_catalog_product_properties_block .product_types_valuebox_checkbox`
      ];

      selectors.forEach(selector => {
        document.querySelectorAll(selector).forEach(el => {
          if (el.textContent.includes(txtorig)) {
            el.innerHTML = txtnew;
          }
        });
      });
    });
  };

  applyTranslations();

  const target = document.getElementById(`shop_catalog_product_types_id_ajax`);
  if (target) {
    const observer = new MutationObserver(() => {
      observer.disconnect();
      applyTranslations();
      observer.observe(target, { childList: true, subtree: true });
    });
    observer.observe(target, { childList: true, subtree: true });
  }

  setTimeout(() => {
    const smartSearchInput = document.querySelector(`.hotengine-smart_search_submit_button input`);
    if (smartSearchInput) smartSearchInput.value = "Застосувати";

    const searchInpButton = document.querySelector(`#searchinp_smart_search .button`);
    if (searchInpButton) searchInpButton.value = "Застосувати";
  }, 100);
})();
  </script>


Przykład tłumaczenia z nadpisywaniem słów:
Code: JavaScript
<script>
 (function() {
  const $dict = {
    "Colour": "Farbe",
    "Blue": "Blau",
    "Green": "Grün",
    "Black": "Schwarz"
  };

  /*
  Example translations:
  RU: "Colour": "Цвет", "Blue": "Синий", "Green": "Зеленый", "Black": "Черный"
  UA: "Colour": "Колір", "Blue": "Синій", "Green": "Зелений", "Black": "Чорний"
  PL: "Colour": "Kolor", "Blue": "Niebieski", "Green": "Zielony", "Black": "Czarny"
  */

  const applyTranslations = (container) => {
    Object.entries($dict).forEach(([txtorig, txtnew]) => {
      const regex = new RegExp(txtorig, "g");
      if (container.innerHTML.includes(txtorig)) {
        container.innerHTML = container.innerHTML.replace(regex, txtnew);
      }
    });
  };

  const target = document.getElementById(`shop_catalog_product_types_id_ajax`);
  if (target) {
    applyTranslations(target);

    const observer = new MutationObserver(() => {
      observer.disconnect();
      applyTranslations(target);
      observer.observe(target, { childList: true, subtree: true });
    });
    observer.observe(target, { childList: true, subtree: true });
  }

  setTimeout(() => {
    const smartSearchInput = document.querySelector(`.hotengine-smart_search_submit_button input`);
    if (smartSearchInput) smartSearchInput.value = "Anwenden";

    const searchInpButton = document.querySelector(`#searchinp_smart_search .button`);
    if (searchInpButton) searchInpButton.value = "Anwenden";
  }, 100);
})();
  </script>

Analogicznie, możesz dodać inne języki i nowe słowa, umieszczając kod na odpowiednie wersje językowe witryny.

Promocje (licznik czasu w sklepie)

Tłumaczenie na przykładzie timera. W produktach przewidziano możliwość automatycznego tworzenia timera odliczania. Przy dodawaniu produktu zaznacz pole "Produkt promocyjny", a w pojawiającym się bloku kliknij "Włącz timer". Ustaw termin wygaśnięcia timera. Po upływie określonego terminu można ustawić działanie, na przykład usunąć promocję lub zmienić cenę...

Jak zmienić napisy w liczniku czasu?

Za pomocą stylów CSS można zastąpić słowa w timerze. W tym celu, na przykład w produkcie, wstaw kod css html:
Code: CSS
<style type="text/css">
<!--

/*napis pozostało do końca*/

:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
   content:"дней";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
   content:"часов";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
   content:"минут";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
   content:"секунд";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
   content:"осталось до конца акции!";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
   content:"Акция завершена!";
}


:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
   content:"days";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
   content:"hours";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
   content:"minute";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
   content:"seconds";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
   content:"left before the end of the campaign!";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
    content:"Campaign complete!";
}


:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
    content:"dni";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
    content:"godziny";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
    content:"minuty";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
    content:"sekundy";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
    content:"pozostało do końca promocji!";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
    content:"Ackia ukończona!";
}






:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"дней";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"часов";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"минут";
}
:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"секунд";
}




:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"days";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"hours";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"minute";
}
:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"seconds";
}



:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"днів";
}
:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"годин";
}
:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"хвилин";
}
:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"секунд";
}


:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"dni";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"godziny";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"minuty";
}
:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"sekundy";
}


-->
</style>


lang(en) lub lang(ru) - to język, dla którego będzie odpowiedni napis, a dalej określony jest sam blok, dla którego zmienić napis.


Jak użyć licznika czasu na innych stronach?
Wstaw następujący kod, aby użyć naszego licznika odliczania:
Code: JavaScript
<div id="hotengine-shop-product-description-akciya-countdown-block"><div id="hotengine-shop-product-description-akciya-countdown"></div><div class="hotengine-shop-product-akciya-countdown-numbers"><span class="hotengine-shop-product-akciya-countdown-numbers-days"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-hours"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-minutes"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-seconds"><i></i></span></div><span class="hotengine-shop-product-description-akciya-countdown-l-left"></span></div>  

<link rel="stylesheet" type="text/css" href="/templates/javascript_timer_countdown/hotengine_timer_countdown.css" />
<script src="/templates/javascript_timer_countdown/hotengine_timer_countdown.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    let timerperiod = 5 * 12 * 60 * 60 * 1000; // timer period, in the example 5 days 12 hours ( 5*12 ...) (for example, here the date is constantly shifting, i.e. current date + XX days.)

    // cookies last visit (subtract last visit time)
    let cookieName = `cookie_lastvisit_countdown_timer`;
    let cookieValue = document.cookie.split(`;`).find(c => c.trim().startsWith(`${cookieName}=`))?.split(`=`)[1];
    
    let cookie_lastvisit_minus = 0;
    if (cookieValue && cookieValue !== "null") {
        cookie_lastvisit_minus = new Date().getTime() - parseInt(cookieValue);
    } else {
        cookie_lastvisit_minus = 0;
    }

    let checkdate = timerperiod - cookie_lastvisit_minus; // to check the date of the last visit and the end of the promotion
    let counterdisable = false;

    if (checkdate > 0) {
        counterdisable = false;
    } else {
        cookie_lastvisit_minus = 0;
        counterdisable = true;
    }

    let cookie_lastvisit_countdown_timerv = new Date().getTime() - cookie_lastvisit_minus;
    document.cookie = `${cookieName}=${cookie_lastvisit_countdown_timerv}; path=/;`;
    // cookies last visit (subtract last visit time)

    let ts = new Date().getTime() + timerperiod - cookie_lastvisit_minus; // set the promotion end date
    hotengine_inittimer("hotengine-shop-product-description-akciya-countdown-block", new Date(ts));
});
</script>

Aby zmienić napisy licznika, otwórz plik stylu /templates/javascript_timer_countdown/hotengine_timer_countdown.css, skopiuj jego kod i wstawiając na stronę zmień napisy.
Temu