Перейти к содержанию
Форум поддержки пользователей VamShop

Карусель для дополнительных изображений


Рекомендуемые сообщения

или может у Вас свой шаблон для тэга content_images

 

Проверьте, что у Вас в Админке - Оформление - Шаблон карточки товара указано.

 

Просто {content_images} 

 

или есть какие-то параметры типа {content_images template=...} !?

Ссылка на сообщение
Поделиться на другие сайты
Можно ещё попробовать в /app/Vendor/smarty/vam_plugins/function.content_images.php поменять:
 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
{if $images_count > 1}
  $(".product-images").bxSlider({
    adaptiveHeight: true,
    controls: true,
    pager: false,
    mode: "fade"
  });
{/if}  
});
</script>
 
на:
 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
  $(".product-images").bxSlider({
    adaptiveHeight: true,
    controls: true,
    pager: false,
    mode: "fade"
  });
});
</script>
Ссылка на сообщение
Поделиться на другие сайты

Да был шаблон.

Удалил заменил на стандартный тег.

Теперь почему-то не показывает дополнительные фото вообще http://todito.ru/product/chasy-Specnaz-C9470297-20.html

хотя они есть

Ссылка на сообщение
Поделиться на другие сайты
Тогда попробуйте вернуть свой шаблон, что у Вас был, я так понимаю он у Вас в Админке - Оформление - Микро-шаблоны, отредактируйте свой шаблон для content_images и там нужно просто добвить код для bxslider, можно поменять:
 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
});
</script>
 
на:
 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
  $(".product-images").bxSlider({
    adaptiveHeight: true,
    controls: true,
    pager: false,
    mode: "fade"
  });
});
</script>
Ссылка на сообщение
Поделиться на другие сайты

Все сделал, не работает

 

Вот код в микрошаблоне

<div class="product-images">
{foreach from=$images item=image}
{if $image@first}
	<div class="thumbnail big text-center">
{/if}
{if $image@index > 0}
		<div class="col-sm-6 col-md-4 thumbnail text-center">
{/if}
			<a href="{$image.image_path}" class="colorbox" title="{$image.name}"><img itemprop="image" src="{$image.image_thumb}" alt="{$image.name}" title="{$image.name}"{if {$image.image_width} > 0} width="{$image.image_width}"{/if}{if {$image.image_height} > 0} height="{$image.image_height}"{/if} />
			{if $image@first}{product_label}{/if}
			<span class="frame-overlay"></span>
			<span class="zoom"><i class="fa fa-search-plus"></i></span>
			</a>
{if $image@index > 0}
		</div>
{/if}
{if $image@first}
	</div>
	<div class="row small">
{/if}
{if $image@last}
	</div>
{/if}
{foreachelse}   
	<div class="thumbnail big text-center">
			<img src="{$noimg_path}" alt="{lang}No Image{/lang}" title="{lang}No Image{/lang}" width="{$thumbnail_size}" height="{$thumbnail_size}" />
	</div>
{/foreach}   
</div> 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
  $(".product-images").bxSlider({
    adaptiveHeight: true,
    controls: true,
    pager: false,
    mode: "fade"
  });
});
</script>

Ссылка на сообщение
Поделиться на другие сайты

Шаблон карточки товара

<!-- start: Page section -->
  <section class="content product-info" itemscope itemtype="http://schema.org/Product">
    <h2 itemprop="name">{page_name}</h2>              

    <div class="row">
      <!-- start: Product image -->
        <div class="col-md-6">
        {content_images template='contentimages'}
        </div>
      <!-- end: Product image -->
      <!-- start: Product info -->
        <div class="col-md-4 product info">
          {module alias="reviews" action="reviews_total"}{module alias="reviews" action="reviews_rating"}
          <br />
          Артикул: <b>{product_model}</b>
          {product_manufacturer}
          <br />
          <div class="description" itemprop="offers" itemscope itemtype="http://schema.org/Offer">{lang}Price{/lang}: <span class="price" itemprop="price">{product_price}</span></div>
          <br />
          {if {product_price_old}}<div class="description">{lang}List Price{/lang}: <span class="old-price"><del>{product_price_old}</del></span></div>{/if}
          {if {product_price_save}}<div class="description">{lang}You Save{/lang}: <span class="save">{product_price_save}</span></div><br />{/if}
                  
          {discount_group}
          {discount_list}

          {product_form}
          <div class="form-group">
            <label class="sr-only">{lang}Qty{/lang}</label>
            <div class="input-group">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-shopping-cart"></i> {lang}Add to cart{/lang}</button>
              </span>
            </div>
          </div>          
          {/product_form}

          {module alias="one_click_buy" controller="buy" action="link"}
          {module alias="ask_a_product_question" controller="get" action="ask_link"}

          {attribute_list}       
        </div>
      <div class="col-md-2"><center>
        <p><img src="/img/content/0/free_sheep.png" width="120" height="91" alt="Расширенная гарантия на 2 года"/></p>
      <p><img src="/img/content/0/original2.png" width="90" height="84" alt='100% оригинальные часы'/></p> 
        <p><img src="/img/content/0/garantiya.gif" width="100" height="87" alt='гарантия 2 года'/></p></center></div>
      <!-- end: Product info -->


    </div>

      <div class="row product-tabs">

          <ul class="nav nav-tabs">
            <li class="active"><a href="#description" aria-controls="description" data-toggle="tab"><i class="fa fa-info-circle"></i> {lang}Description{/lang}</a></li>
            <li><a href="#reviews" aria-controls="reviews" data-toggle="tab"><i class="fa fa-comment"></i> {lang}Reviews{/lang}</a></li>
            <li><a href="#add-review" aria-controls="add-review" data-toggle="tab"><i class="fa fa-pencil"></i> {lang}Add Review{/lang}</a></li>
          </ul>

          <div class="tab-content">

            <div class="tab-pane inner fade in notop active" id="description">
              <div itemprop="description">{description}</div>
            </div>

            <div class="tab-pane inner fade in notop" id="reviews">
              {module alias="reviews" action="display"}
            </div>

            <div class="tab-pane inner fade in notop" id="add-review">
              {module alias="reviews" action="create"}
            </div>

          </div>

      </div>

    {xsell}

<!-- end: Page section -->
Ссылка на сообщение
Поделиться на другие сайты

Вроде нормально. 

Вам нужно в Админке - Оформление - Микро-шаблоны исправить шаблон contentimages как я выше написал, добавить js код.

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

Вот он в тегах

<div class="product-images">
{foreach from=$images item=image}
{if $image@first}
	<div class="thumbnail big text-center">
{/if}
{if $image@index > 0}
		<div class="col-sm-6 col-md-4 thumbnail text-center">
{/if}
			<a href="{$image.image_path}" class="colorbox" title="{$image.name}"><img itemprop="image" src="{$image.image_thumb}" alt="{$image.name}" title="{$image.name}"{if {$image.image_width} > 0} width="{$image.image_width}"{/if}{if {$image.image_height} > 0} height="{$image.image_height}"{/if} />
			{if $image@first}{product_label}{/if}
			<span class="frame-overlay"></span>
			<span class="zoom"><i class="fa fa-search-plus"></i></span>
			</a>
{if $image@index > 0}
		</div>
{/if}
{if $image@first}
	</div>
	<div class="row small">
{/if}
{if $image@last}
	</div>
{/if}
{foreachelse}   
	<div class="thumbnail big text-center">
			<img src="{$noimg_path}" alt="{lang}No Image{/lang}" title="{lang}No Image{/lang}" width="{$thumbnail_size}" height="{$thumbnail_size}" />
	</div>
{/foreach}   
</div> 
<script type="text/javascript">
$(document).ready(function(){
  $(".colorbox").colorbox({
    rel: "colorbox"
  });
{if $images_count > 1}
  $(".product-images").bxSlider({
    adaptiveHeight: true,
    controls: true,
    pager: false,
    mode: "fade"
  });
{/if}  
});
</script>

Ссылка на сообщение
Поделиться на другие сайты

Попробовал подключить к карточке товара с дополнительными фотографиями Шаблон по умолчанию - доп. фото и слайдер не появились

Ссылка на сообщение
Поделиться на другие сайты

Это небольшая ошибка в архиве с модулем была, картинки не в папке bxslider были, исправил.

Скачайте ещё раз архив на support.vamshop.ru в разделе Файлы - Разное и перепишите файлы из архива.

 

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

 

У Вас нет картинок:

http://todito.ru/img/jquery/plugins/bxslider/bx_loader.gif

http://todito.ru/img/jquery/plugins/bxslider/controls.png

 

Видимо, из архива не переписали их к себе, вот можно их взять:

 

http://demo.vamshop.com/img/jquery/plugins/bxslider/bx_loader.gif

http://demo.vamshop.com/img/jquery/plugins/bxslider/controls.png

 

и переписать в /app/webroot/img/jquery/plugins/bxslider/ папку.

Ссылка на сообщение
Поделиться на другие сайты

да, они были просто почему-то просто в папке plugins лежали

 

Получилось, что изображения на втором слайде прыгают и в кучу неровную собрались. http://todito.ru/product/chasy-Specnaz-C9485296-8215.html

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

Ссылка на сообщение
Поделиться на другие сайты
Вот я тут писал -
 
Но учтите, если отключите адаптивную высоту, то будет много свободного место под основной картинкой, например это видно будет если зайти со смартфона в магазин, под картинкой будет куча пустого места.
 
и верните шаблоне contentimages условие {if $images_count > 1} ... {/if}:
 
{if $images_count > 1}
$(".product-images").bxSlider({
adaptiveHeight: true,
controls: true,
pager: false,
mode: "fade"
});
{/if}
 
Это что б слайдера не было, если нет доп. картинок, например тут видно - http://todito.ru/product/naruchnie-chasy-Philip-Laurence-PT23002-01S.html
Слайдера не должно быть если всего одна картинка.
Ссылка на сообщение
Поделиться на другие сайты

Да свободного места куча и получается еще хуже

 

Может можно как то сделать, чтобы задать фиксированые параметры для самих изображений, а не для слайдера

 

Вот нв этой карточке например на втором слайде вообще ужас дырища

 

http://todito.ru/product/chasy-Specnaz-C9485293-20.html

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

Теоретически можно выровнять по высоте, т.е. берётся самая высокая картинка и всё выравнивается по ней, как это сделано с новинками например на главной странице, там работает скрипт выравнивания колонок, можете сами проверить, добавьте на главную страницу товар с высокой картинкой и посмотреть как новинки на главной будут выглядеть.

 

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

 

Нужно искать картинки более-менее одинаковой пропорции, либо вот эту самую высокую картинку поставить последней.

Ссылка на сообщение
Поделиться на другие сайты

Удачи.

 

Я наверное по умолчанию в VamShop 2 добавлю этот слайдер со следующей версии, что-то мне тоже понравился такой вариант.

Ссылка на сообщение
Поделиться на другие сайты
  • 5 weeks later...

Подскажите по настройкам слайдера! Как вывести сразу по 2 товара на экране? как включить автоматическую прокрутку?

Ссылка на сообщение
Поделиться на другие сайты

Какой слайдер?!

Если тот, что на главной, то нельзя туда по два товара выводить.

 

Да и в той версии, что стоит сейчас лучше автоматическую прокрутку не включать, она глючит на мобильниках.

Ссылка на сообщение
Поделиться на другие сайты

Я сейчас обновляю слайдер sequence до текущей версии, в текущей версии нет проблемы с автопрокруткой на мобильных утсройствах.

 

Так что, если вопрос про слайдер на главной страницы, Вы напишите, я Вам скину обновлённую версию с включённой автопрокруткой.

Ссылка на сообщение
Поделиться на другие сайты
×
×
  • Создать...