Каталожное отображение виджетов отлично подходит для страниц с большим количеством виджетов одного формата, но с разными товарами. Хорошим примером являются товарные каталоги и статьи с рейтингами или подборками товаров.

Для предоставления возможности массовой установки виджетов используется механизм data-атрибутов, которые прописываются в контейнере виджета на странице (div-блок, на месте которого будет отображаться виджет):

<div data-widget-id="XXXXXX" class="smw3"></div>

При этом, главный код виджета остается неизменным:

<noscript><a href="http://socialmart.ru" title="SocialMart" target="_blank">Виджет от SocialMart</a></noscript>
<script async type="text/javascript" charset="UTF­8"
src="http://widget.socialmart.ru/init.php?render=js&wid=XXXXXX"></script>

Где XXXXXX – ID виджета.

Для настройки используются следующие атрибуты:

  • data-sm-source="CSS_selector"  — данная настройка указывает на html–элемент, в котором указан текст и/или data-model-id , по которому нужно произвести поиск товара. Если у указанного элемента прописан data-model-id , то в данном случае текст игнорируется и поиск производится по указанному id модели.
  • data-sm-source-target="CSS_selector" — необязательная настройка, которая указывает на html–элемент, в который нужно будет вставить виджет. Важно: если настройка установлена, то количество элементов, подходящих под селектор из data-sm-source-target , должно совпадать с количеством элементов, подходящих под селектор из data-sm-source .

Далее рассмотрим каталожное отображение виджетов на примерах.

Использование data-sm-source

Рассмотрим блок html–кода:

<section class="models_post">

    <h1>Смартфоны</h1>

    <div class="model_post">
        <h2 class="model_title">Apple iPhone 7 Plus</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
    </div>

    <div class="model_post">
        <h2 class="model_title">Samsung Galaxy S8+</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
    </div>

</section>

В этом примере заголовок указан в h2.model_title . Для того, чтобы разместить автоматически виджеты под заголовком, в контейнер виджета нужно прописать настройку data-sm-source=".model_post .model_title"  (селектор в jQuery стиле):

<div data-widget-id="XXXXXX" data-sm-source=".model_post .model_title" class="smw3"></div>

Где XXXXXX – ID виджета.

Данный код при инициализации проставит виджеты под каждым заголовком с параметром поиска по тексту, указанному в самой настройке:

Использование data-sm-source в комплексе с data-sm-source-target

Допустим, мы хотим, чтобы виджет размещался не под заголовком, а в конкретном месте. Например, под описанием.

Для этого немного модифицируем html–код:

<section class="models_post">

    <h1>Смартфоны</h1>

    <div class="model_post">
        <h2 class="model_title">Apple iPhone 7 Plus</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

    <div class="model_post">
        <h2 class="model_title">Samsung Galaxy S8+</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

</section>

В данном случае div.sm_widget_placeholder — это блок, в котором мы хотим видеть виджет. Для этого добавляем настройку data-sm-source-target :

<div data-widget-id="XXXXXX" data-sm-source=".model_post .model_title" data-sm-source-target=".model_post .sm_widget_placeholder" class="smw3"></div>

Где XXXXXX – ID виджета.

В результате виджет встанет под статьей:

Использование data-model-id при каталожном отображении виджетов

В некоторых случаях заголовки не соответствуют точному названию модели товара:

<section class="models_post">

    <h1>Смартфоны</h1>

    <div class="model_post">
        <h2 class="model_title">Айфон семь плюс</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

    <div class="model_post">
        <h2 class="model_title">Самсунг галакси с8 плюс</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

</section>

В таком случае механизм поиска вряд ли найдет подходящий товар. Это можно исправить с помощью data–атрибута data-model-id :

<section class="models_post">

    <h1>Смартфоны</h1>

    <div class="model_post">
        <h2 class="model_title" data-model-id="14206711">Айфон семь плюс</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

    <div class="model_post">
        <h2 class="model_title" data-model-id="1722193758">Самсунг галакси с8 плюс</h2>
        <p class="model_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic facere similique, alias necessitatibus nam quae. Fugit amet cum ratione, dolores facilis deserunt, atque est possimus et pariatur consequuntur laborum voluptatum.</p>
        <div class="sm_widget_placeholder"></div>
    </div>

</section>

Теперь результат будет соответствовать ожиданиям:

Каталожное отображение виджетов в таблицах

Рассмотрим использование каталожного режима отображения виджетов в таблице вида:

<table class="table-list">
    <tbody>
        <tr>
            <td data-model-id="14206711" class="title">Apple iPhone 7 Plus</td>
            <td data-model-id="1722193758" class="title">Samsung Galaxy S8+</td>
            <td data-model-id="1723656284" class="title">Xiaomi Mi6</td>
        </tr>
        <tr>
            <td class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dicta odit fugit quasi, placeat, architecto sit, tempore nesciunt earum dolor magni accusamus ducimus, asperiores modi minus odio laboriosam deleniti beatae.</td>
            <td class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dicta odit fugit quasi, placeat, architecto sit, tempore nesciunt earum dolor magni accusamus ducimus, asperiores modi minus odio laboriosam deleniti beatae.</td>
            <td class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum dicta odit fugit quasi, placeat, architecto sit, tempore nesciunt earum dolor magni accusamus ducimus, asperiores modi minus odio laboriosam deleniti beatae.</td>
        </tr>
        <tr>
            <td class="price"></td>
            <td class="price"></td>
            <td class="price"></td>
        </tr>
    </tbody>
</table>

В этой таблице названия модели и data-model-id  указаны в td.title . Виджеты хотим отобразить в td.price . Для этого модифицируем код виджета:

<div data-widget-id="XXXXXX" data-sm-source=".table-list .title" data-sm-source-target=".table-list .price" class="smw3"></div>

Где XXXXXX – ID виджета.

Результатом будет следующая таблица:

Пожалуйста, не копируйте примеры кода из инструкции, так как часто случаются потери или замены символов из-­за форматирования текста инструкции и интерпретации этого текста редакторами при вставке на сайт. Если код разметки не работает, попробуйте набрать атрибуты вручную.

Вы нашли ответ?