Усовершенствование Для Корзины
#1
Отправлено 09 Апрель 2014 - 19:22
Интересует возможность доработки корзины, как показано на рисунке. Возможно ли на этом движке сделать что то подобное?
#2
Отправлено 10 Апрель 2014 - 09:57
otstoyman (09 Апрель 2014 - 19:22) писал:
Интересует возможность доработки корзины, как показано на рисунке. Возможно ли на этом движке сделать что то подобное?
Здравствуйте, такое можно реализовать.
В шаблоне "HTML"
Находим:
<div class="content"> <div class="empty">Ваша корзина покупок пуста!</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%"> <div class="box-content"> {% IF cart_count_empty %} <p id="cart_block_no_products">Ваша корзина пуста</p> {% ELSE %} {% FOR cart_items %} {% IF cart_items.index > 3 %}{break}{% ENDIF %} <div class="prod_hold_cart"> <div> <div class="image goods-image-icon-square" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></div> <div class="prod_hold_right"> <div class="name"> <a title="Перейти на страницу «{cart_items.GOODS_NAME}»" href="{cart_items.GOODS_URL}" style="*height:;"> {cart_items.GOODS_NAME} <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара --> {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %} </a> </div> <div class="price"> <span class="price-new">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> <div class="countcart"> <span>Количество: <span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span> <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a> </div> </div> </div> </div> {% ENDFOR %} {% ENDIF %} </div> </div> </div> <div class="buttons"> <a class="button" style="margin-left:40px;" title="Перейти к оформлению заказа" href="{CART_URL}">Оформить заказ</a> </div> </div> </div>
Здравствуйте,
В файле "main.css".
Перед
/* END Шапка */
Добавить код:
/* Корзина с картинками */ #header #cart_block { z-index:10;display:none;position:absolute;right:5%;float:right;height:auto;width:250px !important;background:#ffffff;*border: solid 1px #c0c0c0; -moz-border-bottom-right-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;box-shadow:0 1px 0 #C6C6C6; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ; -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1); } #cart_block .price{color:#da3b44;line-height:30px;margin-right:10px;float:none} #cart_block_bottom{background:#ffffff;overflow:hidden;border-top:1px solid #eaeaea;border:1px solid #cecece\0/;padding:10px 20px;} #cart_block #cart_block_shipping_cost{float:none;font-weight:bold;} #cart_block #cart_block_total_checkout{display:block;position:relative;overflow:hidden;padding:0 20px 10px; text-align: center;} #cart_block #cart_block_total{color:#da3b44;font-size:16px;float:right;margin:0;*float: none; *text-align: right;} #cart_block #cart_block_other_costs{clear:both;padding-bottom:5px} #cart_block #cart_block_other_costs span{font-weight:400} #cart_block #cart_block_other_costs span.price{font-weight:600; float:none !important;} .prod_hold_cart {width:200px;display: inline-block;display: -moz-inline-stack;vertical-align: top;padding: 5px;background-color: #ffffff;position: relative;text-align: center;border: 1px solid #f5f5f5;z-index: 100;} /* END Корзина с картинками */
Перед
/* Адаптивность шаблона ==============================*/
Добавить
@media only screen and (min-width: 1500px) and (max-width: 2400px) { #header #cart_block {right:15%;} }
В шаблоне "Быстрый заказ".
Добавить в самый конец:
<!-- Блок для обновления данных корзины. Не виден пользователю --> <div style="display:none;" id="newCartDataBlock"> <div id="cart_block_bottom" style="display:block"> <div id="cart_block_other_costs"> <div class="other_cost_wrapper" style="width: 100%"> <div class="box-content"> {% IF cart_count_empty %} <p id="cart_block_no_products">Ваша корзина пуста</p> {% ELSE %} {% FOR cart_items %} {% IF cart_items.index > 3 %}{break}{% ENDIF %} <div class="prod_hold_cart"> <div> <div class="image goods-image-icon-square" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></div> <div class="prod_hold_right"> <div class="name"> <a title="Перейти на страницу «{cart_items.GOODS_NAME}»" href="{cart_items.GOODS_URL}" style="*height:;"> {cart_items.GOODS_NAME} <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара --> {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %} </a> </div> <div class="price"> <span class="price-new">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> <div class="countcart"> <span>Количество: <span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span> <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a> </div> </div> </div> </div> {% ENDFOR %} {% ENDIF %} </div> </div> </div> <div class="buttons"> <a class="button" style="margin-left:40px;" title="Перейти к оформлению заказа" href="{CART_URL}">Оформить заказ</a> </div> </div> </div> <!-- JS обновление данных корзины --> <script>$('#cart_block:first').html($('#newCartDataBlock').html());</script> <!-- end Блок для обновления данных корзины. Не виден пользователю -->
В файле "main.js".
Добавить в самый конец:
$(document).ready(function(){ $(".heading").hover( function () { $("#cart_block").css("display","block"); }, function () { $("#cart_block").css("display","none"); } ); $("#cart_block").hover( function () { $(this).css("display","block"); }, function () { $(this).css("display","none"); }); });
Пример работы вы можете наблюдать тут
#3
Отправлено 10 Апрель 2014 - 23:31
#5
Отправлено 21 Апрель 2014 - 07:23
Ser (21 Апрель 2014 - 07:01) писал:
Вставил код везде, но где-то косяк подскажите что не так.
1. Строка "Добро пожаловать в ......." собралась в кучку у корзины, как поправить???
2. Не показывается содержание корзины?
Рис приложил.
Для начала попробуйте найти в HTML шаблоне код:
<div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div> </div>
и заменить на:
</div> <div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div>
#6
Отправлено 21 Апрель 2014 - 07:46
MikDark (21 Апрель 2014 - 07:23) писал:
<div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div> </div>
и заменить на:
</div> <div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div>
Спасибо поправилось.
#7
Отправлено 23 Апрель 2014 - 03:05
MikDark (21 Апрель 2014 - 07:23) писал:
<div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div> </div>
и заменить на:
</div> <div id="welcome" style="color:#000000"><a href="http://{NET_DOMAIN}/">Добро пожаловать в магазин "Чай в постель"</a></div> <div class="clear"></div>
Здравствуйте! Сделал себе так же, но у меня получилось не выпадающим окном. Посмотрите пожалуйста.
#8
Отправлено 23 Апрель 2014 - 03:40
#10
Отправлено 03 Июнь 2014 - 06:05
#header #cart_block { z-index: 100 !important; }
#12
Отправлено 14 Март 2015 - 21:17
Возможна ли такая доработка для шаблона "Хамелеон" + чтобы при скролинге корзина становилась плавающей?
#13
Отправлено 02 Апрель 2015 - 02:52
<div class="incart"> <div class="carttotalqty theme-color"> {CART_COUNT_TOTAL} </div> <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}<span class="icon-cart"></span>{%ENDIF%} {% IF cart_count_empty %} <span>0</span> <span class="rub">P<span class="rubT"></span></span> {% ELSE %} {% FOR cart_sum %} {cart_sum.NOW}<span class="rub">P<span class="rubT"></span></span> {% ENDFOR %} {% ENDIF %}</span> </a> </div><!--END heading--> <div class="clear"></div>
после него вставьте:
<div id="cart_block"> <div id="cart_block_bottom"> <div id="cart_block_other_costs"> <div class="other_cost_wrapper" style="width: 100%"> <div class="box-content"> {% IF cart_count_empty %} <p id="cart_block_no_products">Ваша корзина пуста</p> {% ELSE %} {% FOR cart_items %} {% IF cart_items.index > 3 %}{break}{% ENDIF %} <div class="prod_hold_cart"> <div> <div class="image goods-image-icon-square" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></div> <div class="prod_hold_right"> <div class="name"> <a title="Перейти на страницу «{cart_items.GOODS_NAME}»" href="{cart_items.GOODS_URL}" style="*height:;"> {cart_items.GOODS_NAME} <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара --> {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %} </a> </div> <div class="price"> <span class="price-new">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> <div class="countcart"> <span>Количество: <span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span> <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a> </div> </div> </div> </div> {% ENDFOR %} {% ENDIF %} </div> </div> </div> <div class="buttons"> <a class="button" title="Перейти к оформлению заказа" href="{CART_URL}">Оформить заказ</a> </div> </div> </div>
в конец шаблона Быстрый заказ вставьте:
<!-- Блок для обновления данных корзины. Не виден пользователю --> <div style="display:none;" id="newCartDataBlock"> <div id="cart_block_bottom" style="display:block"> <div id="cart_block_other_costs"> <div class="other_cost_wrapper" style="width: 100%"> <div class="box-content"> {% IF cart_count_empty %} <p id="cart_block_no_products">Ваша корзина пуста</p> {% ELSE %} {% FOR cart_items %} {% IF cart_items.index > 3 %}{break}{% ENDIF %} <div class="prod_hold_cart"> <div> <div class="image goods-image-icon-square" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></div> <div class="prod_hold_right"> <div class="name"> <a title="Перейти на страницу «{cart_items.GOODS_NAME}»" href="{cart_items.GOODS_URL}" style="*height:;"> {cart_items.GOODS_NAME} <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара --> {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %} </a> </div> <div class="price"> <span class="price-new">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> <div class="countcart"> <span>Количество: <span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span> <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a> </div> </div> </div> </div> {% ENDFOR %} {% ENDIF %} </div> </div> </div> <div class="buttons"> <a class="button" style="margin-left:40px;" title="Перейти к оформлению заказа" href="{CART_URL}">Оформить заказ</a> </div> </div> </div> <!-- JS обновление данных корзины --> <script>$('#cart_block:first').html($('#newCartDataBlock').html());</script> <!-- end Блок для обновления данных корзины. Не виден пользователю -->
В main.css после:
#cart { margin-top: 20px; }
вставьте:
/* Корзина с картинками */ #header #cart_block { z-index:10;display:none;position:absolute;right:5%;float:right;height:auto;width:250px !important;background:#ffffff;*border: solid 1px #c0c0c0; -moz-border-bottom-right-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;box-shadow:0 1px 0 #C6C6C6; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ; -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1); } #cart_block .price{color:#da3b44;line-height:30px;margin-right:10px;float:none} #cart_block_bottom{overflow:hidden;border-top:1px solid #eaeaea;padding:10px 20px;} #cart_block #cart_block_shipping_cost{float:none;font-weight:bold;} #cart_block #cart_block_total_checkout{display:block;position:relative;overflow:hidden;padding:0 20px 10px; text-align: center;} #cart_block #cart_block_total{color:#da3b44;font-size:16px;float:right;margin:0;*float: none; *text-align: right;} #cart_block #cart_block_other_costs{clear:both;padding-bottom:5px} #cart_block #cart_block_other_costs span{font-weight:400} #cart_block #cart_block_other_costs span.price{font-weight:600; float:none !important;} .prod_hold_cart {width:200px;display: inline-block;display: -moz-inline-stack;vertical-align: top;padding: 5px;background-color: #ffffff;position: relative;text-align: center;border: 1px solid #f5f5f5;z-index: 100;} /* END Корзина с картинками */
в конец файла main.js вставьте:
$(document).ready(function(){ $(".incart").hover( function () { $("#cart_block").css("display","block"); }, function () { $("#cart_block").css("display","none"); } ); $("#cart_block").hover( function () { $(this).css("display","block"); }, function () { $(this).css("display","none"); }); });
#14
Отправлено 10 Апрель 2015 - 11:12
К сожалению данный код заработал не правильно, пришлось откатить изменения. Выпадающая часть корзины была сильно смещена и попадала под другие элементы дизайна. Кроме того необходимо чтобы при прокрутки страницы вниз, корзина фиксировалась в верхней части экрана и постоянно была видна.
#15
Отправлено 10 Апрель 2015 - 11:59
Shellac.ws (10 Апрель 2015 - 11:12) писал:
К сожалению данный код заработал не правильно, пришлось откатить изменения. Выпадающая часть корзины была сильно смещена и попадала под другие элементы дизайна. Кроме того необходимо чтобы при прокрутки страницы вниз, корзина фиксировалась в верхней части экрана и постоянно была видна.
#16
Отправлено 13 Апрель 2015 - 20:26
#17
Отправлено 14 Апрель 2015 - 01:41
{% IF cart_items.index > 3 %}{break}{% ENDIF %}
#18
Отправлено 14 Апрель 2015 - 16:35
#19
Отправлено 21 Июль 2016 - 11:16
Необходимо при оформлении заказа указать блок рядом со списком товаров и зафиксировать его в одном положении так же сделать рамку как у других блоков.
Написать: "Если Вы хотите удалить какой либо товар из списка перейдите в корзину" слов "корзину" - сделать гиппер ссылкой переходящих в корзину с той же страницы.
Сделать как на рис.
#20
Отправлено 21 Июль 2016 - 11:44
Cybernetic (21 Июль 2016 - 11:16) писал:
Необходимо при оформлении заказа указать блок рядом со списком товаров и зафиксировать его в одном положении так же сделать рамку как у других блоков.
Написать: "Если Вы хотите удалить какой либо товар из списка перейдите в корзину" слов "корзину" - сделать гиппер ссылкой переходящих в корзину с той же страницы.
Сделать как на рис.
<div class="ajaxLoaderQuickOrder"> <img src="{ASSETS_IMAGES_PATH}loading.gif" alt="Tellimuse vormi laadimine" /> </div>после вставьте
<div class="info_car_block">Если Вам нужно удалить какой-либо товар перейдите в <a href="{CART_URL}" />корзину</a></div>в конец файла main.css добавьте
.info_car_block { float: right; width: 187px; text-align: center; border: 1px solid; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных