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


Каталог Списком

Автор Kaluchka, 22 окт. 2013 14:49

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

#1 Kaluchka

Kaluchka

    Пользователь

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

Отправлено 22 Октябрь 2013 - 14:49

Добрый день!
Как в шаблоне "Осень" сделать что бы название категорий открывались списком как на прикрепленном файле?

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

  • каталог.png

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Октябрь 2013 - 04:42

Найдите в вашем файле стилей style.css

#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 250px;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 200px;
	z-index: 100;
}

и замените на

#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 15px;
	padding: 0;
	position: relative;
	text-align: left;
	vertical-align: top;
	width: 100%;
	z-index: 100;
}

далее найдите

#category_view_type.grid_view #product_list .product_image_wrapper {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	padding: 8px;
	position: relative;
}

и замените на

#category_view_type.grid_view #product_list .product_image_wrapper {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	display: none;
	padding: 8px;
	position: relative;
}

далее найдите

#category_view_type.grid_view #product_list .product_list_details_left {
	display: block;
	text-align: center;
}

и замените на

#category_view_type.grid_view #product_list .product_list_details_left {
	display: block;
	margin-left: 40px;
	text-align: left;
}

далее найдите

#category_view_type.grid_view #product_list .product_list_details_left h5 {
	font-size: 14px;
	font-weight: 400;
	padding: 12px 0 5px;
}

и замените на

#category_view_type.grid_view #product_list .product_list_details_left h5 {
	font-size: 14px;
	font-weight: bold;
}

#3 Flor@@

Flor@@

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

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

Отправлено 11 Ноябрь 2013 - 14:49

подскажите, а какой будет результат применения данной инструкции?
1. хотелось бы чтобы вся кнопка меню каталога была бы активна при сворачивании подраздела меню, а не только плюсик.. скрин №1.
2. хотелось бы чтобы подменю каталога 3его уровня расрывалось бы вбок, как на скрине №2:

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

  • вид сайта 10.jpg
  • вид сайта 22.jpg

Сообщение отредактировал otdyh-i-son.ru: 11 Ноябрь 2013 - 15:10

#4 Koderhan

Koderhan

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

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

Отправлено 13 Ноябрь 2013 - 12:27

1. активным сделать само слово в пункте меню нельзя. Т.к у пользователя потеряется возможность перейти в категорию . Сейчас если нажать на название категории , пользователь переходит в категорию.
2. И я бы не рекомендовал делать такой раскрывающийся меню , т.к это будет не удобно на мобильных устройствах.

#5 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 14 Ноябрь 2013 - 11:24

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

И там 2 товара на одной строке, с на другой, да еще не под этими первыми.
Прыгает, посмотрите.

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

Но главное во всех изменениях - не нарушить адаптивность шаблона.

Заранее спасибо!

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

  • 1.png
  • 2.png

#6 Koderhan

Koderhan

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

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

Отправлено 14 Ноябрь 2013 - 15:39

Просмотр сообщенияНаталья C. (14 Ноябрь 2013 - 11:24) писал:

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

И там 2 товара на одной строке, с на другой, да еще не под этими первыми.
Прыгает, посмотрите.

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

Но главное во всех изменениях - не нарушить адаптивность шаблона.

Заранее спасибо!
Вероятно вы нарушили верстку после внесения изменений в файл "Товары". Попробуйте восстановить изменения.
Или заменить код в файле "Товары".
Код:
<div id="productsSortForm">
<!-- Поле выбора сортировки -->
{% IF goods_show_order_fields %}
<label class="sort_by">Сортировать по:</label>
<select name="goods_search_field_id" onchange="this.form.submit();">
{% FOR goods_order_fields %}
{%IF goods_order_fields.ID = 1 %}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По возрастанию цены</option>
{% ELSEIF goods_order_fields.ID = 2 %}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По убыванию цены</option>
{% ENDIF %}
{% ENDFOR %}
</select>
{% ENDIF %}
</div>
</form>
Заменить:
		  <div id="productsSortForm">
		  <!-- Поле выбора сортировки -->
		  {% IF goods_show_order_fields %}
			<label class="sort_by">Сортировать по:</label>
			<select name="goods_search_field_id" onchange="this.form.submit();">
			{% FOR goods_order_fields %}
			  {%IF goods_order_fields.ID = 1 %}
				<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По возрастанию цены</option>
			  {% ELSEIF goods_order_fields.ID = 2 %}
				<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По убыванию цены</option>
			  {% ENDIF %}
			{% ENDFOR %}
			</select>
		  {% ENDIF %}
		  </div>
		  </form>
		 
		  </div>

#7 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 14 Ноябрь 2013 - 16:00

Просмотр сообщенияKoderhan (14 Ноябрь 2013 - 15:39) писал:

Вероятно вы нарушили верстку после внесения изменений в файл "Товары". Попробуйте восстановить изменения.
Или заменить код в файле "Товары".
Код:
<div id="productsSortForm">
<!-- Поле выбора сортировки -->
{% IF goods_show_order_fields %}
<label class="sort_by">Сортировать по:</label>
<select name="goods_search_field_id" onchange="this.form.submit();">
{% FOR goods_order_fields %}
{%IF goods_order_fields.ID = 1 %}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По возрастанию цены</option>
{% ELSEIF goods_order_fields.ID = 2 %}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По убыванию цены</option>
{% ENDIF %}
{% ENDFOR %}
</select>
{% ENDIF %}
</div>
</form>
Заменить:
		 <div id="productsSortForm">
		 <!-- Поле выбора сортировки -->
		 {% IF goods_show_order_fields %}
		 <label class="sort_by">Сортировать по:</label>
		 <select name="goods_search_field_id" onchange="this.form.submit();">
		 {% FOR goods_order_fields %}
			 {%IF goods_order_fields.ID = 1 %}
			 <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По возрастанию цены</option>
			 {% ELSEIF goods_order_fields.ID = 2 %}
			 <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>По убыванию цены</option>
			 {% ENDIF %}
		 {% ENDFOR %}
		 </select>
		 {% ENDIF %}
		 </div>
		 </form>
		
		 </div>

Сделала. Стало лучше.
Теперь надо каталог поднять вверх, чтобы он был на белом фоне, а не на сером, как сейчас.
И еще убрать лишний знак < (выделила его оранжевым кружком)

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

  • 2.png

#8 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 14 Ноябрь 2013 - 16:19

Просмотр сообщенияНаталья C. (14 Ноябрь 2013 - 16:00) писал:

Сделала. Стало лучше.
Теперь надо каталог поднять вверх, чтобы он был на белом фоне, а не на сером, как сейчас.
И еще убрать лишний знак < (выделила его оранжевым кружком)
Отступ регулируется в файле style.css в коде
.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}
параметром margin-bottom:50px;
Лишний символ - первый символ в строке
<<div id="productsSortForm">
в шаблоне "Товары"

#9 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 14 Ноябрь 2013 - 16:44

Просмотр сообщенияsengun (14 Ноябрь 2013 - 16:19) писал:

Отступ регулируется в файле style.css в коде
.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}
параметром margin-bottom:50px;
Лишний символ - первый символ в строке
<<div id="productsSortForm">
в шаблоне "Товары"

Вместо margin-bottom:50px; поставила margin-bottom:5px;

Особо ничего не изменилось. Мне же нужно очень высоко поднять вверх каталог

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

  • 3.png

#10 Сake

Сake

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

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

Отправлено 15 Ноябрь 2013 - 00:31

Каталог у вас сместился из-за ошибки в разметке шаблона. Скорее всего ошибка находиться в шаблоне "Товары". Какие изменения вы производили в результате чего появилась данная проблема? Если у вас есть возможность восстановить шаблон из резервной копии - то сделайте это, а после проделайте необходимые изменения в шаблоне еще раз. Так же можно попробовать восстановить только шаблон "Товары" заменив весь код шаблона на код шаблона по умолчанию

Скрытый текст

#11 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 15 Ноябрь 2013 - 11:10

Просмотр сообщенияСake (15 Ноябрь 2013 - 00:31) писал:

Каталог у вас сместился из-за ошибки в разметке шаблона. Скорее всего ошибка находиться в шаблоне "Товары". Какие изменения вы производили в результате чего появилась данная проблема? Если у вас есть возможность восстановить шаблон из резервной копии - то сделайте это, а после проделайте необходимые изменения в шаблоне еще раз. Так же можно попробовать восстановить только шаблон "Товары" заменив весь код шаблона на код шаблона по умолчанию

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

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

  • ошибка.jpg

#12 Сake

Сake

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

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

Отправлено 16 Ноябрь 2013 - 00:43

Найдите в вашем файле стилей style.css класс

#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 250px;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 200px;
	z-index: 100;
}

и замените его на

#category_view_type.grid_view #product_list li {
  border: 0 none;
  display: -moz-inline-stack;
  margin: 0 15px;
  min-height: 250px;
  padding: 0;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 200px;
  z-index: 1;
}

далее найдите

#header-fluid {
	background: url("{ASSETS_IMAGES_PATH}header-top-bg.png") repeat-x 0 0 #FAFAFA;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 10;
}

и замените на

#header-fluid {
	background: url("{ASSETS_IMAGES_PATH}header-top-bg.png") repeat-x 0 0 #FAFAFA;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 1;
}

#13 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

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

Просмотр сообщенияСake (16 Ноябрь 2013 - 00:43) писал:

Найдите в вашем файле стилей style.css класс

#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 15px;
min-height: 250px;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 200px;
z-index: 100;
}

и замените его на

#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 15px;
min-height: 250px;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 200px;
z-index: 1;
}

далее найдите

#header-fluid {
background: url("{ASSETS_IMAGES_PATH}header-top-bg.png") repeat-x 0 0 #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
position: relative;
z-index: 10;
}

и замените на

#header-fluid {
background: url("{ASSETS_IMAGES_PATH}header-top-bg.png") repeat-x 0 0 #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
position: relative;
z-index: 1;
}
Этот код не смогла найти #header-fluid {
        background: url("{ASSETS_IMAGES_PATH}header-top-bg.png") repeat-x 0 0 #FAFAFA;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 10;
}
Он точно есть в файле стилей?

#14 Taisia

Taisia

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

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

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

этот код у вас точно есть
посмотрите скриншот, пожалуйста

Screenshot_1.png

#15 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 16 Ноябрь 2013 - 14:08

Просмотр сообщенияTaisia (16 Ноябрь 2013 - 13:01) писал:

этот код у вас точно есть
посмотрите скриншот, пожалуйста

Прикрепленный файл Screenshot_1.png

Ой, мне стыдно, что не смогла найти... Спасибо!
Заменила, но ничего не изменилось.

Категории в каталоге расположены все так же одна под одной, а не на одной строке.

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

  • 111.jpg

#16 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 16 Ноябрь 2013 - 22:11

Просмотр сообщенияНаталья C. (16 Ноябрь 2013 - 14:08) писал:

Ой, мне стыдно, что не смогла найти... Спасибо!
Заменила, но ничего не изменилось.

Категории в каталоге расположены все так же одна под одной, а не на одной строке.
Здравствуйте. Замените в style.css
#category_view_type.grid_view #product_list li {
  border: 0 none;
  display: -moz-inline-stack;
  margin: 0 15px;
  min-height: 250px;
  padding: 0;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 200px;
  z-index: 1;
}
на этот код
#category_view_type.grid_view #product_list li {
  border: 0 none;
  display: -moz-inline-stack;
  margin: 0 15px;
  min-height: 250px;
  padding: 0;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 200px;
float: left;
  z-index: 1;
}

#17 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 17 Ноябрь 2013 - 09:50

Просмотр сообщенияsengun (16 Ноябрь 2013 - 22:11) писал:

Здравствуйте. Замените в style.css
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 15px;
min-height: 250px;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 200px;
z-index: 1;
}
на этот код
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 15px;
min-height: 250px;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 200px;
float: left;
z-index: 1;
}
Спасибо пребольшое! ))

#18 Kaluchka

Kaluchka

    Пользователь

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

Отправлено 18 Ноябрь 2013 - 22:13

А можно ли как то сделать что бы был так же списком (Спасибо кстати получилось) Но при этом что бы рядом было маленькое изображение рядом с категорией?
И можно ли как то выделить категории при отображении списком?

Заранее спасибо.

#19 Kaluchka

Kaluchka

    Пользователь

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

Отправлено 19 Ноябрь 2013 - 15:36

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

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

Прикрепленные файлы


#20 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Ноябрь 2013 - 03:47

пришлите пожалуйста номер аккаунта или ссылку на сайт.

Если вам необходимо чтобы у категорий отображались фото, то необходимо найти:
#category_view_type.grid_view #product_list .product_image_wrapper {
		background: none repeat scroll 0 0 #FFFFFF;
		border-radius: 2px 2px 2px 2px;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
		display: none;
		padding: 8px;
		position: relative;
}

и заменить на:
#category_view_type.grid_view #product_list .product_image_wrapper {
		background: none repeat scroll 0 0 #FFFFFF;
		border-radius: 2px 2px 2px 2px;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
		padding: 8px;
		position: relative;
}

Обратно в Каталог товаров


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

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

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