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


Оформить Подкаталоги Как Кнопки

Автор ogonek7777, 16 нояб. 2017 01:58

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

#1 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 16 Ноябрь 2017 - 01:58

Можно ли подкаталоги оформить с рамкой как в верхнем горизонтальном каталоге?
(1.Красную точку при этом перед строкой убрать,
2.рамки у всех категорий сделать одного размера).

3. На странице Главного Каталога оформить также.
4.В Главном Каталоге разместить текстовое описание как в подкаталогах.

Спасибо
2017-11-16_01-50-44.jpg

Чтобы рамка была такая
2017-11-18_18-41-49.jpg

#2 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 17 Ноябрь 2017 - 23:00

ау

#3 Firefly

Firefly

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

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

Отправлено 20 Ноябрь 2017 - 10:18

Просмотр сообщенияogonek7777 (16 Ноябрь 2017 - 01:58) писал:

Можно ли подкаталоги оформить с рамкой как в верхнем горизонтальном каталоге?
(1.Красную точку при этом перед строкой убрать,
2.рамки у всех категорий сделать одного размера).

3. На странице Главного Каталога оформить также.
4.В Главном Каталоге разместить текстовое описание как в подкаталогах.

Спасибо
Прикрепленный файл 2017-11-16_01-50-44.jpg

Чтобы рамка была такая
Прикрепленный файл 2017-11-18_18-41-49.jpg

Здравствуйте.
В шаблоне main.css код:
.categories .item .cat-name {margin: 0;padding: 10px;background: transparent;text-align: left;}
.categories .item .cat-name a {display: block;overflow: hidden;font-size: 14px;/* height: 18px; */}
.categories .item .cat-name a:before {content: '●';display:inline-block;vertical-align:top;color: #f50056;position: absolute;left: -10px;top:20px;margin-top: -12px;}

Заменил на:
.categories .item .cat-name {margin: 0;padding: 10px;background: transparent;text-align: center;}
.categories .item .cat-name a {display: table-cell;overflow: hidden;font-size: 14px;border: 1px solid #D6B46B;border-radius: 25px;padding: 10px;height: 70px;vertical-align: middle;width: 250px;}

#4 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 20 Ноябрь 2017 - 11:48

Просмотр сообщенияFirefly (20 Ноябрь 2017 - 10:18) писал:

Здравствуйте.
В шаблоне main.css код:
.categories .item .cat-name {margin: 0;padding: 10px;background: transparent;text-align: left;}
.categories .item .cat-name a {display: block;overflow: hidden;font-size: 14px;/* height: 18px; */}
.categories .item .cat-name a:before {content: '●';display:inline-block;vertical-align:top;color: #f50056;position: absolute;left: -10px;top:20px;margin-top: -12px;}

Заменил на:
.categories .item .cat-name {margin: 0;padding: 10px;background: transparent;text-align: center;}
.categories .item .cat-name a {display: table-cell;overflow: hidden;font-size: 14px;border: 1px solid #D6B46B;border-radius: 25px;padding: 10px;height: 70px;vertical-align: middle;width: 250px;}
Спасибо! Замечательно! Единственное, что это все такое огромное((( Кам мне все это сделать поуже? (рамку сверху-снизу, между категориями)

2. А возможно ли сделать описание под каталогом?

#5 Firefly

Firefly

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

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

Отправлено 20 Ноябрь 2017 - 12:15

Просмотр сообщенияogonek7777 (20 Ноябрь 2017 - 11:48) писал:

Спасибо! Замечательно! Единственное, что это все такое огромное((( Кам мне все это сделать поуже?

2. А возможно ли сделать описание под каталогом?

Как вариант можно уменьшить размер плиток категорий по ширине, таким образом можно их разместить по 4 штуки в ряд.
Для этого в main.css найдите код:
.categories .item {display: inline-block;position: relative;margin: 0 15px 5px;text-align: center;width: 270px;}

Измените значение 270 на 195

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

2. Код вывода описания из самого низа шаблона Товары:
{%IF GOODS_PAGES_CURRENT = 1%}
<!-- Вывод всех видов описания категории -->
{% IF CATEGORY_DESCRIPTION || CATEGORY_SEO_DESCRIPTION_SHORT || CATEGORY_SEO_DESCRIPTION_LARGE %}
  <div class="DescriptionBlock f-fix">
		<div class="htmlDataBlock">
		  <!-- Описание категории -->
		  {% IF CATEGORY_DESCRIPTION %}
				<p>{CATEGORY_DESCRIPTION}</p>
		  {% ENDIF %}
		  <!-- Короткое SEO описание категории -->
		  {% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
				<p>{CATEGORY_SEO_DESCRIPTION_SHORT}</p>
		  {% ENDIF %}
		  <!-- Полное SEO описание категории -->
		  {% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
				<p>{CATEGORY_SEO_DESCRIPTION_LARGE}</p>
		  {% ENDIF %}
		</div>
  </div>
{% ENDIF %}
{% ENDIF %}
<!-- /END Вывод всех видов описания категории -->

Переместил выше.

#6 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 20 Ноябрь 2017 - 13:34

Просмотр сообщенияFirefly (20 Ноябрь 2017 - 12:15) писал:

Как вариант можно уменьшить размер плиток категорий по ширине, таким образом можно их разместить по 4 штуки в ряд.
Для этого в main.css найдите код:
.categories .item {display: inline-block;position: relative;margin: 0 15px 5px;text-align: center;width: 270px;}

Измените значение 270 на 195

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

2. Код вывода описания из самого низа шаблона Товары:
{%IF GOODS_PAGES_CURRENT = 1%}
<!-- Вывод всех видов описания категории -->
{% IF CATEGORY_DESCRIPTION || CATEGORY_SEO_DESCRIPTION_SHORT || CATEGORY_SEO_DESCRIPTION_LARGE %}
<div class="DescriptionBlock f-fix">
	 <div class="htmlDataBlock">
		 <!-- Описание категории -->
		 {% IF CATEGORY_DESCRIPTION %}
			 <p>{CATEGORY_DESCRIPTION}</p>
		 {% ENDIF %}
		 <!-- Короткое SEO описание категории -->
		 {% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
			 <p>{CATEGORY_SEO_DESCRIPTION_SHORT}</p>
		 {% ENDIF %}
		 <!-- Полное SEO описание категории -->
		 {% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
			 <p>{CATEGORY_SEO_DESCRIPTION_LARGE}</p>
		 {% ENDIF %}
	 </div>
</div>
{% ENDIF %}
{% ENDIF %}
<!-- /END Вывод всех видов описания категории -->

Переместил выше.

1. Теперь строчка Доставка и Самовывоз дублируется , проверьте, пожалуйста, (ноут)
2. Необходимо,  чтобы тексты находились ПОД товарами на ПК и на телефоне. Возможно, мы не поняли друг друга.
3. Подкатегории на ноуте еще не так ужасно смотрятся, но на телефоне - огромная портянка. Ужасно((((
Спасибо.

#7 Firefly

Firefly

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

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

Отправлено 20 Ноябрь 2017 - 14:22

Просмотр сообщенияogonek7777 (20 Ноябрь 2017 - 13:34) писал:

1. Теперь строчка Доставка и Самовывоз дублируется , проверьте, пожалуйста, (ноут)
2. Необходимо,  чтобы тексты находились ПОД товарами на ПК и на телефоне. Возможно, мы не поняли друг друга.
3. Подкатегории на ноуте еще не так ужасно смотрятся, но на телефоне - огромная портянка. Ужасно((((
Спасибо.

Вернул Вам текст описания категорий под товары.
Внес изменения по категориям. В мобильной и планшетной версии до разрешения 768px категории не будут отображаться всем списком. В случае, если их больше 6 - будет показываться кнопка Показать все.
В шаблоне main.css добавил код:
.categories .item {width: 120px; float: left;}
.categories .item:nth-child(n+6) {display: none;}
.pdt-loadmore {display: block;overflow: hidden;width: 100%;}
.pdt-loadmore .btn-loadmore {max-width:200px;margin: 20px auto 10px auto;}
.categories .item.showThis {display:block;}
.categories .loadmore {margin-bottom: 10px;}

В main.js добавил код:
//Функция показать больше для категорий в мобильной версии
$(function(){
  var i = 0;
  $('.categories .item').each(function(){
	i++;
  })
  if(i<=6){$('.categories .showAllGoods').hide()}
	$('.categories .showAllGoods').on('click',function(){
  if($(this).hasClass('active')){
	$(this).removeClass('active');
	$('.categories .item').removeClass('showThis');  
	$(this).text('Показать все');
	$(this).attr('title', 'Показать все');
  }else{
	$('.categories .item').addClass('showThis');
	$(this).addClass('active');
	$(this).text('Скрыть');
	$(this).attr('title', 'Скрыть');
  }
})
});

В шаблоне Товары добавил код:
	<div class="loadmore">
	  <div class="button btn-loadmore showAllGoods" title="Показать все"><span>Показать все</span></div>
	</div>

По поводу пункта Доставка и самовывоз, уточните, пожалуйста на скриншоте.

#8 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 20 Ноябрь 2017 - 14:25

Просмотр сообщенияFirefly (20 Ноябрь 2017 - 14:22) писал:

Вернул Вам текст описания категорий под товары.
Внес изменения по категориям. В мобильной и планшетной версии до разрешения 768px категории не будут отображаться всем списком. В случае, если их больше 6 - будет показываться кнопка Показать все.
В шаблоне main.css добавил код:
.categories .item {width: 120px; float: left;}
.categories .item:nth-child(n+6) {display: none;}
.pdt-loadmore {display: block;overflow: hidden;width: 100%;}
.pdt-loadmore .btn-loadmore {max-width:200px;margin: 20px auto 10px auto;}
.categories .item.showThis {display:block;}
.categories .loadmore {margin-bottom: 10px;}

В main.js добавил код:
//Функция показать больше для категорий в мобильной версии
$(function(){
var i = 0;
$('.categories .item').each(function(){
i++;
})
if(i<=6){$('.categories .showAllGoods').hide()}
$('.categories .showAllGoods').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.categories .item').removeClass('showThis');
$(this).text('Показать все');
$(this).attr('title', 'Показать все');
}else{
$('.categories .item').addClass('showThis');
$(this).addClass('active');
$(this).text('Скрыть');
$(this).attr('title', 'Скрыть');
}
})
});

В шаблоне Товары добавил код:
<div class="loadmore">
	 <div class="button btn-loadmore showAllGoods" title="Показать все"><span>Показать все</span></div>
</div>

По поводу пункта Доставка и самовывоз, уточните, пожалуйста на скриншоте.
А вроде дубль пропал)))
Получилось очень хорошо! Огромное спасибо!)))

#9 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 21 Ноябрь 2017 - 14:46

Здравствуйте, в мобильной версии забыли в ГЛАВНОМ КАТАЛОГЕ установить красную кнопку ПОКАЗАТЬ ВСЕ и там теперь из всех рубрик только 3. ПОмогите

#10 Firefly

Firefly

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

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

Отправлено 21 Ноябрь 2017 - 15:05

Просмотр сообщенияogonek7777 (21 Ноябрь 2017 - 14:46) писал:

Здравствуйте, в мобильной версии забыли в ГЛАВНОМ КАТАЛОГЕ установить красную кнопку ПОКАЗАТЬ ВСЕ и там теперь из всех рубрик только 3. ПОмогите

Здравствуйте.
Кнопку добавил

#11 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 21 Ноябрь 2017 - 20:44

Просмотр сообщенияFirefly (21 Ноябрь 2017 - 15:05) писал:

Здравствуйте.
Кнопку добавил
спасибо
Обратно в Каталог товаров


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Новогодний
  5. → Каталог товаров
  6. Privacy Policy