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


Чек Вместо Корзины


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

#1 Brendi

Brendi

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

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

Отправлено 19 Февраль 2014 - 10:11

Можно ли сделать вместо корзины чек, как на этом сайте? Я так поняла, на шапке нарисован чек, а дата, кол-во товаров, сумма и ссылка на оформление просто подогнаны под размер чека. Подскажите, это нужно всю шапку рисовать заново или просто чек можно прикрепить?

#2 Vaccina

Vaccina

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

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

Отправлено 20 Февраль 2014 - 04:44

переделывать шапку придется хотя бы по причине изменения информации выводимой в шапки в блоке корзина, для начала необходимо переделать структуру корзины в HTML найдите и удалите:
<div id="header_shopping_cart">
	  <div id="shopping_cart">
	   <a href="{CART_URL}" title="Перейти в корзину">
				{% IF cart_count_empty %}
				  <span class="ajax_cart_no_product">Корзина пуста</span>
				{% ELSE %}
				  <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
				{% ENDIF %}	  
		<span class="down_arrow_dark"></span>
	   </a>
	  </div>
	 </div>
и
<div id="cart_block">
	  <div id="cart_block_bottom">
	   <div id="cart_block_other_costs">
		<div class="other_cost_wrapper"  style="width: 100%">
				  {% IF cart_count_empty %}
					<p id="cart_block_no_products">Ваша корзина пуста</p>
				  {% ELSE %}
		   <span>Товаров </span>
		   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
					<span>на сумму </span>
		  {% ENDIF %}
		   <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
		</div>
	   </div>
	   <div id="cart_block_total_checkout">
		<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
	   </div>
	  </div>
	 </div>
		  <div class="clear"></div>	   
		</div>
после:
<!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
	 </div>
		  <!-- Корзина -->
вставьте:
<div id="cart">
<div class="other_cost_wrapper"  style="width: 100%">
	 <span>Товаров </span>
  {% IF cart_count_empty %}
   <p id="cart_block_no_products">0 шт.</p>
  {% ELSE %}
   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
  {% ENDIF %}
  <br />
  <span>на сумму </span>
  <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}0 руб.{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
</div>
<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
</div>
далее остается простилизовать блок, но необходимо просмотреть результат

#3 Brendi

Brendi

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

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

Отправлено 20 Февраль 2014 - 09:00

http://m1505.storeland.ru/ все меню сместилось и от основного фона осталась одна полоска.

#4 Vaccina

Vaccina

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

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

Отправлено 21 Февраль 2014 - 04:56

восстановите бэк ап, значит или лишний закрывающий </div> поставили или наоборот съели лишний.

Вместо:
<div id="cart_block">
		  <div id="cart_block_bottom">
		   <div id="cart_block_other_costs">
				<div class="other_cost_wrapper"  style="width: 100%">
								  {% IF cart_count_empty %}
										<p id="cart_block_no_products">Ваша корзина пуста</p>
								  {% ELSE %}
				   <span>Товаров </span>
				   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
										<span>на сумму </span>
				  {% ENDIF %}
				   <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
				</div>
		   </div>
		   <div id="cart_block_total_checkout">
				<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
		   </div>
		  </div>
		 </div>
				  <div class="clear"></div>	   
				</div>
удалите:
<div id="cart_block">
		  <div id="cart_block_bottom">
		   <div id="cart_block_other_costs">
				<div class="other_cost_wrapper"  style="width: 100%">
								  {% IF cart_count_empty %}
										<p id="cart_block_no_products">Ваша корзина пуста</p>
								  {% ELSE %}
				   <span>Товаров </span>
				   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
										<span>на сумму </span>
				  {% ENDIF %}
				   <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
				</div>
		   </div>
		   <div id="cart_block_total_checkout">
				<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
		   </div>
		  </div>
		 </div>

как поняла, тут я решила съесть лишний закрывающий тег =)

#5 Brendi

Brendi

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

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

Отправлено 21 Февраль 2014 - 11:53

Сделано, как быть дальше? Рисовать на шапку чек?

#6 Vaccina

Vaccina

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

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

Отправлено 22 Февраль 2014 - 04:53

Теперь сама стилизация, в style.css в самом низу вставляем:

#cart{
background:url('ссылка на фон чека') no-repeat left top;
width:200px;
heght:200px;
}

Скорее всего придется увеличить по высоте шапку, увеличив height:
#header-right {
float: right;
height: 100px;
margin-right: 10px;
position: relative;
z-index: 20;
}
и опустить меню:
#footer-top-content {
left: 350px;
position: absolute;
top: 60px;
width: 80%;
}
увеличив top

#7 Brendi

Brendi

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

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

Отправлено 22 Февраль 2014 - 13:16

1. Сделала, наверное поиск мешает, чек отображается не полностью. Как опустить поиск, и укоротить его, чтоб он был ровно под корзиной? И переместить чек и поиск правее, над хитами продаж. На фото нарисовала примерно как.
2. Удалить надписи "товаров" и "на сумму", а количество товаров и сумму подогнать в чек. Кнопку "Оформить заказ" переделать просто как надпись черным и переместить на чек под "сумму".
3. Сделать мини-баннер в свободном месте.

Безымянный.png

#8 Castiel

Castiel

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

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

Отправлено 22 Февраль 2014 - 15:41

Просмотр сообщенияBrend7111 (22 Февраль 2014 - 13:16) писал:

1. Сделала, наверное поиск мешает, чек отображается не полностью. Как опустить поиск, и укоротить его, чтоб он был ровно под корзиной? И переместить чек и поиск правее, над хитами продаж. На фото нарисовала примерно как.
2. Удалить надписи "товаров" и "на сумму", а количество товаров и сумму подогнать в чек. Кнопку "Оформить заказ" переделать просто как надпись черным и переместить на чек под "сумму".
3. Сделать мини-баннер в свободном месте.

Прикрепленный файл Безымянный.png

Редактируем style.css
Находим
#cart{
background:url('чек.png') no-repeat left top;
width:200px;
heght:200px;
}

Заменяем на
#cart{
background:url('чек.png') no-repeat left top;
width:200px;
height:184px;
}

Добавляем ниже данный код
#cart_block_no_products {
position: absolute;
left: 118px;
top: 60px;
}
#cart_block_total {
position: absolute;
top: 90px;
left: 105px;
}

Редактируем шаблон HTML
Находим
		  <!-- Корзина -->
			   <div id="cart">
<div class="other_cost_wrapper"  style="width: 100%">
		 <span>Товаров </span>
  {% IF cart_count_empty %}
   <p id="cart_block_no_products">0 шт.</p>
  {% ELSE %}
   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
  {% ENDIF %}
  <br />
  <span>на сумму </span>
  <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}0 руб.{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
</div>
<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
</div>
		  <!-- Форма поиска -->

Заменяем на
		  <!-- Корзина -->
			   <div id="cart">
<div class="other_cost_wrapper"  style="width: 100%">
  {% IF cart_count_empty %}
   <p id="cart_block_no_products">0 шт.</p>
  {% ELSE %}
   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
  {% ENDIF %}
  <br />
  <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}0 руб.{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
</div>
<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
</div>
		  <!-- Форма поиска -->


#9 Brendi

Brendi

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

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

Отправлено 24 Февраль 2014 - 10:36

Все криво.

#10 Castiel

Castiel

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

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

Отправлено 24 Февраль 2014 - 10:57

Просмотр сообщенияBrend7111 (24 Февраль 2014 - 10:36) писал:

Все криво.

Находим
input.exclusive, button.exclusive, #paymentForm input, a.exclusive {
display: inline-block;
background: #da3b44 !important;
color: #fafafa!important;
border: 1px solid #a40f18;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
padding: 6px 12px;
font: inherit !important;
text-decoration: none;
cursor: pointer;
}

Заменяем на
input.exclusive, button.exclusive, #paymentForm input, a.exclusive {
margin-top: 87px;
margin-left: 45px;
display: inline-block;
background: #da3b44 !important;
color: #fafafa!important;
border: 1px solid #a40f18;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
padding: 6px 12px;
font: inherit !important;
text-decoration: none;
cursor: pointer;
}

Почистите кеш браузера

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

  • pic52.jpg


#11 Brendi

Brendi

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

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

Отправлено 24 Февраль 2014 - 19:04

Гугл хром версия 33.0.1750.117 m. Количество товаров не на месте.

Безымянный.png

И как сделать, чтобы надпись "оформить заказ" была не кнопкой, а просто надписью красного цвета? Без красного фона.

#12 Castiel

Castiel

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

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

Отправлено 24 Февраль 2014 - 19:59

Просмотр сообщенияBrend7111 (24 Февраль 2014 - 19:04) писал:

Гугл хром версия 33.0.1750.117 m. Количество товаров не на месте.

Прикрепленный файл Безымянный.png

И как сделать, чтобы надпись "оформить заказ" была не кнопкой, а просто надписью красного цвета? Без красного фона.

Добавьте в style.css
#cart_block_shipping_cost {
position: absolute;
top: 72px;
left: 115px;
}

Редактируем кнопку оформить заказ
Находим
input.exclusive, button.exclusive, #paymentForm input, a.exclusive {
margin-top: 87px;
margin-left: 45px;
display: inline-block;
background: #da3b44 !important;
color: #fafafa!important;
border: 1px solid #a40f18;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
padding: 6px 12px;
font: inherit !important;
text-decoration: none;
cursor: pointer;
}

Заменяем на
input.exclusive, button.exclusive, #paymentForm input, a.exclusive {
margin-top: 87px;
margin-left: 45px;
display: inline-block;
color: #FF000E!important;
padding: 6px 12px;
font: inherit !important;
text-decoration: none;
cursor: pointer;
}


#13 Brendi

Brendi

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

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

Отправлено 25 Февраль 2014 - 10:47

Огромное спасибо, все получилось, как я хотела! Осталось еще несколько вопросов:

1. Как увеличить шрифт надписи "Оформить заказ"
2. Как вполовину укоротить поле поиска, чтобы оно было как на картинке выше в 7 сообщении, и перенести чек-корзину правее, над поиском.
3. Вставить баннер из 3-5 картинок в пустое место.

#14 Castiel

Castiel

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

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

Отправлено 25 Февраль 2014 - 11:20

Просмотр сообщенияBrend7111 (25 Февраль 2014 - 10:47) писал:

Огромное спасибо, все получилось, как я хотела! Осталось еще несколько вопросов:

1. Как увеличить шрифт надписи "Оформить заказ"
2. Как вполовину укоротить поле поиска, чтобы оно было как на картинке выше в 7 сообщении, и перенести чек-корзину правее, над поиском.
3. Вставить баннер из 3-5 картинок в пустое место.

1. Редактируем style.css
Находим
input.exclusive:hover, #paymentForm input:hover, a.exclusive:hover {
background-color: #e6434c;
text-decoration: none;
color: #fafafa!important;
}
Заменяем на
input.exclusive:hover, #paymentForm input:hover, a.exclusive:hover {
text-decoration: none;
}

Добавляем данный код в style.css
#button_order_cart span {
font-size: 16px;
}

2. Редактируем style.css
Находим
#search_block_top #search_query_top {
width: 350px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}

Заменяем на
#search_block_top #search_query_top {
width: 191px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}

3. Редактируем шаблон HTML
Добавляем данный код перед <div id="header-right">
<div id="header-banner">
<a href=""><img src="#"></a>
<a href=""><img src="#"></a>
<a href=""><img src="#"></a>
<a href=""><img src="#"></a>
</div>

Добавляем стили
#header-banner {
width: 500px;
height: 120px;
position: absolute;
left: 440px;
top: 50px;
}


#15 Brendi

Brendi

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

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

Отправлено 25 Февраль 2014 - 12:15

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

#16 Castiel

Castiel

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

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

Отправлено 25 Февраль 2014 - 12:45

Просмотр сообщенияBrend7111 (25 Февраль 2014 - 12:15) писал:

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

Это называется слайдшоу, выполните данную инструкцию, мы поможем ее адаптировать для шапки.
Код слайдера должен находиться в этом блоке, так же не забудьте подключить стили. Примерный размер фото для слайдера 500х120 px
<div id="header-banner">
Код слайдера
</div>


#17 Brendi

Brendi

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

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

Отправлено 25 Февраль 2014 - 13:02

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

Что-то они у меня не отображаются вообще.

Сообщение отредактировал Brend7111: 25 Февраль 2014 - 13:35


#18 Alexey11

Alexey11

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

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

Отправлено 25 Февраль 2014 - 17:57

Просмотр сообщенияBrend7111 (25 Февраль 2014 - 13:02) писал:

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

у вас неправильно указаны ссылки на изображения. Они должны иметь вид <img src="{ASSETS_IMAGES_PATH}название картинки.формат" />

#19 Brendi

Brendi

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

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

Отправлено 25 Февраль 2014 - 22:06

А как их уменьшить горизонтально чтоб в ряд помещались и между ними было хоть какое-нибудь расстояние?

#20 Alexey11

Alexey11

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

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

Отправлено 25 Февраль 2014 - 22:14

Просмотр сообщенияBrend7111 (25 Февраль 2014 - 22:06) писал:

А как их уменьшить горизонтально чтоб в ряд помещались и между ними было хоть какое-нибудь расстояние?
добавьте данный блок кода в шаблон main.css

#header-banner > a:nth-child(1) > img {
width: 24%;
}
#header-banner > a:nth-child(2) > img {
width: 24%;
}
#header-banner > a:nth-child(3) > img {
width: 24%;
}
#header-banner > a:nth-child(4) > img {
width: 24%;
}





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

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