Багатомовність та переклад сайту

Назад

Мови

Багатомовність та пошукові системи

Якщо у вас є кілька версій сторінки різними мовами або для різних регіонів, допоможіть Google ідентифікувати їх. Тоді в результатах пошуку будуть представлені ті версії ваших сторінок, які найкраще підходять для мови та регіону користувача.
Один зі способів реалізації багатомовних сайтів - це тег з атрибутом hreflang. Приклад такого тега:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />

На різних сторінках сайту (категоріях, сторінках, статтях, картках товарів та інших) реалізована функція багатомовності. Наприклад, якщо у вас додана картка товару Англійською, Білоруською, Російською та Українською мовами, то достатньо у всіх картках товарів в комірці «Товар на інших мовах» вказати однакове значення, наприклад - «1». В такому випадку, при відкритті сторінки однією з мов, будуть додані теги hreflang з посиланнями на сторінки іншими мовами. Рекомендується використовувати ID першої картки товару, щоб уникнути дублювання значень та подальших помилок. Наприклад, якщо ви додали товар «Кросівки», з ID «12345» , то додаючи аналогічний товар Англійською мовою, вкажіть у пункті «Товар на інших мовах» - «12345».

Основна вибрана мова сайту буде позначена додатковим тегом hreflang="x-default".

Як створити багатомовний сайт?

Створіть сторінку однією мовою, потім таку ж сторінку іншою мовою, і заповніть поле «Сторінка на інших мовах» однаковим значенням, наприклад, ID першої створеної сторінки. Таким же чином заповнюйте статті та картки товару. Сайт автоматично повідомить пошуковику про сторінку іншими мовами, а також про головну сторінку (головна сторінка буде відповідати основній мові сайту, яку ви можете вказати в розділі «Налаштування», «Стартова сторінка»).

Для створення рубрик каталогу статей або магазину, рекомендуємо використовувати приставку мови. Наприклад, рубрику «dress», можна створити іншими мовами, використовуючи приставку «dress_ua», «dress_de», «dress_fr»…
Використовувати однаковий шлях до рубрики іншими мовами можливо, але при імпорті даних, наприклад, товару, можуть виникнути помилки, оскільки платформа не зможе розпізнати мову рубрики, в яку він додається. Тому ми рекомендуємо використовувати приставки в розділах з рубриками, каталозі статей та інтернет-магазині. При використанні мовних приставок як описано вище, змінна «Категорія на інших мовах» буде встановлена автоматично.

При створенні карток товару, «Код товару» повинен бути унікальним, тому іншою мовою можна використовувати, наприклад, власні закінчення «SKU/CODE_EN». Якщо вказано «Товар на іншій мові», то при зміні основних даних (вартість, наявність, новинка, хіт продажу, доступ), так само будуть оновлені всі картки товару, вказані як альтернативна версія основного товару.
«Пошуковий фільтр» та «Блоки/меню» можна використовувати одночасно і для всіх мов, і окремо вказати мову, на якій його відображати. Наприклад, створіть «Блоки/меню», Шапку сайту, і розташуйте на всіх сторінках, вказавши мову «Російська (ru)». Такий блок буде відображатися всюди, тільки якщо відкрита Російська версія сайту. Таким же чином можна створити шапку і для інших мов. Якщо вам необхідно розмістити якийсь код, то не обов'язково створювати такий «Блоки/меню» для кожної мови, достатньо вказати мову «All (Всі)», і блок буде відображатися незалежно від вибраної відвідувачем мови.
Префікс мови на платформі BooStore.pro вказується на початку, наприклад, «/ua/page.htm».

Швидкий переклад каталогу товарів на сайті

Для швидкого перекладу магазину ви можете використовувати імпорт/експорт через CSV/XLS, а також сервіс Google Translate для документів.

Категорії магазину


Експортуйте «Категорії магазину». Замініть значення «ПОПЕРЕДНЬОЇ» мови в комірці мова, на значення «НОВОЇ» мови, а також виконайте переклад назв та описів (наприклад за допомогою сервісу Google Translate для документів, попередньо зберігши файл у XLSX). При цьому «Мова» всіх дочірніх категорій буде такою ж, як мова основної категорії, в яку вони додаються. Тому для головної категорії (батько якої є - «main») важливо замінити значення комірки «Мова» на «НОВА МОВА». Для усунення можливих помилок при подальшому імпорті товарів, рекомендуємо використовувати унікальні імена, або додавати в «ім'я» нових категорій «_НОВАМОВА». Наприклад, «category_en», де «en» - нова мова, що додається.

Перед виконанням імпорту необхідно зберегти файл у форматі «XLS» або «CSV». Після виконання імпорту перевірте, щоб мова нових категорій була правильною. Якщо з якоїсь причини вказана невірна мова, то замініть мову головної категорії вашого каталогу, в яку вони додані, в розділі «Магазин» - «Категорії магазину». Для всіх дочірніх підкатегорій мова також буде замінена. Якщо категорій не багато, то можна скопіювати категорії, замінивши в них мову та найменування, в розділі «Магазин» - «Категорії магазину».


Додавання товарів

Виконайте експорт товарів у розділі «Магазин» - «Експорт товарів». Встановіть галочку «Вивантажити все». Зніміть галочку «Не експортувати товари, яких немає в наявності», а також встановіть галочку «Експортувати категорії без транслітерації» - для спрощення підбору категорій перекладених товарів. Виконайте переклад файлу за допомогою сервісу Google Translate для документів, попередньо зберігши файл у XLSX. За допомогою формул додайте в категорії «_мова», або замініть їх імена на нові створені категорії. Перемістіть значення стовпця «ID» у стовпець «Товари на інших мовах». Обов'язково видаліть значення для стовпця «ID», щоб не перезаписати існуючі товари. А також замініть «Код товару», наприклад аналогічно додавши «_мова» за допомогою формул, оскільки товари з аналогічним «ID» або «Кодом товару» будуть перезаписані.
Виконайте імпорт, в розділі «Магазин» - «Імпорт товарів». Швидко заповнити відповідність комірок ви можете натиснувши «Поля з файлу, вкажіть відповідність» - «Заповнити вибір полів відповідностей згідно з файлом експорту (поля «Вивантажити все»)».

Крім того, для створення коректної розмітки для пошуковиків, а також перенаправлення між товарами різними мовами, в товарах основної мови виконайте експорт та повторний імпорт, скопіювавши значення комірки «ID» у стовпець «Товари на інших мовах». (При цьому можна імпортувати тільки одну комірку «Товар на інших мовах» і вказати ID або «Код товару», за якими будуть знайдені товари для перезапису). Таким чином і нові, і раніше створені товари будуть мати ідентичні значення «Товар на інших мовах».

Багатомовність та меню вибору мови

Ви можете розмістити короткий код {HOTENGINE-SC:langmenu} і вказати в налаштуваннях сайту список доступних мов або розмістити код з прикладу нижче.
Код з прикладу нижче формує кнопку переходу на альтернативні мови, при цьому якщо до сторінки/статті/картки товару вказана альтернативна мовна версія, то вона буде задіяна.


1) Вставте код CSS в Редактор дизайну, у вкладку CSS.
2) Додайте JavaScript в блок/меню, що відображається на всіх сторінках.
3) Вставте код випадаючого списку мов в блок/меню, в якому хочете його розташувати, наприклад в шапку сайту.
4) Видаліть з блока непотрібні мови (class hotengine-shop-select-language-val)



Код меню вибору мови:
Code: html
<nav class="hotengine-shop-select-language-box">
  <span class="hotengine-shop-select-language" data-lang="ua"></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>

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*/

Файл, що підставляє шляхи в посилання (з link[rel="alternate"]):
Code: JavaScript
<script src="/templates/scripts/hotengine-script-language.js"></script>

Вміст файлу

Зміна текстових елементів на сайті

Багатомовність та заміна стандартних написів

Більшість написів та елементів на сайті відображаються за допомогою CSS псевдоелементів. Наприклад елемент з класом .hotengine-form-feedback-yourname-title має псевдоелемент з текстом.
Текст розділений за допомогою батьківського lang атрибута у елемента html.

Приклад:
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:"আপনার নাম:"; }



Файли з перекладом стандартних значень


Яким чином можна перекласти весь сайт?

Створюючи багатомовний сайт, вкажіть мову в створюваному контенті (сторінці, меню, категорії...).

Використовуйте шляхи із зазначенням мови на початку:

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

Основна мова: вказується при реєстрації (змінюється в «Налаштуваннях» → «Мови та стартова сторінка»).

Товари: мова визначається автоматично за рубрикою, в яку додається товар.

Більшість елементів на сайті ви можете замінювати за допомогою CSS стилів та псевдоелементів.

Написи про кількість товарів

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

Замінюйте lang-1 (де 1 — вибрана одиниця виміру) та (ru) — код мови.

Список значень одиниць виміру:

  • 1 1 шт
  • 2 100 шт
  • 3 1000 шт
  • 4 за 1 упаковку
  • 5 1 кг
  • 6 1000 кг
  • 7 1 м²
  • 8 за 1 метр
  • 9 за 1 км
  • 10 за комплект
  • 11 за 1 годину
  • 12 за 1 день
  • 13 за 1 місяць
  • 14 за 1 рік
  • 15 за сотку
  • 16 за Акр
  • 17 за Гектар
  • 18 за ділянку
  • 19 за об'єкт
  • 30 за 1 мл
  • 31 за 1 л
  • 32 за 1 км³
  • 33 за 1 м³
  • 34 за 1 дм³
  • 35 за 1 см³
  • 36 за 1 mm³
  • 37 за 1 hl
  • 38 за 100 грам
  • 39 1 фунт
  • 40 за 1 грам
  • 41 за 10 кг
  • 42 за 1 центнер
  • 43 за 1 тонна
  • 44 за 1 ар
  • 45 за 1 пара
  • 46 за 1 дюжина
  • 47 за 1 галлон
  • 48 за 1 баррель
  • 49 за 1 хвилину
  • 50 за 1 тиждень
  • 51 за 1 послугу
  • 52 за 1 поїздку
  • 53 за 1 людину
  • 54 за 1 машину
  • 55 за 1 м.п.

Переклад кнопок за допомогою JavaScript

Деякі елементи реалізовані без псевдокласів та CSS елементів. Наприклад, такий елемент як кнопка "Надіслати" в кошику. Для перекладу такого елемента можна використовувати 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 = `Надіслати замовлення`;
        }
    };

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

Детальніше ...
Наприклад, в даному випадку ми змінюємо текст кнопки відправки форми. Код необхідно розмістити на сторінці, де розташована кнопка. Для цього необхідно створити функціональну сторінку - Кошик. І вставити наведений у прикладі код в текст сторінки.

Переклад Пошукового фільтра

Ви можете використовувати один пошуковий фільтр для багатьох мов. Це спростить процес імпорту/експорту товарів та наповнення сайту.
Переклад здійснюється за допомогою інструмента Переклад значень характеристик.

Крім того, ви можете виконати переклад за допомогою JavaScript. Однак при такому перекладі XML вивантаження характеристик на MarketPlac'и буде однією мовою.
Наприклад, розглянемо переклад з Англійської на Російську.
Показати

Створіть «Блок/Меню» та розмістіть його на сторінках, де включено пошуковий фільтр.
Наприклад, в пункті «Введіть символи, при виявленні яких відображати Блок/Меню:» вкажіть:
/ua/shop/
/ua/pers_shop/

Приклад перекладу рядків, а також кнопки «Застосувати».
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>


Приклад перекладу з перезаписом слів:
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>

Аналогічно, ви можете додати інші мови та нові слова, розміщуючи код на відповідні мовні версії сайту.

Акції (таймер зворотного відліку в магазині)

Переклад на прикладі таймера. В товарах передбачена можливість автоматичного створення таймера зворотного відліку. При додаванні товару натисніть галочку "Акційний товар", і в блоці, що з'явився, натисніть "Увімкнути таймер". Встановіть термін закінчення таймера. Після закінчення вказаного терміну можна задати дію, наприклад, видалити акцію або змінити ціну...

Як змінити написи в таймері?

За допомогою CSS стилів можна замінити слова в таймері. Для цього, наприклад, в товарі вставте css html код:
Code: CSS
<style type="text/css">
<!--

/*надпись осталось до конца*/

: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:"Сampaign 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) або lang(ru) - це мова, для якої буде відповідний напис, а далі задано сам блок, для якого змінити напис.


Як використовувати Таймер на інших сторінках?
Вставте наступний код для використання нашого лічильника зворотного відліку:
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>

Щоб змінити написи лічильника, відкрийте файл стилю /templates/javascript_timer_countdown/hotengine_timer_countdown.css, скопіюйте його код, і вставивши на сторінку змініть написи.
Назад