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

[support 447]

Добавим в VamShop 2 вот такой слайдер - https://getbootstrap.com/docs/3.4/javascript/#carousel

Из произвольных картинок и текста, ссылок.

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

Для того что б добавить слайдер, нам даже не нужно править php код, подключаться к сайту и т.д.

Всё делается просто через админку.

Вот такой слайдер в итоге получится:

 

1. В Админке - Содержание - Категории и товары создаём категорию например Слайдер.

В закладке Данные выбираем Тип содержание - Категория.

В закладке Настройки отключаем опцию Показывать в меню, что б категория Слайдер не было видна в меню Разделы в каталоге.

2. Создали, категорию. Заходим внутрь категории, кликнув иконку папки.

3. Внутри категории у нас будут слайды, картинки.

4. Нажимаем Добавить и добавляем.

Слайдер - это картинка, кликнув которую попадаешь на какую-либо страницу.

т.е. это ссылка.

Значит нам надо внутри категории Слайдер добавлять ссылки.

Нажали добавил, указывается Название,

Например Слайд 1

Указываем Описание

Например Описание слайда 1

В закладке Данные, в опции Тип контента выбираем url ссылка

и указывает адрес, куда будет ссылкаться наша картинка слайдер, на какой сайт, на какую страницу, например пишем https://vamshop.ru

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

Сохраняем наш слайд, кнопкой внизу Продолжить

Всё, первый слайд создан.

По аналогии ещё например 2 слайда сделаем, что б было всего 3 и они крутились.

По аналогии добавляем Слайд 2 и Слайд 3.

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

 

Слайды созданы, картинки добавлены, названия, описания, ссылки для перехода добавлена.

т.е. у нас уже есть данные для слайдера.

 

Теперь сделаем шаблон, т.е. внешний вид, оформив наши данные в виде слайдера.

Будем использовать стандартный boostrap слайдер - https://getbootstrap.com/docs/3.4/javascript/#carousel

Он уже подключён, т.е. нам нужно просто html разметку сделать и всё заработает.

 

Добавляем разметку, шаблон для слайдера.

 

Заходим в Админку - Оформление - Микро-шаблоны.

Нажимаем Добавить

В опции Псевдоним пишем например my-slider

В опции Название тэга пише content_listing

В опции Шаблон вставляем:

{if $content_list}
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
      {foreach from=$content_list item=num}
        <li data-target="#carouselExampleInterval" data-slide-to="{$num@index}"{if $num@first} class="active"{/if}></li>
      {/foreach}
      </ol>
      <div class="carousel-inner" role="listbox">
      {foreach from=$content_list item=slides}
        <div class="item{if $slides@first} active{/if}">
          <img data-src="{$slides.image_original}" alt="{$slides.name}" src="{$slides.image_original}" data-holder-rendered="true">
          <div class="carousel-caption">
            <h3>{$slides.name}</h3>
            <p>{$slides.description}</p>
          </div>
        </div>
      {/foreach}
      </div>
      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left fa fa-chevron-circle-left fa-2x" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right fa fa-chevron-circle-right fa-2x" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>
{/if}

Всё, шаблон для слайдера готов.

 

Добавили данные для слайдера, добавили шаблон для слайдера.

Теперь Вы можете выводить слайдер строкой:

{content_listing template='my-slider'}	

В любом месте магазина.

В карточках товара, на главной, где угодон.

Например, выведем на главной странице.

Для этого в Админке - Содержание - Категории и товары отредактриуйте Главную страницу

и например после строки:

<div id="ajaxcontent">

добавьте код вывода слайдера:

{content_listing template="my-slider" parent="slajder" limit="10" order="order-asc"}	

 

Сохраните.

Всё, у нас сладйер на главной странице.

Вот скрин.

Добавлять удалять слайды можно в Админке - Содержание - Категории и товары - Слайдер.

Просто добавляя или удаляя новые ссылки внутри категории.