Как изменить тексты и стили виджетов

Замените тексты и добавьте CSS-стили в коде, если цветов, отступов и переключателей из раздела Виджеты не хватает. Код добавляется в вызов aplaut.init на сайте или в скрипт провайдера.

Замените тексты

1. Найдите ключ нужного текста в словаре переводов.
2. Передайте в texts только те ключи, которые меняете, сохранив путь до них.

aplaut.init(access_token, {
  locale: "ru",
  texts: {
    ru: {
      reviews: { title: "Отзывы покупателей" },
    },
  },
});

Переменные в фигурных скобках, например {count}, виджет подставляет сам. Формы множественного числа задаются меткой {plural: …} внутри строки. Виджет заменяет метку числом из count и подходящей формой слова:

texts: {
  ru: {
    reviews: {
      summary: {
        hint: 'По {plural: [["zero","оценкам"],["one","оценке"],["two","оценкам"],["few","оценкам"],["many","оценкам"]]} покупателей',
      },
    },
  },
},

Названия форм (one, few, many и другие) те же, что у соседних строк словаря.

Правила публикации в форме отзыва

Тексты блока Правила лежат в ветке form.reviews.footer.terms: для формы вопроса — form.questions.footer.terms, для формы ответа — form.reply.footer.terms. Ключи rules, description и agreement принимают HTML, title выводится простым текстом. В description и agreement можно вставить {privacy_link}: виджет заменит его ссылкой на правила обработки персональных данных.

texts: {
  ru: {
    form: {
      reviews: {
        footer: {
          terms: {
            title: "Правила",
            rules: "<p>Мы публикуем отзывы без оскорблений и ссылок на другие магазины.</p>",
            agreement: 'Я согласен с <a target="_blank" href="{privacy_link}">политикой обработки персональных данных</a>',
          },
        },
      },
    },
  },
},

Саму ссылку задайте в разделе Виджеты → Поведение → Ссылка на правила ПД.

Переключите язык

Встроенные языки — ru, en и kz, язык задаёт обязательный ключ locale. Для любого другого языка передайте в texts словарь целиком: подстановки из русского словаря нет, и ключи без перевода покажутся как есть, например reviews.title.

Чтобы сменить язык без перезагрузки, вызовите aplaut.setLocale({ locale: "en" }). Переключиться можно только на язык из locale или на полностью переданный в texts. Новый язык получают тексты, которые виджеты выводят после вызова, поэтому вызывайте метод до того, как покупатель откроет виджет.

Добавьте свои CSS-стили

Метод aplaut.applyStyles добавляет CSS в <head> страницы и во все виджеты внутри Shadow DOM, включая те, что появятся позже. Стили действуют на всю страницу, поэтому начинайте селекторы с классов виджета, например .aplaut-review для карточки отзыва. Классы элементов видны в инструментах разработчика браузера.

aplaut.applyStyles(".aplaut-review", {
  "background-color": "#f5f5f5",
  "border-radius": "8px",
});

Имена свойств пишутся через дефис, значения применяются с !important. Чтобы передать готовый CSS, вызовите метод со строкой и ключом. Повторный вызов с тем же ключом заменит стили, а не добавит вторые:

aplaut.applyStyles(".aplaut-review { background: #fff !important; }", "review-card-theme");

Загрузчик из раздела Виджеты выдаёт короткий список методов без applyStyles. Вызывайте метод после загрузки скрипта виджетов или добавьте его в массив методов загрузчика: полный массив — в справочнике JS API.

Проверка результата

Откройте страницу товара в режиме инкогнито. Заголовок и правила в форме показывают ваши тексты, карточки отзывов — ваши стили. Если текст не изменился, сверьте путь ключа со словарём: опечатка в любом уровне вложенности оставляет исходный текст.

Смотрите также: справочник темы оформления, справочник JS API виджетов.