Добавление промокарточек на главную страницу

Советы по изменению темы дизайна при переходе с Shop-Script 5 на Shop-Script 6

В Shop-Script 6 появилась новая возможность добавления промокарточек на главную страницу, с помощью которых можно выразительно представить информацию о скидках, спецпредложениях, новых товарах.

Так как функциональность промокарточек появилась только в Shop-Script 6, пользователям тем дизайна Shop-Script 5 необходимо добавить код отображения карточек в шаблоны дизайна.

Добавьте следующий код в шаблон дизайна home.html:

{if $promocards = $wa->shop->promos()}
    <!-- PROMOS -->
    <section class="promos">
        <ul>
            {foreach $promocards as $promo}
                <li id="s-promo-{$promo.id}">
                    <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
                        <div class="background-color-layer"></div>
                        {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
                        {if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if}
                    </a>
                </li>
            {/foreach}
        </ul>
    </section>
{/if}

И следующий код в CSS-файл вашей темы (например, default.shop.css):

.promos { margin: 5px -25px; }
.promos ul { padding: 0; margin: 0; }
.promos ul li { padding: 0; margin: 0; list-style: none; display: inline-block; width: 25%; float: left; } 
.promos ul li a { display: block; padding: 40px 20px; height: 80px; overflow: hidden; background-size: cover; background-position: center center; color: #000; background-color: rgba(0,0,0,0.05); border: 5px solid #fff; text-align: center; position: relative; }
.promos ul li a .background-color-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.1; background-color: #000; }
.promos ul li a h5 { font-size: 1.3em; text-shadow: 0 1px 2px #000; position: relative; z-index: 2; }
.promos ul li a p { font-size: 0.9em; text-shadow: 0 1px 1px #000; position: relative; z-index: 2; }
.promos ul li a:hover .background-color-layer { opacity: 0.5; transition: 0.3s; }

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

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

  • +3
    Idombrowskaya Idombrowskaya 27 марта 2015 05:16 #

    Подскажите, почему, когда просит форма промо-карточки ввести название https://

    я ввела выдуманное https://stratum-russia.sertificate/ затем, на главной странице появилась карточка, а когда на нее щелкаешь чтобы перейти к ней, к этой странице, то она не доступна. Что надо сделать? или я что-то не правильно сделала?


    П.С. все коды, которые вы дали я добавила в шаблоны

  • +1
    Natali Natali 28 марта 2015 17:02 #

    ДОбрый день. Хотела настроить промо-карточки, но в шаблоне дизайна

    Default 2.0 нет файла home.html. Куда вставлять код?
  • +4
    smagloiv smagloiv Партнер-эксперт 29 марта 2015 14:13 #

    Данный блок очень необходим для большинства магазинов. Причем достаточно одного и не обязательно с ссылкой на материал. И часто промо повторяется, например раз в месяц, а функционала например "приостановить" нет, только удалить. Получается данное промо нужно каждый раз создавать заново. Да и восьмое Марта нужно ежегодно с нуля придумывать... Вообщем крайне полезно, но нужно доделывать.

    • +2
      Павел Иванов Павел Иванов 30 апреля 2015 06:59 #

      Поддержу. Ещё нужна возможность:

      1. В качестве блока использовать произвольный HTML код

      2. Нужна возможность по расписанию cron применять или снимать с публикации карточки.

      Ибо акции частенько запускаются с нуля часов и по ночам сидеть не всем удобно.

    • +1
      Павел Иванов Павел Иванов 30 апреля 2015 07:06 #

      Ps. Временное решение чтобы не удалять карточку. Создайте трешевую витрину и оставляйте карточку на ней до тех пор пока не понадобится снова.

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

    • +3

      Можно как-то настроить размеры промо картинок, чтобы они автоматически обрезались под нужный размер?

    • +2
      Алена Леонтьева Алена Леонтьева 15 апреля 2015 11:29 #

      подскажите а где редактировать эти карточки? Текс на них. Заранее пасибо!

    • +2
      Максим Максим 20 апреля 2015 06:01 #

      Карточки есть а вот изображения не тянутся в чем причина

      www.efes.com.ua

    • +1
      Maxim Sheptukha Maxim Sheptukha 21 апреля 2015 04:03 #

      И в какое место страницы добавлять код?...

      Добавил - послетали все товары из промо-списка...

    • 0
      %username% 26 апреля 2015 10:57 #

      очередная шляпа

    • 0
      %username% 26 апреля 2015 11:02 #

      Кроме карточек есть куча других проблем,

      которые необходимо решить.

      А программисты занимаются ерундой.

      Сделали бы редакторы,

      как визуальный для дизайна,

      так и нормальный для уведомлений.

      Чтобы не выносить мозг с кодом обычным пользователям.

      И пошаговую инструкцию по созданию магазина уже бы сделали.

      А то куча не понятных обновлений, ухудшающих работу,

      и куча второстепенных фишек,

      при не доведённом до ума сервисе.

      • +2
        Павел Иванов Павел Иванов 30 апреля 2015 07:00 #

        А да точно.

        3. Обязательно под HTML код редактор.

        Теперь всё что нужно для полного счастья.

      • +1
        АР АР 18 июля 2015 15:43 #

        Здравствуйте! У меня карточки отображаются, только при их нажатии переход идёт на пустую страницу приложения, а не на указанную страницу. Вернее будет сказать, что так происходит в самом приложении в Контактах. А на витрине в Контакте в поселении типа http://yourdomain.ru/vkontakte/ работает всё нормально.

        <o:p> </o:p>

        Как это исправить?<o:p></o:p>

        Код отображения карточек в шаблоны дизайна я не добавлял! Потому как у меня есть вопросы:

        1. Добавлять код в home.html нужно шаблон дизайна (темы) в Контакте или используемую мной основную. У меня Дизайн со вкусом 2.
        2. Код в CSS-файл нужно добавлять в default.shop.css моей темы или темы в Контакте?
        3. И в какую часть шаблона нужно вставлять данные коды. Дело в том что у меня там уже есть свои коды ( это в home.html и default.shop.css).
      • 0
        КЭТИ Дмитриев КЭТИ Дмитриев 25 августа 2016 11:57 #

        День добрый срочно нужна помощь в админке, капец решила я сделать промо страницу и все послетало

        Прошу помочь в возврате предыдущего вида сайта - Тема дизайна «CUSTOM» а не вот эти ваши Дефолты, как что сделать разобраться не могу, помогите вернуться к прежнему виду дизайнаа срооочнооо!!!

        • +1
          Михаил Ушенин Михаил Ушенин Webasyst 29 августа 2016 13:00 #

          Для восстановления прежнего внешнего вида сайта воспользуйтесь резервной копией, которая должна храниться на серверах вашего хостинг-провайдера.

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

        • +2
          LED Ресурс LED Ресурс 9 мая 2017 13:53 #

          Здравствуйте! Как сделать так, чтобы текст под заголовком карточки отображался в маленьком виде под слайдером? Проблема что в настройках я его ввожу, а в результате он не показывается.

        • +1
          Лидия Лидия 23 мая 2017 17:32 #

          Здравствуйте! Хотела создать новую промо карточку со своей картинкой, но загрузить не могу. Всплывает такое сообщение

          <h2 style="margin-bottom: 0.3em; font-size: 1.35em; font-family: "Helvetica Neue", "Liberation Sans", Arial, sans-serif; line-height: 1.2em; background-color: rgb(255, 255, 255);">You don't have permission to access requested URL on this server</h2>

          И что делать?

        • +1
          Игорь Чихачев Игорь Чихачев 26 июня 2017 17:54 #

          Как создать самому промо-карточку для отображения под слайдером в теме Дефолт 3 ?

          Поместил в список promo несколько товаров - они отображаются в слайдере. А под слайдером те же квадратики по умолчанию с "Онлайн-заказ" "Скидка до 30%" и т.д. с ссылками в никуда (#).


        • +1
          Игорь Чихачев Игорь Чихачев 27 июня 2017 09:45 #

          Разобрался. Оказывается есть список promo и есть список Промо и это разные вещи.

        • +1
          Александр Ильин Александр Ильин 18 декабря 2017 16:09 #

          Добрый день!

          Подскажите какие размеры в пикселях должны быть у баннеров.

        • +1
          partner2000 partner2000 22 декабря 2017 12:50 #

          Помогите разобраться. На главной странице промо карточки работают на ура. Вывел также этот блок в сайдбар. Как реализовать так чтобы на других страницах магазина (в сайдбаре) показывалась только одна промо карточка с определённым id. Если есть решение напишите. Заранее спасибо.

        • +1
          Анна Иванова Анна Иванова 22 января 2019 15:24 #

          Где настроить время пролистывания?

        • +1
          Надежда Надежда 24 февраля 2019 15:59 #

          Возможно вывести показ промокарточек не на главной странице?

          • +1
            Михаил Ушенин Михаил Ушенин Webasyst 25 февраля 2019 09:58 #

            Возможно. Скопируйте код, который показывает промокарточки на главной странице, туда, где вы хотите их показывать.

          • +1
            olga novikova olga novikova 19 марта 2019 15:55 #

            Здравствуйте.
            У слайдера промокарточек не предусмотрено кнопок для ручного перелистывания, только таймер?

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 19 марта 2019 18:18 #

              Это зависит от вашей темы дизайна. У каждой темы могут быть разные инструменты использования слайдера.

            • +1
              Владимир Вахнин Владимир Вахнин 31 июля 2019 14:43 #

              А как сделать так чтобы над промо карточками появилась надпись

              Например, популярные категории?

              • +1

                Добавьте эту надпись в файл home.html перед тем местом, где в вашей теме дизайна находится код отображения промокарточек.

                • +1
                  Владимир Вахнин Владимир Вахнин 31 июля 2019 16:20 #

                  Вот есть 2 блока

                  <!-- Promo product -->
                  {if $theme_settings.homepage_productset_promo}
                  {$promos = $wa->shop->productSet( $theme_settings.homepage_productset_promo )}
                  {else}
                  {$promos = $wa->shop->productSet("promo")}
                  {/if}
                  {if $promos && count($promos)}
                  <div class="h3 text-center home-header">{if $theme_settings.homepage_promo_title}{str_replace('{$date}', $smarty.now|wa_datetime:"humandate", $theme_settings.homepage_promo_title)}{/if}
                  <span class="arrow">
                  <a href="#" class="slider-product-next"><i class="fa fa-angle-left"></i></a>
                  <a href="#" class="slider-product-prev"><i class="fa fa-angle-right"></i></a>
                  </span>
                  </div>
                  <div class="row container-catalog main-slider-product-home">
                  {include file="`$wa_active_theme_path`/list-thumbs.html" products=$promos}
                  </div>
                  {/if}
                  <!-- Promos block -->
                  {$promocards = $wa->shop->promos()}
                  {if $promocards}
                  <div class="promos-block row">
                  {foreach $promocards as $promo}
                  <div class="promos col-lg-3 col-md-4 col-xs-6">
                  <a href="{$promo.link}" style="background-image: url('{$promo.image}');">
                  {if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
                  <div class="countdown">
                  [`Time left`]: <span class="js-promo-countdown" data-start="{date('Y-m-d H:i:s')}" data-end="{$promo.countdown_datetime}"></span>
                  </div>
                  {/if}
                  </a>
                  <div class="title"{if $promo.background_color} style="background: {$promo.background_color};"{/if}>
                  <div class="promo-title" style="color: {$promo.color};">{$promo.title|escape}</div>
                  <div class="promo-text">{$promo.body|escape}</div>
                  </div>
                  </div>
                  {/foreach}
                  </div>
                  {/if}

                  Куда нужно добавить этот текст?

                  Чтобы было посередине дизайна? Как ХИТЫ ПРОДАЖ?

                  http://joxi.ru/KAgPn9jHEG9dOr

                  Могу оплатить за помощь в создании этой надписи

                  • +1

                    Попробуйте добавить после строки

                    {if $promocards}

                    Но просто текст — без HTML-тегов — может выглядеть не очень красиво. Чтобы было красиво, обратитесь за квалифицированной помощью к партнёрам Webasyst или задайте вопрос на форуме, пожалуйста.

                  • +1
                    Владимир Вахнин Владимир Вахнин 31 июля 2019 21:23 #

                    Спасибо

                    вставил такой код  после 

                    {if $promocards}
                    <p style="text-align: center"><span style="font-size: 18px;"></span><strong><span style="font-size: 22px;">Популярные категории</span></strong></p>
                    <p style="text-align: center"><strong><br></strong></p>
                    <p style="text-align: center"><span style="font-size: 20px;"></span></p>

                    Все выровнялось как нужно

                    Добавить комментарий

                    Чтобы добавить комментарий, зарегистрируйтесь или войдите