Перейти к содержимому


Фото Модификаций Под Карточкой В Каталоге


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 14

#1 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 22 Декабрь 2016 - 08:59

Здравствуйте. Хотелось бы добавить карусель фотографий под основное фото в карточке товара в каталоге (как на скрине). Такое возможно?

Прикрепленные изображения

  • 150.png


#2 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 23 Декабрь 2016 - 14:47

 Mari-ina (22 Декабрь 2016 - 08:59) писал:

Здравствуйте. Хотелось бы добавить карусель фотографий под основное фото в карточке товара в каталоге (как на скрине). Такое возможно?
Здравствуйте, найдите в шаблоне Товары код
	</div>
					{% ENDIF %}
				  </div>
				  <div class="item-info">
после вставьте
		 <div class="thumblist-box_catalog" {% FOR images %}{% IF goods.images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
		<span class="prev"><i class="fa fa-angle-left"></i></span>
		<span class="next"><i class="fa fa-angle-right"></i></span>
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods.images.empty %}
		  <ul id="thumblist_catalog" class="thumblist_catalog popup-gallery">
			{% FOR images %}
			  {% IFNOT goods.images.first %}
				<li><a href="{goods.images.LARGE}" title="{goods.images.NAME}" class="thumblisticon"><img src="{goods.images.ICON}" alt="{goods.images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			  {% ENDIF %}
			{% ENDFOR %}
		  </ul>
		{% ENDIF %}
	  </div><!-- END другие изображение товара -->
 

в конец файла main.js добавьте
// Другие изображение товара
$(document).ready(function(){
	 $('.item-inner').each(function(){
	   $(this).find('.thumblist_catalog').carouFredSel({
	  prev  : $(this).find(".thumblist-box_catalog .prev"),
	  next  : $(this).find(".thumblist-box_catalog .next"),
		   auto  : false,
	  padding: [0, 20],
	  swipe : {
	  onMouse : false,
	  onTouch : true
	}
	}).parents('.thumblist-box_catalog').removeClass('load');
	 })
});

далее найдите в файле main.css
.thumblist-box .thumblist li {display: block;float: left;margin: 0 15px 10px;}
.thumblist-box .thumblist li a {display: table-cell;vertical-align: middle;height: 100px;width: 100px;text-align: center;}

после вставьте
.thumblist-box_catalog {margin: 25px 0 0;padding: 0;position: relative;}
.thumblist-box_catalog .next, .thumblist-box_catalog .prev {position: absolute;top: 50%;margin-top: -13px;width: 26px;height: 26px;line-height: 24px;overflow: hidden;border: 1px solid #505050;border-radius: 50%;text-align: center;color: #FF5722;background: transparent;z-index: 10;cursor: pointer;}
.thumblist-box_catalog .next:hover, .thumblist-box_catalog .prev:hover {background: #707070;border: 1px solid #707070;}
.thumblist-box_catalog .prev {left: 0px;}
.thumblist-box_catalog .next {right: 0px;}
.thumblist-box_catalog .thumblist_catalog li {display: block;float: left;margin: 0 10px 10px;}
.thumblist-box_catalog .thumblist_catalog li a {display: table-cell;vertical-align: middle;width: 45px;text-align: center;}


#3 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 23 Декабрь 2016 - 18:47

Изменения выполнила, бэкап с изменениями

23.12.2016 18:28:39.

Сейчас все убрала. Во-первых, нужно сделать одинаковый размер фото (50*50 px приблизительно). 2. Карусель не работает. 3. Показываются все фото, имеющиеся у товара,  а нужно чтобы было видно один ряд с 4 фотографиями и нормально пролистывалась карусель. 4. Из-за разного количества фотографий сломались все ряды с товарами. Нужно чтобы было выравнивание по нижнему краю товара с фото

#4 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 28 Декабрь 2016 - 16:10

А можно сделать, чтобы дополнительные фотографии появлялись сбоку вертикально при наведении на карточку в каталоге товаров, как появляются характеристики в теме Хамелеон? Так как стационарно снизу не очень презентабельно выглядит.

#5 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 09 Январь 2017 - 16:40

 Mari-ina (28 Декабрь 2016 - 16:10) писал:

А можно сделать, чтобы дополнительные фотографии появлялись сбоку вертикально при наведении на карточку в каталоге товаров, как появляются характеристики в теме Хамелеон? Так как стационарно снизу не очень презентабельно выглядит.

Что касаемо приведеной выше инструкции, то при ее установке происходит пролиистывание фотографий. Не совсем понятно что Вы имеете ввиду

Цитата

Показываются все фото, имеющиеся у товара,  а нужно чтобы было видно один ряд с 4 фотографиями
Что касаемо отображения фотографий сбоку, возможно Вам понравиться тот вариант, который реализован в теме Движение. Скриншот прикрепила.

Прикрепленные изображения

  • Screenshot_96.jpg


#6 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 11 Январь 2017 - 08:40

Да, меня устраивает как в Движении

#7 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 19 Январь 2017 - 13:20

 Mari-ina (11 Январь 2017 - 08:40) писал:

Да, меня устраивает как в Движении
Здравствуйте.
Изменения Вам произвел, проверьте.

#8 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 19 Январь 2017 - 13:31

ООО, все сломалось!!!

#9 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 19 Январь 2017 - 13:38

 Mari-ina (19 Январь 2017 - 13:31) писал:

ООО, все сломалось!!!
Кто-то производил изменения параллельно со мной и поэтому возникли ошибки со слайдером.
Все исправил и сохранил в последнем бэкапе, на случай возникновения ошибок.

#10 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 19 Январь 2017 - 13:39

Хорошо, спасибо!

#11 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 22 Январь 2017 - 08:46

Здравствуйте. Сейчас посмотрела, что в разделе Коляски 2в1 у подгружаемых товаров со второй страницы доп.фотографии при наведении на товар не показываются, если перейти на вторую страницу, то все работает.

#12 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 24 Январь 2017 - 11:23

 Mari-ina (22 Январь 2017 - 08:46) писал:

Здравствуйте. Сейчас посмотрела, что в разделе Коляски 2в1 у подгружаемых товаров со второй страницы доп.фотографии при наведении на товар не показываются, если перейти на вторую страницу, то все работает.
Здравствуйте, найдите в файле main.js код
$(function(){

  var $container = $('.product-grid, .product-list');
  var lastPage = 1;
  // Скрываем навигацию по умолчанию
  $('.pagination').hide();
  $container.infinitescroll({
	navSelector  : '.infinitescroll-pages',	// класс элемента постраничной навигации для бесконечного скрола
	nextSelector : '.infinitescroll-pages b + a',  // класс элемента постраничной навигации, ссылка на следующую страницу
	itemSelector : '.item',	 // класс элементов, которые будем извлекать
	loading: {
	  msgText: 'Пожалуйста подождите...',
	  finishedMsg: 'Больше нет товаров.',
	  img: zoomloaderPath ? zoomloaderPath : '/zoomloader.gif'
	}
	}, function(newElements) {
	  var $newElems = $( newElements ).css({ opacity: 1 });
	
	  lastPage++;
	  // если это последняя страница, завершаем работу
	  if(lastPage >= (infiniteScrollLastPage ? infiniteScrollLastPage : 1) ){
		$container.infinitescroll('pause');
	  }
	}
  );
});

замените на
$(function(){

  var $container = $('.product-grid, .product-list');
  var lastPage = 1;
  // Скрываем навигацию по умолчанию
  $('.pagination').hide();
  $container.infinitescroll({
	navSelector  : '.infinitescroll-pages',	// класс элемента постраничной навигации для бесконечного скрола
	nextSelector : '.infinitescroll-pages b + a',  // класс элемента постраничной навигации, ссылка на следующую страницу
	itemSelector : '.item',	 // класс элементов, которые будем извлекать
	loading: {
	  msgText: 'Пожалуйста подождите...',
	  finishedMsg: 'Больше нет товаров.',
	  img: zoomloaderPath ? zoomloaderPath : '/zoomloader.gif'
	}
	}, function(newElements) {
	  var $newElems = $( newElements ).css({ opacity: 1 });
	  lastPage++;
	  // если это последняя страница, завершаем работу
	  if(lastPage >= (infiniteScrollLastPage ? infiniteScrollLastPage : 1) ){
		$container.infinitescroll('pause');
		   $(document).ready(function(){
  previewInit();
  // Добавление товара в корзину
  $('#wrapper').on('click', '.add-cart', function() {
	var form = $(this).closest('form');
	if ($(this).hasClass('quick')) {
	  form.attr('rel', 'quick');
	} else {
	  var rel = form.attr('rel');
	  if (rel) {
		form.attr('rel', rel.replace('quick', ''));
	  }
	}
	form.trigger('submit');
	return (false);
  })
 
});
	  }
	}
  );
});


#13 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 24 Январь 2017 - 13:44

Спасибо

#14 Pogranets

Pogranets

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 132 сообщений

Отправлено 05 Декабрь 2017 - 11:25

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

Прикрепленные изображения

  • не видно.jpg


#15 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 10 Декабрь 2017 - 12:14

 Pogranets (05 Декабрь 2017 - 11:25) писал:

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

Здравствуйте.
В шаблоне main.css найдите код:
.block-menu-content ul li a.active {color: #fff;}

Замените на:
.block-menu-content ul li a.active {color: #000;}

Так же найдите код:
.view-mode span {color: #fff;}

Замените на:
.view-mode span {color: #000;}

И найдите код:
.header-tools .myaccount:hover .fa-user, .header-tools .mycart:hover .fa-shopping-cart .header-tools .mycompare:hover .fa-retweet {color: #fff;}

Замените на:
.header-tools .myaccount:hover .fa-user, .header-tools .mycart:hover .fa-shopping-cart .header-tools .mycompare:hover .fa-retweet {color: #000;}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных