Подключение новых возможностей Shop-Script 7

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

1. Подключение счетчика обратного отсчета для промо-карточек на главной странице

Изменения в коде показаны на примере темы дизайна «Дефолт».
Если вам сложно вносить изменения в файлы дизайна и вы обновили тему дизайна, которая была адаптирована разработчиком для использования с версией Shop-Script 7, то для подключения новых возможностей достаточно сбросить тему дизайна до оригинального состояния.

В файле head.html подключите стили и скрипт счетчика, например, так:

<link href="{$wa_active_theme_url}jquerycountdowntimer/css/jquery.countdownTimer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_active_theme_url}jquerycountdowntimer/jquery.countdownTimer.min.js?v={$wa->version(true)}"></script>
Эти файлы можно скачать по ссылкам: jquery.countdownTimer.css, jquery.countdownTimer.min.js

Вместо этих файлов вы можете подключить и свои собственные стили и скрипты счетчика.

В файле home.html замените фрагмент

<li style="background-image: url('{$promo.image}');">
    <a href="{$promo.link|escape}">
        {if !empty($promo.title)}<h3 style="color: {$promo.color};">{$promo.title|escape}</h3>{/if}
        {if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape|nl2br}</p>{/if}
    </a>
</li>

на

<li style="{if !empty($promo.background_color)}background-color: {$promo.background_color};{/if} background-image: url('{$promo.image}');">
    <a href="{$promo.link|escape}">
        {if !empty($promo.title)}<h3 style="color: {$promo.color};">{$promo.title|escape}</h3>{/if}
        {if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape|nl2br}</p>{/if}
        {if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
            <div class="countdown">
                <span class="js-promo-countdown"
                      data-start="{date('Y-m-d H:i:s')}"
                      data-end="{$promo.countdown_datetime}">
                </span>
            </div>
        {/if}
    </a>
</li>

В файл default.shop.js после строки

$(document).ready(function () {

добавьте скрипт срабатывания счетчика обратного отсчета:

// countdown
if ($.fn.countdowntimer) {
    $('.js-promo-countdown').each(function () {
        var $this = $(this).html('');
        var id = ($this.attr('id') || 'js-promo-countdown' + ('' + Math.random()).slice(2));
        $this.attr('id', id);
        var start = $this.data('start').replace(/-/g, '/');
        var end = $this.data('end').replace(/-/g, '/');
        $this.countdowntimer({
            startDate: start,
            dateAndTime: end,
            size: 'lg'
        });
    });
}

2. Отображение видео на странице товара

В файле product.html замените фрагмент вида

{if $product.images}
    <figure class="product-gallery">
        <!-- main image -->
        <div class="image" id="product-core-image">
            <div class="corner top right">
                {$wa->shop->badgeHtml($product.badge)}
            </div>
            <a href="{$wa->shop->productImgUrl($product, '970')}">
                {$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}
            </a>
            <div id="switching-image" style="display: none;"></div>
        </div>
        <!-- thumbs -->
        {if count($product.images) > 1}
            <div class="more-images" id="product-gallery">
                {foreach $product.images as $image}
                    <div class="image{if $image.id == $product.image_id} selected{/if}">
                        <a id="product-image-{$image.id}" href="{$wa->shop->imgUrl($image, '970')}" class="swipebox">
                            {$wa->shop->imgHtml($image, '96x96')}
                        </a>
                    </div>
                {/foreach}
            </div>
        {/if}
    </figure>
{/if}

на

{$video = $product->video}
{if $video}
    <div id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
        <div itemprop="embedHTML">
            <iframe src="{$video.url}" width="{$video.width}" height="{$video.height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
        <meta itemprop="width" content="{$video.width}">
        <meta itemprop="height" content="{$video.height}">
    </div>
{/if}


{if $product.images || $video}
    <figure class="product-gallery">
        {if $product.images}
            <!-- main image -->
            <div class="image" id="product-core-image" {if $video}style="display:none"{/if}>
                <div class="corner top right">
                    {$wa->shop->badgeHtml($product.badge)}
                </div>
                <a href="{$wa->shop->productImgUrl($product, '970')}">
                    {$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}
                </a>
                <div id="switching-image" style="display: none;"></div>
            </div>
        {/if}
        <!-- thumbs -->
        {if count($product.images) > 1 || (count($product.images) === 1 && $video)}
            <div class="more-images" id="product-gallery">
                {if $video}
                    <div class="image video selected">
                        <a id="product-image-video" href="{$video.url}" class="swipebox">
                            <img src="{$video.images[0]}">
                        </a>
                    </div>
                {/if}
                {foreach $product.images as $image}
                    <div class="image{if $image.id == $product.image_id && empty($video)} selected{/if}">
                        <a id="product-image-{$image.id}" href="{$wa->shop->imgUrl($image, '970')}" class="swipebox">
                            {$wa->shop->imgHtml($image, '96x96')}
                        </a>
                    </div>
                {/foreach}
            </div>
        {/if}
    </figure>
{/if}

В файле product.js замените фрагмент

$("#product-gallery a").click(function () {
    $('.product-gallery .image').removeClass('selected');
    $(this).parent().addClass('selected');
    return false;
});

на

$("#product-gallery a").not('#product-image-video').click(function () {
    $('#product-core-image').show();
    $('#video-container').hide();
    $('.product-gallery .image').removeClass('selected');
    $(this).parent().addClass('selected');
     return false;
});
// product image video
$('#product-image-video').click(function () {
    $('#product-core-image').hide();
    $('#video-container').show();
    $('.product-gallery .image').removeClass('selected');
    $(this).parent().addClass('selected');
    return false;
});

В файл default.shop.css добавьте новые стили

.video-container { text-align: center; margin-right: 50px; max-width: 750px; }
.video-container iframe { box-shadow: 0 5px 15px rgba(0,0,0,0.15); max-width: 100%; }

3. Новые шаблоны email-уведомлений о действиях с заказами

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

21 комментарий

  • +1
    Александра Александра 7 октября 2016 23:44 #

    Что делать если в файле product.html нет нужного фрагмент вида?

    • +1
      Михаил Ушенин Михаил Ушенин Webasyst 10 октября 2016 09:56 #

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

    • +3
      Алексей Бухтеев Алексей Бухтеев 2 октября 2018 19:21 #

      вероятно он у Вас располагается в другом файле, например product/gallery.html в поселении Shop

      Если Вам нужно вставить только одно видео, то можете просто в файле Product.html вставить код

      {$video = $product->video} {if $video}    <div id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">        <div itemprop="embedHTML">            <iframe src="{$video.url}" width="{$video.width}" height="{$video.height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>        </div>        <meta itemprop="width" content="{$video.width}">        <meta itemprop="height" content="{$video.height}">    </div> {/if}

      Например перед блоком рекомендуемые товары, тогда видео будет появляться сразу после описания.

      Или же можете засунуть его в самый верх страницы, тут уже на вкус и цвет)

    • +1
      Andrey Igorevich Katerenchuk Andrey Igorevich Katerenchuk 15 февраля 2018 14:42 #

      где находится файл product.html ? Здесь я его не нашел

      • +1
        Михаил Ушенин Михаил Ушенин Webasyst 15 февраля 2018 14:49 #

        Возможно, вы находитесь не в Shop-Script, а в приложении "Сайт". Посмотрите в приложении "Магазин" (Shop-Script).

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

      • +1
        Natty Natty 7 мая 2018 08:00 #

        Добрый день.

        Видео выводится первым, а потом изображения. Как можно поменять порядок? Что бы видео было в конце после изображений.

        Тема Дефолт 3.0

        • +1

          Ваш вопрос не имеет прямого отношения к теме статьи. Задайте его в отдельной теме в общем хабе поддержки, пожалуйста, или поищите ответ на него с помощью функции поиска.

        • +2
          Алексей Бухтеев Алексей Бухтеев 2 октября 2018 19:18 #

          Берете код, который у Вас отвечает за видео и переносите его ниже под код, который отвечает за вывод галереи изображений.

          Порядок кода соответствует порядку вывода на странице.

        • +1

          Добрый день.

          Можно ли сделать загрузку 2-х видео и соответственно потом вывод на страницу обоих?

        • +1
          Alexvk Alexvk 1 февраля 2019 18:35 #

          Если внести даные изменения на сайт  где и как назначать видео для товара?

          у меня, например, код уже такой, а в админке не вижу способа добавить видео.


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

            На вкладке «Фото и видео» на странице создания или редактирования товара.

            • +1
              Alexvk Alexvk 4 февраля 2019 01:18 #

              Спасибо. у меня там написано только "Изображения".

              1.Если пытаться добавлять видео - то в каком формате?

              2. Посмотрел класс wa-apps\shop\lib\classes\shopProduct.class.php у него нет метода getVideo()

              • +2
                Alexvk Alexvk 4 февраля 2019 01:22 #

                Похоже это только в 7 версии есть... у меня 6 -ая.

              • +1
                Andrey Kozlov Andrey Kozlov 25 мая 2019 00:29 #

                Тема Дефолт 2, проблема видна на видео

              • +1
                Viktor Shatalov Viktor Shatalov 27 сентября 2019 16:40 #

                а если мне надо кнопку для видео поставить рядом с кнопкой "в корзину" - чтобы видео видео воспроизводилось во всплывающем окне?подскажите....

              • +1
                Jurii UA Jurii UA 22 февраля 2020 12:42 #

                Добрый день. Помогите решить вопрос по теме Гипермаркет. Необходимо установить первым отображение в карточке товара фотографию, а не видео. Как отключить вывод видео в карточке товара вообще? И еще: не отображаются превью фотографий товаров в каталоге. Возможно это связано с тем, что видео отображается первым. Версия темы последняя. Спасибо.

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

                  Необходимо установить первым отображение в карточке товара фотографию, а не видео. Как отключить вывод видео в карточке товара вообще?

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

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

                  И еще: не отображаются превью фотографий товаров в каталоге.

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

                • +1
                  Jurii UA Jurii UA 25 февраля 2020 11:03 #

                  Здравствуйте, Михаил. Спасибо за Ваш профессиональный ответ, но он не помогает решить вопрос. Я имел ввиду, как на уровне кода поменять местами вывод изображения в карточке товара. В предыдущих версиях темы все было с точностью до наоборот. Не теряю надежду, что все таки, вы как разработчик, окажете адекватную помощь. Спасибо.

                  Вот так выглядит карточка товара, если убрать видео:

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

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