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


Как Разместить Цену Под Категорией?

товары категории цена каталог

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

#1 Bloompak

Bloompak

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

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

Отправлено 08 Июнь 2016 - 18:53

Подскажите, пожалуйста, как можно расположить цену под названием категории товара, как в файле "как надо". Клиентам было бы удобно при попадании в раздел с категориями видеть цену (например "цена от..."), не заходя в саму категорию. Цену можно указать на самый дешевый товар в категории. Хочется также добавить надпись под название категории "посмотреть все размеры и цвета" как в прикрепленном образце.

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



#2 Vaccina

Vaccina

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

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

Отправлено 09 Июнь 2016 - 05:56

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

#3 Bloompak

Bloompak

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

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

Отправлено 09 Июнь 2016 - 10:40

Да, давайте попробуем подобный вариант. Главное чтобы эту информацию ("цена от..." и "посмотреть все размеры и цвета") можно было разместить не заходя в категорию.

#4 MikDark

MikDark

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

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

Отправлено 09 Июнь 2016 - 11:17

Просмотр сообщенияBloompak (09 Июнь 2016 - 10:40) писал:

Да, давайте попробуем подобный вариант. Главное чтобы эту информацию ("цена от..." и "посмотреть все размеры и цвета") можно было разместить не заходя в категорию.

В шаблоне Товары Вам нужно найти код:
{% FOR nested_categories_list %}
	  <div class="prod_hold">
		<div>
		  <div class="image goods-cat-image-medium-square">
			<a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">
			  <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=spring{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}">
			</a>
		  </div>
		  <div class="name"><a class="category-name" href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a></div>
		</div>
	  </div>
	{% ENDFOR %}

и заменить его на:
{% FOR nested_categories_list %}
	  <div class="prod_hold">
		<div>
		  <div class="image goods-cat-image-medium-square">
			<a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">
			  <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=spring{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}">
			</a>
		  </div>
		  <div class="name"><a class="category-name" href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a></div>
{%IF nested_categories_list.NAME = Категория 1 %}<div class="catinfo"><div class="size"><a href="#">Посмотреть все размеры и цвета</a></div><div class="catprice">от **** р.</div></div>
{%ELSEIF nested_categories_list.NAME = Категория 2 %}<div class="catinfo"><div class="size"><a href="#">Посмотреть все размеры и цвета</a></div><div class="catprice">от **** р.</div></div>
{%ELSEIF nested_categories_list.NAME = Категория 3 %}<div class="catinfo"><div class="size"><a href="#">Посмотреть все размеры и цвета</a></div><div class="catprice">от **** р.</div></div>
{%ENDIF%}
		</div>
	  </div>
	{% ENDFOR %}

В нем "Категория 1", "Категория 2", "Категория 3" замените на название Ваших категорий и для каждой пропишите цену вместо ***, так же укажите, что должно происходить по клику на просмотр всех размеров и цветов?

#5 Bloompak

Bloompak

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

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

Отправлено 11 Июнь 2016 - 18:32

Спасибо за помощь! Все получилось. По клику на просмотр всех размеров и цветов я пока вставил ссылку на соответствующую категорию.

Возникли следующие вопросы:

1. Каким образом в css можно можно редактировать параметры надписи "посмотреть все размеры и цвета" (менять шрифт, толщину и прочее) и надписи "от..."? А то нашел только как цвет изменить, когда изменил, то другие заголовки, которые до этого были бледно-серыми стали розовыми)). Когда пробовал менять шрифт и его размер изменялись обе надписи одновременно, а это не есть хорошо. Нужно чтобы надпись "посмотреть все размеры и цвета" была маленькой по размеру, а надпись "от..." крупной.

2. Как сменить шрифт, размер названия категории, так чтобы при этом не поменялось на сменяемый шрифт название товара в категории?

#6 support 2.0

support 2.0

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

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

Отправлено 11 Июнь 2016 - 20:01

Просмотр сообщенияBloompak (11 Июнь 2016 - 18:32) писал:

Спасибо за помощь! Все получилось. По клику на просмотр всех размеров и цветов я пока вставил ссылку на соответствующую категорию.

Возникли следующие вопросы:

1. Каким образом в css можно можно редактировать параметры надписи "посмотреть все размеры и цвета" (менять шрифт, толщину и прочее) и надписи "от..."? А то нашел только как цвет изменить, когда изменил, то другие заголовки, которые до этого были бледно-серыми стали розовыми)). Когда пробовал менять шрифт и его размер изменялись обе надписи одновременно, а это не есть хорошо. Нужно чтобы надпись "посмотреть все размеры и цвета" была маленькой по размеру, а надпись "от..." крупной.

2. Как сменить шрифт, размер названия категории, так чтобы при этом не поменялось на сменяемый шрифт название товара в категории?
В файл main.css добавила на 430-431 строки блок:
  .catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */
  .catinfo .pricefrom {font-size:12px;font-weight: 100;color:#000;} /* от: размер, толщина от 100 до 600, цвет  */
в комментариях прописала что за что отвечает в том же порядке, как прописаны стили. Толщина текста ставится в значениях 100, 200, 300, 400, 500, 600, 700, 800 или 900.

#7 Firefly

Firefly

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

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

Отправлено 11 Июнь 2016 - 20:02

Просмотр сообщенияBloompak (11 Июнь 2016 - 18:32) писал:

Спасибо за помощь! Все получилось. По клику на просмотр всех размеров и цветов я пока вставил ссылку на соответствующую категорию.

Возникли следующие вопросы:

1. Каким образом в css можно можно редактировать параметры надписи "посмотреть все размеры и цвета" (менять шрифт, толщину и прочее) и надписи "от..."? А то нашел только как цвет изменить, когда изменил, то другие заголовки, которые до этого были бледно-серыми стали розовыми)). Когда пробовал менять шрифт и его размер изменялись обе надписи одновременно, а это не есть хорошо. Нужно чтобы надпись "посмотреть все размеры и цвета" была маленькой по размеру, а надпись "от..." крупной.

2. Как сменить шрифт, размер названия категории, так чтобы при этом не поменялось на сменяемый шрифт название товара в категории?

Здравствуйте.

2. Найдите код:
.prod_hold .name a, .prod_hold_recent .name a {font-size:16px;text-transform: uppercase;text-decoration:none;display:block;}
.prod_hold .prod-info-fly .name a, .prod_hold_recent .prod-info-fly .name a{font-size:17px;text-decoration:none;}

В первом коде размер 16px - размер названия категории, во втором коде 17px - размер названия каталога.

#8 Bloompak

Bloompak

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

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

Отправлено 12 Июнь 2016 - 12:26

Просмотр сообщенияsupport 2.0 (11 Июнь 2016 - 20:01) писал:

В файл main.css добавила на 430-431 строки блок:
.catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */
.catinfo .pricefrom {font-size:12px;font-weight: 100;color:#000;} /* от: размер, толщина от 100 до 600, цвет */
в комментариях прописала что за что отвечает в том же порядке, как прописаны стили. Толщина текста ставится в значениях 100, 200, 300, 400, 500, 600, 700, 800 или 900.

Спасибо большое за строки кода.
Итак, первая строка:
1. ".catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */",
с её помощью поменялся размер шрифта font-size:12px на любую величину px. Менял числа в font-weight и color, но толщина не меняется, цвет тоже.
Цвет текста меняется изменением параметра color в строке:
a{ text-decoration:underline; color:#333333; }
a:hover{ text-decoration:underline; color:#ff0551;  },
но тогда меняется цвет не только надписи "Посмотреть все размеры и цвета", но и заголовков категорий, каталога и названия товаров, что не приемлемо.
Как сделать так, чтобы менялся только цвет надписи "Посмотреть все размеры и цвета"?
2. В строке ".catinfo .pricefrom {font-size:12px;font-weight: 100;color:#000;} /* от: размер, толщина от 100 до 600, цвет */"  к сожалению, ничего не работает. Все серое и одного размера.
Как сделать чтобы изменялся цвет, размер и толщина надписи "от.." или "Цена от.." как в моем случае?

#9 Bloompak

Bloompak

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

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

Отправлено 12 Июнь 2016 - 12:36

Просмотр сообщенияFirefly (11 Июнь 2016 - 20:02) писал:

Здравствуйте.

2. Найдите код:
.prod_hold .name a, .prod_hold_recent .name a {font-size:16px;text-transform: uppercase;text-decoration:none;display:block;}
.prod_hold .prod-info-fly .name a, .prod_hold_recent .prod-info-fly .name a{font-size:17px;text-decoration:none;}

В первом коде размер 16px - размер названия категории, во втором коде 17px - размер названия каталога.

Спасибо за код.
Но это немного не то что нужно. Я изменяю параметр px в строке .prod_hold .name a, .prod_hold_recent .name a {font-size:16px;text-transform: uppercase;text-decoration:none;display:block;}   например на 18px, а в строке  .prod_hold .prod-info-fly .name a, .prod_hold_recent .prod-info-fly .name a{font-size:17px;text-decoration:none;} ​изменяю параметр на 13px, далее изменяется размер шрифта в категории (это ОК!) на 18px, затем когда переходишь в категорию, в ней название товара сначала тоже размером 18px, а нужно чтобы было сразу 13 px, а не когда наводишь мышкой на товар и оно становится 13 px. Нужно сразу 13px в каталоге и при наведении, а не 18px сначала и при наведении на карточку товара 13 px.
Как это сделать?

#10 Bloompak

Bloompak

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

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

Отправлено 14 Июнь 2016 - 23:07

Модераторы, пожалуйста, ответьте на мои вопросы!

#11 Vaccina

Vaccina

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

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

Отправлено 15 Июнь 2016 - 05:33

Чтобы всегда было 13px в main.css найдите:
.prod_hold .name a, .prod_hold_recent .name a {
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
}

замените на:
.prod_hold .name a, .prod_hold_recent .name a {
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
}
.category-name {
	font-size: 18px;
}


#12 Bloompak

Bloompak

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

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

Отправлено 22 Июнь 2016 - 13:09

Просмотр сообщенияsupport 2.0 (11 Июнь 2016 - 20:01) писал:

В файл main.css добавила на 430-431 строки блок:
.catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */
.catinfo .pricefrom {font-size:12px;font-weight: 100;color:#000;} /* от: размер, толщина от 100 до 600, цвет */
в комментариях прописала что за что отвечает в том же порядке, как прописаны стили. Толщина текста ставится в значениях 100, 200, 300, 400, 500, 600, 700, 800 или 900.

Ответа, на второй вопрос, похоже, не дождусь!

Итак,немного модернизировав Ваш код, получилось менять цвет в надписи "Цена от.."
Ваш код в css:
".catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */"

В этом коде менялся только размер font-size и все. Толщина и цвет оставались неизменными. Толщина менялась только после написания font-weight: bold .
В итоге цвет можно было менять, после следующей модификации кода в css:
".catinfo .size {font-size:12px;}.catinfo {color:#FF0000;}"

#13 Bloompak

Bloompak

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

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

Отправлено 22 Июнь 2016 - 13:50

Просмотр сообщенияVaccina (15 Июнь 2016 - 05:33) писал:

Чтобы всегда было 13px в main.css найдите:
.prod_hold .name a, .prod_hold_recent .name a {
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
display: block;
}

замените на:
.prod_hold .name a, .prod_hold_recent .name a {
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
display: block;
}
.category-name {
font-size: 18px;
}

Vaccina, спасибо за код.

Есть еще вопрос. Я поменял цвет цены в карточке товара, но изменился также цвет стоимости доставки. Как сделать так, чтобы поменялся только цвет цены? А стоимость доставки (цифры) осталась осталась серой как и надпись "стоимость доставки".
webkit-fake-url://c1252811-aa7f-4099-bd92-7cbbdffe5c8f/application.pdf

#14 Bloompak

Bloompak

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

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

Отправлено 22 Июнь 2016 - 13:59

Просмотр сообщенияVaccina (15 Июнь 2016 - 05:33) писал:

Чтобы всегда было 13px в main.css найдите:
.prod_hold .name a, .prod_hold_recent .name a {
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
display: block;
}

замените на:
.prod_hold .name a, .prod_hold_recent .name a {
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
display: block;
}
.category-name {
font-size: 18px;
}

Забыл прикрепить файл к посту.

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



#15 Firefly

Firefly

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

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

Отправлено 22 Июнь 2016 - 15:25

Просмотр сообщенияBloompak (22 Июнь 2016 - 13:59) писал:

Забыл прикрепить файл к посту.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте код:
.product-info .price-new .num {
	color: #ff0551;
}

Найдите код:
  .num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #999999;white-space: nowrap;}

Замените на:
  .num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #ff0551;white-space: nowrap;}


#16 Bloompak

Bloompak

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

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

Отправлено 16 Июль 2016 - 20:53

Просмотр сообщенияFirefly (22 Июнь 2016 - 15:25) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте код:
.product-info .price-new .num {
color: #ff0551;
}

Найдите код:
.num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #999999;white-space: nowrap;}

Замените на:
.num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #ff0551;white-space: nowrap;}
Здравствуйте!

Спасибо за код. ".product-info .price-new .num {    color: #ff0551;}". - цена, при входе в карточку товара стала розового цвета как и требовалось.

В строке ".num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #ff0551;white-space: nowrap;}" я заменил цвет на #999999  и стоимость доставки стала серого цвета, но также серой стала и цена товара, при выходе из карточки товара.

Как сохранить предыдущие изменения. но при этом окрасить цены товаров на сайте в розовый цвет?

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



#17 Danil

Danil

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

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

Отправлено 18 Июль 2016 - 10:59

Просмотр сообщенияBloompak (16 Июль 2016 - 20:53) писал:

Здравствуйте!

Спасибо за код. ".product-info .price-new .num {    color: #ff0551;}". - цена, при входе в карточку товара стала розового цвета как и требовалось.

В строке ".num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #ff0551;white-space: nowrap;}" я заменил цвет на #999999  и стоимость доставки стала серого цвета, но также серой стала и цена товара, при выходе из карточки товара.

Как сохранить предыдущие изменения. но при этом окрасить цены товаров на сайте в розовый цвет?
Здравствуйте.
В конец main.css добавьте
.right .span12 span span {
color: #999999;
}
данный цвет относится только к доставке.





Темы с аналогичным тегами товары, категории, цена, каталог

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

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