prostore.bullets – инфо-блоки в обход настроек темы

Данный блок замещает собой содержимое поля настроек темы код инфо-блоков (HTML):


Для чего нужен блок

  • В поле блоков редактировать проще.
  • Чтобы после сброса настроек темы дизайна (например после обновления темы) не пришлось восстанавливать содержимое.


Код инфо-блоков

Исходный код инфо-блоков такой: 

<!-- Первый инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-truck"></i>
    <div class="bullet-body">                
        <div class="bullet-heading">Доставка по России</div>
        111Мы доставим ваш заказ курьером по Москве и Петербургу или службой экспресс-доставки по всей России.
    </div>
</li>


<!-- Второй инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-truck"></i>
    <div class="bullet-body">                
        <div class="bullet-heading">Оплата онлайн</div>
        Оплатите заказ банковской картой, наличными в ближайшем платежном терминале или наличными.
    </div>
</li>


<!-- Третий инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-truck"></i>
    <div class="bullet-body">                
        <div class="bullet-heading">Магазин в Москве</div>
        Будем рады видеть вас в нашем магазине по адресу г. Москва, ул. Крымский Вал, д. 3, стр. 2.
    </div>
</li>

Каждый инфо-блок – это то, что находится между тегами <li></li>
Вы можете создать большее количество блоков по аналогии.

Чтобы поменять иконку измените в теге <i class="bullet-icon fa fa-truck"></i> классы, выделенные жирным, на классы иконок, которые можно использовать с этих сайтов:
FontAwesome.io. Пример: <i class="bullet-icon fa fa-shopping-basket"></i>
WebHostingHub.com Пример: <i class="bullet-icon icon-piggybank"></i>.


За расположение и внешний вид инфо-блоков отвечают настройки темы:

Начиная с версии темы 1.5.6 буллеты из этого блока будут также появляется на каждой тестовой странице приложения Сайт.
Подробности в этой инструкции: Буллеты (промо-блоки) на страницах приложения Сайт

Владимир Сергеев
Разработчик
Последнее обновление: 6 марта 2020
блоки HTML дублирование настроек prostore.bullets буллеты
Эта статья была полезна?ДаНет

19 комментариев

  • Кристина
    Кристина
    2 декабря 2017 13:20

    Здравствуйте! А как сделать иконку цветной? Заранее спасибо!

    ответить
    • Владимир Сергеев
      Владимир Сергеев
      Разработчик
      2 декабря 2017 21:01

      Добавьте в код кнопки атрибут style со свойством color.
      Например: 

      <i class="bullet-icon fa fa-truck" style="color: #DE4E51;"></i>

      Где #DE4E51 – это код цвета.

      ответить
    • Anton
      Anton
      28 июня 2018 16:22

      Добрый день. 

      Подскажите, пожалуйста, можно ли сделать так, чтобы в инфоблоках отображалось значение переменных? Конкретно у нас используется плагин SEO-регионы, и часть текста на страницах подставляются с помощью переменных, в зависимости от выбора региона (витрины), например название города и телефоны. Попробовали поместить эти переменные в инфоблоки, тема их игнорирует просто пропуская. 

      Спасибо.

      ответить
    • Anton
      Anton
      28 июня 2018 22:05

      Спасибо. Вопрос решен.

      ответить
    • Галина
      Галина
      21 октября 2019 01:00

      Владимир, а как добавить инфо-блоки на страницы магазина? Как на страницы сайта - информация есть, а вот про магазин что-то не могу найти

      ответить
      • Владимир Сергеев
        Владимир Сергеев
        Разработчик
        21 октября 2019 11:09

        Галина, эти блоки включаются в настройках темы для магазина. 
        Это странно, что вы не видите, потому что они по умолчанию включены. 

        ответить
        • Галина
          Галина
          21 октября 2019 17:05

          Это на Главной, там включилось. А мне нужны другие страницы магазина (у нас это разные услуги). То есть у нас есть страницы не Сайта, а Магазина

          ответить
          • Владимир Сергеев
            Владимир Сергеев
            Разработчик
            21 октября 2019 17:20

            Так там же, ниже посмотрите. 

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

            Вы можете самостоятельно вставить какой угодно контент в редакторе страницы.

            ответить
          • Юрий
            Юрий
            26 февраля 2020 23:01

            Владимир, здравствуйте! Как сделать более компактным этот инфо-блок в карточке товара?

            У меня получилось так. Некрасиво и занимает много места

            Код блока:

            <!-- Первый инфо-блок -->
            <li class="item bullet-item">
            <i class="fa fa-shopping-cart"></i>
            <div class="bullet-body">
            <div class="bullet-heading">Самовывоз</div>
            Бесплатно
            </div>
            </li>

            <!-- Второй инфо-блок -->
            <li class="item bullet-item">
            <i class="fa fa-male"></i>
            <div class="bullet-body">
            <div class="bullet-heading">Курьер пн-пт от 3000</div>
            Бесплатно
            </div>
            </li>

            <!-- Третий инфо-блок -->
            <li class="item bullet-item">
            <i class="fa fa-male"></i>
            <div class="bullet-body">
            <div class="bullet-heading">Курьер пн-пт менее 3000</div>
            300 руб.
            </div>
            </li>

            <!-- Четвертый инфо-блок -->
            <li class="item bullet-item">
            <i class="fa fa-rocket"></i>
            <div class="bullet-body">
            <div class="bullet-heading">Срочная доставка</div>
            450 руб.
            </div>
            </li>

            Как сделать похожим на такой вариант:
            1. более компактно с меньшим межстрочным интервалом и в одну строчку по каждой услуге (иконка- услуга-цена)
            3. стоимость услуги выделить жирным

            ответить
            • Владимир Сергеев
              Владимир Сергеев
              Разработчик
              27 февраля 2020 18:28

              Здравствуйте, Юрий! 

              У меня получилось так. Некрасиво и занимает много места

              Что-то у вас там не так... 
              Инфо блоки на странице товара должны выглядеть так: 

              Без слайдера

              Со слайдером

              Вот вам на всякий случай код блоков. Поменяйте там только текст и иконки. Разметку не трогайте.

              <!-- Первый инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-truck"></i>
    <div class="bullet-body">
    	<div class="bullet-heading">Доставка по России</div>
        Мы доставим ваш заказ курьером по Москве и Петербургу или службой экспресс-доставки по всей России.
    </div>
</li>

<!-- Второй инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-credit-card-alt"></i>
    <div class="bullet-body">
        <div class="bullet-heading">Оплата онлайн</div>
	Оплатите заказ банковской картой, наличными в ближайшем платежном терминале или наличными.
    </div>
</li>

<!-- Третий инфо-блок -->
<li class="item bullet-item">
    <i class="bullet-icon fa fa-star"></i>
    <div class="bullet-body">
	<div class="bullet-heading">Магазин в Москве</div>
	Будем рады видеть вас в нашем магазине по адресу г. Москва, ул. Крымский Вал, д. 3, стр. 2.
    </div>
</li>

              Вам подойдут вот такие режимы отображения блоков:

              ответить
            • Владимир Сергеев
              Владимир Сергеев
              Разработчик
              27 февраля 2020 18:46
              Как сделать похожим на такой вариант: 1. более компактно с меньшим межстрочным интервалом и в одну строчку по каждой услуге (иконка- услуга-цена) 3. стоимость услуги выделить жирным

              1. Выберите вариант без слайдера.

              2. Удалите из кода блоков иконки:

              <i class="bullet-icon fa fa-credit-card-alt"></i>

              Но учтите, что блоки едины – и на главной, и на странице товара.

              3. Добавьте в блок prostore.user_css код:

              .product-page .bullets.v1 li.item.col.editor_content.bullet-item:not(:last-of-type) {
    margin-bottom: 5px;
}
.product-page .bullets.v1 .bullet-body {
    margin-left: 0;
}
.bullets.v1 .bullet-heading {
    float: left;
    width: 60%;
    text-transform: none;
    font-size: 100% !important;
}

              Если слишком близко друг к другу, то увеличьте margin-bottom: 5px;

              К сожалению, вёрстка именно таким образом, как вы указали на скриншоте, не входит в обязанности бесплатной службы поддержки. 
              Попробуйте заказать в каталоге экспертов. 

              ответить
              • Юрий
                Юрий
                28 февраля 2020 16:16

                Владимир, сделал как Вы написали. Получается так:

                Как слово БЕСПЛАТНО поднять на уровень выше, чтобы получилось так:

                Тренируюсь пока на 1-м инфо-блоке:

                <!-- Первый инфо-блок -->
                <li class="item bullet-item"> <i class="bullet-icon fa fa-shopping-cart"></i>
                <div class="bullet-body">
                <div class="bullet-heading">САМОВЫВОЗ Бесплатно</div>
                </div>
                </li>

                Что в нем надо изменить?

                ответить
                • Юрий
                  Юрий
                  28 февраля 2020 17:00

                  Владимир, получается все в кучу. Не понятно для покупателя

                  Как все услуги по доставке выровнять в 5 строчек по количеству иконок?

                  ответить
                  • Юрий
                    Юрий
                    28 февраля 2020 17:00

                    Код выглядит сейчас так:

                    <!-- Первый инфо-блок -->
                    <li class="item bullet-item"> <i class="bullet-icon fa fa-shopping-cart"></i>
                    <div class="bullet-body">
                    <div class="bullet-heading">САМОВЫВОЗ</div>
                    Бесплатно
                    </div>
                    </li>

                    <!-- Второй инфо-блок -->
                    <li class="item bullet-item">
                    <i class="bullet-icon icon-user"></i>
                    <div class="bullet-body">
                    <div class="bullet-heading">Курьер пн-пт от 3000 руб</div>
                    Бесплатно
                    </div>
                    </li>

                    <!-- Третий инфо-блок -->
                    <li class="item bullet-item">
                    <i class="bullet-icon icon-user"></i>
                    <div class="bullet-body">
                    <div class="bullet-heading">Курьер пн-пт менее 3000 руб</div>
                    350 руб
                    </div>
                    </li>

                    <!-- Четвертый инфо-блок -->
                    <li class="item bullet-item">
                    <i class="bullet-icon fa fa-rocket"></i>
                    <div class="bullet-body">
                    <div class="bullet-heading">Срочная доставка</div>
                    450 руб
                    </div>
                    </li>

                    <!-- Пятый инфо-блок -->
                    <li class="item bullet-item">
                    <i class="bullet-icon fa fa-building-o"></i>
                    <div class="bullet-body">
                    <div class="bullet-heading">Почта России + ПВЗ</div>
                    По тарифу
                    </div>
                    </li>

                    ответить
                    • Владимир Сергеев
                      Владимир Сергеев
                      Разработчик
                      2 марта 2020 19:11

                      Вот вам готовый блок кода: 

                      <li class="item col bullet-item" style="display: block;width: 100%;padding-right: 15px;">
    <table>
        <tbody>
            <tr>
                <td>
                    Самовывоз сегодня
                </td>
                <td style="font-weight:bold;text-align:right;">
                    Бесплатно
                </td>
            </tr>
            <tr>
                <td>
                    Курьер завтра
                </td>
                <td style="font-weight:bold;text-align:right;">
                    Платно
                </td>
            </tr>
        </tbody>
    </table>
</li>

                      Если нужно больше значений, копируйте все теги между <tr> тегами и вставляйте их после тега </tr>.

                      ответить
                    • Юрий
                      Юрий
                      3 марта 2020 11:23

                      Отлично! Спасибо большое!

                      ответить
                    • Юрий
                      Юрий
                      6 марта 2020 11:28

                      Владимир, здравствуйте! Только сейчас заметил, что после вставки этого кода в блок prostore.bullets вызывает показ этой информации во всех текстовых страницах, созданных в приложении сайт. Как это исправить?

                      Вот пример: https://mamam-detkam.ru/site/garantii/

                      ответить
                      Добавить комментарий
                      Чтобы добавить комментарий, зарегистрируйтесь или войдите
                      Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
                      Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
                      Подписывайтесь и получайте скидки!

                      Узнавайте первым о скидках и специальных предложениях!