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


"причесать" Отображение Категории И Товаров


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

#1 bazilevs

bazilevs

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

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

Отправлено 13 Январь 2016 - 13:29

Добрый день подскажите пожалуйста как:

1. поднять категории вверх и убрать пустое пространство (1.png)

2. уменьшить расстояние между строками (2.png)

3. При уменьшении ширины экрана не уменьшается высота картинки категории, что выглядит не ок. (3.png)

4. сделать чтобы для зашедшего посетителя товары отображались списком, а не в виде таблицы

5. Убрать информацию о том, сколько товаров в категории (сверху)

Спасибо!

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

  • 1.PNG
  • 2.PNG
  • 3.PNG


#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 13 Январь 2016 - 13:41

Просмотр сообщенияbazilevs (13 Январь 2016 - 13:29) писал:

Добрый день подскажите пожалуйста как:

1. поднять категории вверх и убрать пустое пространство (1.png)

2. уменьшить расстояние между строками (2.png)

3. При уменьшении ширины экрана не уменьшается высота картинки категории, что выглядит не ок. (3.png)

4. сделать чтобы для зашедшего посетителя товары отображались списком, а не в виде таблицы

5. Убрать информацию о том, сколько товаров в категории (сверху)

Спасибо!

Здравствуйте.
Попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:

.cat {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
	margin: 0 0 40px;
	width: 100%;
	height: 350px;
	max-width: 300px;
	overflow: hidden;
	position: relative;
	text-align: left;
	vertical-align: top;
	float: left;
}

И замените его вот этим вот кодом:

.cat {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
	margin: 0 0 40px;
	width: 100%;
	height: 250px;
	max-width: 300px;
	overflow: hidden;
	position: relative;
	text-align: left;
	vertical-align: top;
	float: left;
}


#3 bazilevs

bazilevs

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

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

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

Спасибо. 1 и 2-я проблемы решились. Но пропала верхняя граница рамки изображения категории

С 3-5 пока нет.

#4 Dars

Dars

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

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

Отправлено 13 Январь 2016 - 15:48

Просмотр сообщенияbazilevs (13 Январь 2016 - 15:38) писал:

Спасибо. 1 и 2-я проблемы решились. Но пропала верхняя граница рамки изображения категории

С 3-5 пока нет.
Здравствуйте!

3) В main.css строго перед строками:

}
@media all and (max-width: 767px) {

вставьте код:

.category-img, .category-img img {height:100px;}

4) В шаблоне "Товары" найдите код:

	 <!-- Вывод товаров -->
	 <div class="yt-products-container clearfix">
	 {% IF GOODS_VIEW_TYPE=1 %}

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

	 <!-- Вывод товаров -->
	 <div class="yt-products-container clearfix">
	 {% IF GOODS_VIEW_TYPE=2 %}

После данного изменения у вас все равно какое-то время при заходе в категорию по умолчанию товары будут отображаться таблицей, т.к. эта опция кэшируется. Чтобы убедиться, что у пользователей по умолчанию отображение будет списком, зайдите на сайт с другого браузера.

5) В шаблоне HTML найдите строку:

				 {% IF IS_FULL_CATALOG %}Каталог{% ELSE %} {% IF GOODS_PAGES_RESULTS = 0%} {CATEGORY_NAME} {% ELSE %} {CATEGORY_NAME} ({GOODS_PAGES_RESULTS} товар{GOODS_PAGES_RESULTS | gen_word_end("","а","ов")} в категории){% ENDIF %} {% ENDIF %}

и замените её на:

				 {% IF IS_FULL_CATALOG %}Каталог{% ELSE %} {% IF GOODS_PAGES_RESULTS = 0%} {CATEGORY_NAME} {% ELSE %} {CATEGORY_NAME} {% ENDIF %} {% ENDIF %}


#5 bazilevs

bazilevs

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

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

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

Спасибо

4-5 ок

Но так и отсутствует верхняя линия рамки над изображением категории после решения проблем 1-2

3. проблема не решена. В большом разрешении картинки сжимаются до 100пикселей по вертикали. Вставлял строки строго перед теми что указали (получилось, что нужно вставить в 2-х местах). Вернул как было.

#6 Dars

Dars

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

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

Отправлено 13 Январь 2016 - 16:56

Просмотр сообщенияbazilevs (13 Январь 2016 - 16:38) писал:

Спасибо

4-5 ок

Но так и отсутствует верхняя линия рамки над изображением категории после решения проблем 1-2

3. проблема не решена. В большом разрешении картинки сжимаются до 100пикселей по вертикали. Вставлял строки строго перед теми что указали (получилось, что нужно вставить в 2-х местах). Вернул как было.

3. Внес изменения сам, проверяйте, пожалуйста.

#7 bazilevs

bazilevs

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

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

Отправлено 13 Январь 2016 - 17:33

Спасибо. а как поступить с верхней рамкой? её так и нет

#8 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 13 Январь 2016 - 17:55

Просмотр сообщенияbazilevs (13 Январь 2016 - 17:33) писал:

Спасибо. а как поступить с верхней рамкой? её так и нет

Тогда сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

.category .default {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
}

И замените его вот этим вот кодом:

.category .default {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	bottom: -23px;
}


Далее и снова в том же шаблоне найдите, пожалуйста, следующий код:

.cat {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
	margin: 0 0 40px;
	width: 100%;
	height: 250px;
	max-width: 300px;
	overflow: hidden;
	position: relative;
	text-align: left;
	vertical-align: top;
	float: left;
}

И замените его вот этим вот кодом:

.cat {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
	margin: 0 0 40px;
	width: 100%;
	height: 250px;
	max-width: 300px;
	position: relative;
	text-align: left;
	vertical-align: top;
	float: left;
}


#9 bazilevs

bazilevs

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

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

Отправлено 15 Январь 2016 - 15:11

По поводу табличного и строчного представления товаров (Проблема 4). Обнаружил, что кнопки табличного и строчного режима не соответствуют выбираемому режиму.

#10 Firefly

Firefly

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

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

Отправлено 15 Январь 2016 - 15:29

Просмотр сообщенияbazilevs (15 Январь 2016 - 15:11) писал:

По поводу табличного и строчного представления товаров (Проблема 4). Обнаружил, что кнопки табличного и строчного режима не соответствуют выбираемому режиму.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товары, найдите код:
			  <!-- Блок изменения вида списка -->
			  <div class="view-mode-wrap">
				<p class="view-mode">
				{% IF GOODS_VIEW_TYPE=1 %}
				  <strong title="Таблица" class="listing-grid-icon grid"></strong>
				  <a href="?goods_view_type=2" title="Список" class="listing-icon list"></a>
				{% ELSE %}
				  <a href="?goods_view_type=1" title="Таблица" class="listing-grid-icon grid"></a>
				  <strong title="Список" class="listing-icon list"></strong>
				{% ENDIF %}
				</p>
			  </div>

Замените на:
			  <!-- Блок изменения вида списка -->
			  <div class="view-mode-wrap">
				<p class="view-mode">
				{% IF GOODS_VIEW_TYPE=1 %}
				  <strong title="Список" class="listing-icon list"></strong>
				  <a href="?goods_view_type=2" title="Таблица" class="listing-grid-icon grid"></a>
				{% ELSE %}
				  <a href="?goods_view_type=1" title="Список" class="listing-icon list"></a>
				  <strong title="Таблица" class="listing-grid-icon grid"></strong>
				{% ENDIF %}
				</p>
			  </div>


#11 bazilevs

bazilevs

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

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

Отправлено 19 Февраль 2016 - 17:38

Просмотр сообщенияFirefly (15 Январь 2016 - 15:29) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товары, найдите код:
			 <!-- Блок изменения вида списка -->
			 <div class="view-mode-wrap">
			 <p class="view-mode">
			 {% IF GOODS_VIEW_TYPE=1 %}
				 <strong title="Таблица" class="listing-grid-icon grid"></strong>
				 <a href="?goods_view_type=2" title="Список" class="listing-icon list"></a>
			 {% ELSE %}
				 <a href="?goods_view_type=1" title="Таблица" class="listing-grid-icon grid"></a>
				 <strong title="Список" class="listing-icon list"></strong>
			 {% ENDIF %}
			 </p>
			 </div>

Замените на:
			 <!-- Блок изменения вида списка -->
			 <div class="view-mode-wrap">
			 <p class="view-mode">
			 {% IF GOODS_VIEW_TYPE=1 %}
				 <strong title="Список" class="listing-icon list"></strong>
				 <a href="?goods_view_type=2" title="Таблица" class="listing-grid-icon grid"></a>
			 {% ELSE %}
				 <a href="?goods_view_type=1" title="Список" class="listing-icon list"></a>
				 <strong title="Таблица" class="listing-grid-icon grid"></strong>
			 {% ENDIF %}
			 </p>
			 </div>

К сожалению это меняет кнопки только на верхней полоске. На нижней всё по старому.

#12 Firefly

Firefly

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

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

Отправлено 19 Февраль 2016 - 17:46

Просмотр сообщенияbazilevs (19 Февраль 2016 - 17:38) писал:

К сожалению это меняет кнопки только на верхней полоске. На нижней всё по старому.

Здравствуйте.
Внес Вам аналогичные изменения согласно инструкции выше для блока кода со строки 372.




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

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