Как вставить виджет на Турбо-страницу

Виджеты Маркета и Беру можно вставлять на Турбо-страницы.

  1. Как разместить код виджета
  2. Как добавить несколько виджетов на одну страницу

Как разместить код виджета

После того как вы создали код виджета в конструкторе или вручную:

  1. Убедитесь, что в виджете не использован поиск товаров по запросу из HTML-элемента (параметр searchSelector) или по изображению из элемента img (параметр searchImageSelector). Эти способы поиска не поддерживаются Турбо-страницами.

  2. Вставьте код с параметрами виджета в раздел <![CDATA[]]> внутри элемента turbo:content. Например:

    <rss ...>
      <channel>
        ...
        <item turbo="true">
          ...
          <turbo:content>
            <![CDATA[
              <!-- Текст перед виджетом -->
              <script type="text/javascript">
                window.YaMarketAffiliate.createWidget({
                  containerId: "marketWidget",
                  ...  // Параметры виджета
                });
              </script>
              <!-- Текст после виджета -->
            ]]>
          </turbo:content>
        </item>
        ...
      </channel>
    </rss>

    Код подключения к API виджетов и HTML-контейнер для отображения виджета вставлять не надо.

    Подробнее о создании Турбо-страниц см. в разделе Разметка RSS-канала технической документации Турбо-страниц.

Как добавить несколько виджетов на одну страницу

Чтобы разместить несколько виджетов на одной странице, вставьте код каждого виджета с его параметрами (элемент script) в раздел <![CDATA[]]> внутри элемента turbo:content. У каждого виджета должно быть свое значение параметра containerId. Например:

<rss ...>
  <channel>
    ...
    <item turbo="true">
      ...
      <turbo:content>
        <![CDATA[
          <!-- Текст перед первым виджетом -->
          <script type="text/javascript">
            window.YaMarketAffiliate.createWidget({
              containerId: "marketWidget1",
              ...  // Параметры первого виджета
            });
          </script>
          <!-- Текст между первым и вторым виджетами -->
          <script type="text/javascript">
            window.YaMarketAffiliate.createWidget({
              containerId: "marketWidget2",
              ...  // Параметры второго виджета
            });
          </script>
          <!-- Текст после второго виджета -->
        ]]>
      </turbo:content>
    </item>
    ...
  </channel>
</rss>

Способ, описанный в разделе Как вставить виджеты на сайт (создание массива объектов с параметрами виджетов и циклический вызов метода YaMarketAffiliate.createWidget для этих объектов), на Турбо-страницах не поддерживается. Одному виджету должен соответствовать один элемент script и наоборот.