Чек Вместо Корзины
#1
Отправлено 19 Февраль 2014 - 10:11
#2
Отправлено 20 Февраль 2014 - 04:44
<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
Отправлено 20 Февраль 2014 - 09:00
#4
Отправлено 21 Февраль 2014 - 04:56
Вместо:
<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
Отправлено 21 Февраль 2014 - 11:53
#6
Отправлено 22 Февраль 2014 - 04:53
#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
Отправлено 22 Февраль 2014 - 13:16
2. Удалить надписи "товаров" и "на сумму", а количество товаров и сумму подогнать в чек. Кнопку "Оформить заказ" переделать просто как надпись черным и переместить на чек под "сумму".
3. Сделать мини-баннер в свободном месте.
#8
Отправлено 22 Февраль 2014 - 15:41
Brend7111 (22 Февраль 2014 - 13:16) писал:
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
Отправлено 24 Февраль 2014 - 10:36
#10
Отправлено 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; }
Почистите кеш браузера
#12
Отправлено 24 Февраль 2014 - 19:59
Brend7111 (24 Февраль 2014 - 19:04) писал:
Безымянный.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
Отправлено 25 Февраль 2014 - 10:47
1. Как увеличить шрифт надписи "Оформить заказ"
2. Как вполовину укоротить поле поиска, чтобы оно было как на картинке выше в 7 сообщении, и перенести чек-корзину правее, над поиском.
3. Вставить баннер из 3-5 картинок в пустое место.
#14
Отправлено 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
Отправлено 25 Февраль 2014 - 12:15
#16
Отправлено 25 Февраль 2014 - 12:45
Brend7111 (25 Февраль 2014 - 12:15) писал:
Это называется слайдшоу, выполните данную инструкцию, мы поможем ее адаптировать для шапки.
Код слайдера должен находиться в этом блоке, так же не забудьте подключить стили. Примерный размер фото для слайдера 500х120 px
<div id="header-banner"> Код слайдера </div>
#17
Отправлено 25 Февраль 2014 - 13:02
Позже напишу, что получится.
Что-то они у меня не отображаются вообще.
Сообщение отредактировал Brend7111: 25 Февраль 2014 - 13:35
#18
Отправлено 25 Февраль 2014 - 17:57
Brend7111 (25 Февраль 2014 - 13:02) писал:
у вас неправильно указаны ссылки на изображения. Они должны иметь вид <img src="{ASSETS_IMAGES_PATH}название картинки.формат" />
#19
Отправлено 25 Февраль 2014 - 22:06
#20
Отправлено 25 Февраль 2014 - 22:14
Brend7111 (25 Февраль 2014 - 22:06) писал:
#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 анонимных