Сообщений в теме: 6

[BeLoveAll]

Доброго времени суток, Уважаемые Форумчане!
Подскажите, пожалуйста, как изменить вид следующих кнопок:

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


2. Необходимо убрать кнопку "Избранное". Кнопку "подробнее" сдвинуть на середину иконки товара и так же сделать крупнее, как кнопку с ценой и п.1.


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

[Vaccina]

1. В main.css найдите:

.item .price-new > span, .prod_hold .price-new > span {
	position: relative;
	color: white;
}

замените на:

.item .price-new > span, .prod_hold .price-new > span {
	position: relative;
	color: white;
	width: 90%;
	display: block;
	margin: 0 auto;
	font-size: 20px;
}

2. В main.css найдите:

.add_to_wishlist_small, .add_to_compare_small {
	display: block;
}

после него пропишите:

.prod_hold .add_to_wishlist_small {
	display: none !important;
}

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

a.details .small_text {
	padding: 0 32px;
}

замените на:

a.details .small_text {
	padding: 0 32px;
	width: 85%;
	display: block;
	margin: 0 auto;
	font-size: 20px;
}

3. Уточните пожалуйста, зачеркнутая цена должна быть рядом или строкой ниже?

[BeLoveAll]

Vaccina (16 Апрель 2016 - 03:46) писал:

3. Уточните пожалуйста, зачеркнутая цена должна быть рядом или строкой ниже?

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

[RedHead]

BeLoveAll (16 Апрель 2016 - 20:00) писал:

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

Здравствуйте. В шаблоне ТОВАРЫ замените строки:

<div class="price">
<div class="price-new">
{goods.MIN_PRICE_NOW | money_format}
<!-- /Старая цена -->
</div>
</div><!--END price-->

на:

<div class="price">
<div class="price-new">
{goods.MIN_PRICE_NOW | money_format}
<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
<span class="price-old-catalog goodsDataMainModificationPriceOld-catalog" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}
</span>
<!-- Если старая цена была больше новой -->
{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
<span class="price-old-catalog goodsDataMainModificationPriceOld-catalog" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {goods.MIN_PRICE_OLD} руб.">
{goods.MIN_PRICE_OLD | money_format}
</span>
{% ENDIF %}
<!-- /Старая цена -->
</div>
</div><!--END price-->

Затем, в конец шаблона main.css вставьте строки:

span.price-old-catalog{text-decoration:line-through;}
.goodsDataMainModificationPriceOld-catalog {
color: #c3c3c3;
display: inline-block;
font-weight: normal;
}

затем, найдите строку:

.goodsDataMainModificationPriceNow {color: #e07d91;padding: 5px 10px;border: 1px solid #eee;margin-top: 10px;display: inline-block;font-size: 25px;font-weight: normal;}

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

.goodsDataMainModificationPriceNow {color: #e07d91;padding: 5px 10px;border: 1px solid #eee;margin-top: 10px;display: inline-block;font-size: 28px;font-weight: bold;}

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

[BeLoveAll]

RedHead (16 Апрель 2016 - 20:53) писал:

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

Именно то, что нужно))

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

[BeLoveAll]

Vaccina (16 Апрель 2016 - 03:46) писал:

2. В main.css найдите:

.add_to_wishlist_small, .add_to_compare_small {
display: block;
}

после него пропишите:

.prod_hold .add_to_wishlist_small {
display: none !important;
}

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

a.details .small_text {
padding: 0 32px;
}

замените на:

a.details .small_text {
padding: 0 32px;
width: 85%;
display: block;
margin: 0 auto;
font-size: 20px;
}

Спасибо, всё получилось, только кнопка "Подробнее" так и осталась сверху иконки. Можно ее на середину сдвинуть?

[RayLi]

BeLoveAll (17 Апрель 2016 - 02:40) писал:

Спасибо, всё получилось, только кнопка "Подробнее" так и осталась сверху иконки. Можно ее на середину сдвинуть?

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

a.details {
	margin-top: 70px;
	display: block;
}

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

a.details {
	margin-top: 120px;
	display: block;
}