Как Сделать Вот Такую Всплывающую Корзину?
#1
Отправлено 17 Май 2013 - 21:22
#3
Отправлено 18 Май 2013 - 03:10
<script> $(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#float-cart, #back-top').fadeIn(); else { $('#float-cart, #back-top').fadeOut(); } }); $("#back-top").hide(); $('#back-top a').click(function () { $('body,html').animate({scrollTop: 0}, 800); return(false); }); }); </script> <style> #back-top { margin-left: 890px; position: fixed; top: 10px; } #back-top a { color: #3CAA3C; display: block; font: 10pt arial,helvetics,sens-serif; position: relative; text-align: center; transition: all 1s ease 0s; width: 108px; } #back-top a:hover { color: #000000; } #float-cart { background-color: #3CAA3C; border-bottom: 1px solid #009900; border-radius: 0 0 15px 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); color: #FFFFFF; display: none; font: 10pt arial,helvetics,sens-serif; margin-left: 132px; opacity: 0.8; padding: 10px 0; position: fixed; top: 0; width: 1000px; z-index: 10000; } #float-cart li { color: #FFFFFF; float: left; list-style: none outside none; padding: 0 20px; } #float-cart a { color: #C0EEFA; font: 10pt arial,helvetics,sens-serif; } #float-cart a:hover { color: #FFFFFF; font: 10pt arial,helvetics,sens-serif; } </style> <!-- Всплывающая панель --> <div id="float-cart" class="cartInfo"> <ul onclick="document.location='{CART_URL}';"> {% IF cart_count_empty %} <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> {% ELSE %} {% FOR cart_sum %} <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format} {% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> {% ENDFOR %} {% ENDIF %} </ul> <ul> <li id="back-top"><a href="#top">Вверх <span>▲</span></a></li> <ul> </div> <!-- Всплывающая панель Конец -->
#4
Отправлено 18 Май 2013 - 07:44
#5
Отправлено 21 Май 2013 - 03:26
#6
Отправлено 16 Сентябрь 2013 - 12:46
#7
Отправлено 17 Сентябрь 2013 - 01:18
#10
Отправлено 17 Сентябрь 2013 - 12:38
miyako (17 Сентябрь 2013 - 12:01) писал:
Вот этот сразу после <body>
<script> $(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#float-cart, #back-top').fadeIn(); else { $('#float-cart, #back-top').fadeOut(); } }); $("#back-top").hide(); $('#back-top a').click(function () { $('body,html').animate({scrollTop: 0}, 800); return(false); }); }); </script> <style> #back-top { margin-left: 890px; position: fixed; top: 10px; } #back-top a { color: #3CAA3C; display: block; font: 10pt arial,helvetics,sens-serif; position: relative; text-align: center; transition: all 1s ease 0s; width: 108px; } #back-top a:hover { color: #000000; } #float-cart { background-color: #3CAA3C; border-bottom: 1px solid #009900; border-radius: 0 0 15px 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); color: #FFFFFF; display: none; font: 10pt arial,helvetics,sens-serif; margin-left: 132px; opacity: 0.8; padding: 10px 0; position: fixed; top: 0; width: 1000px; z-index: 10000; } #float-cart li { color: #FFFFFF; float: left; list-style: none outside none; padding: 0 20px; } #float-cart a { color: #C0EEFA; font: 10pt arial,helvetics,sens-serif; } #float-cart a:hover { color: #FFFFFF; font: 10pt arial,helvetics,sens-serif; } </style> <!-- Всплывающая панель --> <div id="float-cart" class="cartInfo"> <ul onclick="document.location='{CART_URL}';"> {% IF cart_count_empty %} <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> {% ELSE %} {% FOR cart_sum %} <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format} {% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> {% ENDFOR %} {% ENDIF %} </ul> <ul> <li id="back-top"><a href="#top">Вверх <span>▲</span></a></li> <ul> </div> <!-- Всплывающая панель Конец -->
#11
Отправлено 17 Сентябрь 2013 - 12:59
551 (17 Сентябрь 2013 - 12:38) писал:
<script> $(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#float-cart, #back-top').fadeIn(); else { $('#float-cart, #back-top').fadeOut(); } }); $("#back-top").hide(); $('#back-top a').click(function () { $('body,html').animate({scrollTop: 0}, 800); return(false); }); }); </script> <style> #back-top { margin-left: 890px; position: fixed; top: 10px; } #back-top a { color: #3CAA3C; display: block; font: 10pt arial,helvetics,sens-serif; position: relative; text-align: center; transition: all 1s ease 0s; width: 108px; } #back-top a:hover { color: #000000; } #float-cart { background-color: #3CAA3C; border-bottom: 1px solid #009900; border-radius: 0 0 15px 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); color: #FFFFFF; display: none; font: 10pt arial,helvetics,sens-serif; margin-left: 132px; opacity: 0.8; padding: 10px 0; position: fixed; top: 0; width: 1000px; z-index: 10000; } #float-cart li { color: #FFFFFF; float: left; list-style: none outside none; padding: 0 20px; } #float-cart a { color: #C0EEFA; font: 10pt arial,helvetics,sens-serif; } #float-cart a:hover { color: #FFFFFF; font: 10pt arial,helvetics,sens-serif; } </style> <!-- Всплывающая панель --> <div id="float-cart" class="cartInfo"> <ul onclick="document.location='{CART_URL}';"> {% IF cart_count_empty %} <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> {% ELSE %} {% FOR cart_sum %} <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format} {% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> {% ENDFOR %} {% ENDIF %} </ul> <ul> <li id="back-top"><a href="#top">Вверх <span>▲</span></a></li> <ul> </div> <!-- Всплывающая панель Конец -->
Сейчас у Вас дублируется код. Посмотрите на строке 95 и на строке 177 шаблона HTML
Инструкция по установке кнопки наверх можно найти здесь - http://forum.storela...ерх/#entry27024
#12
Отправлено 17 Сентябрь 2013 - 15:24
miyako (17 Сентябрь 2013 - 12:59) писал:
Инструкция по установке кнопки наверх можно найти здесь - http://forum.storela...ерх/#entry27024
Ага, второй код удалил, но панель все-равно не появилась. Мне не нужна кнопка "наверх", она у меня есть. Мне нужна панель, которая будет появляться при пролистывании сайта, как здесь закваски-нн.рф
#13
Отправлено 17 Сентябрь 2013 - 19:47
вам нужно найти в файле HTML код
</head>
ПЕРЕД ним вставить код
<!-- Всплывающая панель --> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}cartpanel.css" type="text/css"> <script> $(document).ready(function(){ window.onscroll = function(){ if(window.pageYOffset>100){ $('#float-cart').fadeIn(); } else{ $('#float-cart').fadeOut(); } } }); function calculateDeliveryCost(itemsCost) { $("#deliveryRate, #float-cart .delivery-rate").html(html); } </script> <!--scrollup--> <script type="text/javascript"> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> <!--end scrollup--> <!-- End Всплывающая панель -->
далее найти в коде там же Найти
</body>
и ПЕРЕД вставить
<!-- Корзина-Всплывающая панель --> <div id="float-cart" class="cartInfo"> <ul onclick="document.location='{CART_URL}';"> {% IF cart_count_empty %} <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> {% ELSE %} {% FOR cart_sum %} <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format} {% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> {% ENDFOR %} {% ENDIF %} </ul> <ul> <li id="back-top"><a href="#top">Вверх <span>▲</span></a></li> <ul> </div> <!-- Корзина-Всплывающая панель-Конец -->
загрузить прикрепленный файл через Редактор шаблонов - добавить файл .
Прикрепленные файлы
#14
Отправлено 19 Сентябрь 2013 - 10:18
Taisia (17 Сентябрь 2013 - 19:47) писал:
вам нужно найти в файле HTML код
</head>
ПЕРЕД ним вставить код
<!-- Всплывающая панель --> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}cartpanel.css" type="text/css"> <script> $(document).ready(function(){ window.onscroll = function(){ if(window.pageYOffset>100){ $('#float-cart').fadeIn(); } else{ $('#float-cart').fadeOut(); } } }); function calculateDeliveryCost(itemsCost) { $("#deliveryRate, #float-cart .delivery-rate").html(html); } </script> <!--scrollup--> <script type="text/javascript"> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> <!--end scrollup--> <!-- End Всплывающая панель -->
далее найти в коде там же Найти
</body>
и ПЕРЕД вставить
<!-- Корзина-Всплывающая панель --> <div id="float-cart" class="cartInfo"> <ul onclick="document.location='{CART_URL}';"> {% IF cart_count_empty %} <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> {% ELSE %} {% FOR cart_sum %} <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format} {% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> {% ENDFOR %} {% ENDIF %} </ul> <ul> <li id="back-top"><a href="#top">Вверх <span>▲</span></a></li> <ul> </div> <!-- Корзина-Всплывающая панель-Конец -->
загрузить прикрепленный файл через Редактор шаблонов - добавить файл .
Спасибо, панель появилась, но после падения стореленда никакие изменения я в нее внести не могу. Меняю чтото в css файле, на сайте ничего не происходит. Когда можно будет нормально доделать?
#15
Отправлено 19 Сентябрь 2013 - 15:40
возможно вы не очищали кэш браузера после внесения изменений.
уточните какие именно изменения не применяются ?
#16
Отправлено 17 Октябрь 2013 - 15:43
Сake (17 Сентябрь 2013 - 01:18) писал:
А для Сияния этот код подходит? Пробовала, ничего не получилось. А так удобно, если во всплывающем меню была бы не только корзина, а и ссылки на нужные стр. Контакты, Доставка, Акции. Или объявление важное прописать. Кнопка На верх у меня уже есть, может из за нее не получилось?
#17
Отправлено 17 Октябрь 2013 - 15:50
#18
Отправлено 18 Октябрь 2013 - 01:12
velena168 (17 Октябрь 2013 - 15:43) писал:
Пожалуйста, вставьте данный код и не убирайте изменений, если код будет не работать или не будет отображаться. Если появиться проблема отображения (которую нужно скрыть от покупателей) - в файл стилей добавьте
#float-cart { display: none; }
mark03 (17 Октябрь 2013 - 15:50) писал:
У вас как я понимаю изначальная тема "Сияние". Вам применим ответ для пользователя velena168. Выполните изменения и не убирайте их если корзина будет отображаться не так как ожидалось.
#19
Отправлено 18 Октябрь 2013 - 01:38
Сake (18 Октябрь 2013 - 01:12) писал:
#float-cart { display: none; }
У вас как я понимаю изначальная тема "Сияние". Вам применим ответ для пользователя velena168. Выполните изменения и не убирайте их если корзина будет отображаться не так как ожидалось.
#20
Отправлено 18 Октябрь 2013 - 01:50
Ссылки на нужные стр. Контакты, Доставка, Акции кое-как добавила. Прозрачность убрать? Шрифт В корзине крупнее? И вправо переместить надпись Корзина? Если товар положить в корзину и продолжить покупки, сумма заказа появляется только после обновления страницы, а не сразу как в шапке, тогда вообще смысла в панели почти нет.
Помогите, пожалуйста довести до ума.
P. S. Кое-что поменяла, кнопка наверх встала на прежнее место, но теперь зачем-то мигает...
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных