Как встроить форму отзыва без виджета отзывов

Поставьте на страницу только форму отзыва виджетов 2.0, если список отзывов выводит ваш сайт или если кнопка «Оставить отзыв» нужна вне карточки товара: например, в списке заказов покупателя. Кнопку и её обработчик делает ваш сайт, форму открывает Aplaut.

Что понадобится

• Загрузчик виджетов 2.0 в <head> страницы и вызов aplaut.init: см. установку на веб-сайте, шаги 1 и 2.
• Чтобы вызывать aplaut.showReviewForm до загрузки скрипта, допишите метод в массив методов загрузчика: см. там же, шаг 2.
• ID товара из каталога, загруженного в Aplaut: значение offer.id.

Шаг 1. Разместите форму на странице

Поставьте тег формы с ID товара вместо тегов остальных виджетов:

<ap-reviews-form data-context-id="12345"></ap-reviews-form>

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

Без виджетов на тот же товар

На странице не должно быть виджета отзывов или вопросов и ответов на тот же товар, и на один товар должна вести одна кнопка. Если на странице есть виджет отзывов, showReviewForm открывает форму этого виджета, а не отдельную.

Шаг 2. Откройте форму по своей кнопке

В обработчике клика сначала передайте данные покупателя, если он вошёл на сайт, затем откройте форму. Поля имени и email в форме будут заполнены, а данные уйдут вместе с отзывом.

Для формы с data-context-id достаточно хеша с тем же ID товара в адресе страницы:

document.querySelector("#write-review").addEventListener("click", () => {
  aplaut.setParams({ name: "Анна", email: "anna@example.com" });
  window.location.hash = "#/mps/reviews/new/12345"; // 12345 — offer.id из data-context-id
});

Хеш с другим ID форма не откроет: её адрес привязан к товару, с которым она загрузилась. Для списка товаров создавайте тег формы с ID нужного товара по клику и только потом меняйте хеш:

document.querySelectorAll("[data-review-product]").forEach((button) => {
  button.addEventListener("click", () => {
    const productId = button.dataset.reviewProduct; // offer.id товара
    let form = document.querySelector(`ap-reviews-form[data-context-id="${productId}"]`);
    if (!form) {
      form = document.createElement("ap-reviews-form");
      form.setAttribute("data-context-id", productId);
      document.body.appendChild(form);
    }
    aplaut.setParams({ name: "Анна", email: "anna@example.com" });
    setTimeout(() => {
      window.location.hash = `#/mps/reviews/new/${productId}`;
    }, 300); // новой форме нужно время, чтобы загрузиться
  });
});

Если на сайте включён isHashRoutingDisabled: true, виджеты не меняют адрес, и форму открывает метод aplaut.showReviewForm(). Товар передайте в том же обработчике через aplaut.setParams({ product_id: "12345" }).

setParams передаёт данные открытым текстом. Если данные покупателя нужно подписать, настройте JWT: см. как настроить вход покупателя для отзывов. Все параметры метода — в справочнике JS API виджетов.

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

Нажмите свою кнопку. Открылась форма отзыва на нужный товар, а для вошедшего покупателя заполнены имя и email. Отправленный отзыв появляется в личном кабинете в разделе Отзывы.

Если форма не открылась:

• тег формы пустой и запросов к Aplaut нет — на странице не вызван aplaut.init;
• адрес страницы не изменился после клика — обработчик не сработал или включён isHashRoutingDisabled, тогда открывайте форму через showReviewForm;
• в консоли ошибка aplaut.showReviewForm is not a function — в загрузчике короткий массив методов;
• ID в хеше не совпадает с data-context-id формы или товара с таким offer.id нет в каталоге;
• форма не открывается повторно на тот же товар — хеш уже стоит в адресе, сбросьте его перед новой установкой.