Отображение На Корзине Количества Товаров
#1
Отправлено 25 Октябрь 2013 - 13:16
А если сделать как в том же шаблоне выпадающее окно да с содержимым корзины, было ваще супер
#2
Отправлено 26 Октябрь 2013 - 03:01
Цитата
Что-то подобное реализовалось в следующих темах форума. Пожалуйста, почитайте их внимательно.
http://forum.storela...ина/#entry93940
http://forum.storela...__20#entry75349
#3
Отправлено 27 Октябрь 2013 - 14:22
Vaccina (26 Октябрь 2013 - 03:01) писал:
http://forum.storela...ина/#entry93940
http://forum.storela...__20#entry75349
Началась проблема с того, что нет у меня:
В шаблоне "HTML" после строки
<div class="cartInfo">
как указано в сообщении:
http://forum.storela...__60#entry83525
Ну и со всеми вытекающими. Пробовал по разному никаких изменений.
Все вернул в исходное состояние.
магазин: http://momo-cosmetic.ru
#4
Отправлено 28 Октябрь 2013 - 07:18
tva1982 (27 Октябрь 2013 - 14:22) писал:
В шаблоне "HTML" после строки
<div class="cartInfo">
как указано в сообщении:
http://forum.storela...__60#entry83525
Ну и со всеми вытекающими. Пробовал по разному никаких изменений.
Все вернул в исходное состояние.
магазин: http://momo-cosmetic.ru
Найдите код в шаблоне HTML -
<div class="rghtrever"> <a href="{CART_URL}"> {% IF cart_count_empty %} <span>0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %}{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}{% ENDFOR %} {% ENDIF %}</a> </div> </div>и замените на -
<div class="rghtrever" id="cartInfo"> <div class="cart-preloaded"> <div class="cart-info"> <div class="cart-count"></div> <div class="cart-item"></div> <div class="cart-total"></div> </div> </div> <a href="{CART_URL}"> {% IF cart_count_empty %} <span>0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %}{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}{% ENDFOR %} {% ENDIF %}</a> </div> </div>
в main.css вставьте -
.cart-preloaded { position: relative; } .cart-info { background: #FFFFFF; box-shadow: 0 0 2px #BABABA; height: 200px; position: absolute; right: 80px; top: 55px; width: 360px; z-index: 99999; display: none; } .cart-info.selected { display: block; } .cart-info:after { content: ' '; top: -20px; right: 48px; position: absolute; border-color: transparent transparent rgba(132, 131, 131, 0.3) transparent; border-style: solid; border-width: 10px; height:0; width:0; z-index: 2; } .cart-info:before { content: ' '; top: -18px; right: 49px; position: absolute; border-color: transparent transparent #fff transparent; border-style: solid; border-width: 9px; height:0; width:0; z-index: 3; } .cart-info .cart-count { width: 96%; height: 28px; margin: 0 auto; border-bottom: 1px solid #E6E6E6; color: #828282; font-size: 12px; line-height: 28px; text-align: right; } .cart-info .cart-item { border-bottom: 1px solid #E6E6E6; max-height: 130px; margin: 5px auto; overflow-x: hidden; overflow-y: auto; width: 96%; } .cart-info .cart-total { height: 25px; width: 96%; margin: 5px auto; font-size: 12px; line-height: 25px; text-align: right; } .cart-info .cart-count .count { padding: 3px 6px; color: #fff; background: #333; } .cart-info .cart-item * { padding: 0px; font-size: 10px !important; vertical-align: top; } .cart-info .cart-item tr { border-bottom: 1px solid #E6E6E6; } .cart-info .cart-item tr:last-of-type { border-bottom: none; } .cart-info .cart-item .cart-name { width: 260px; padding: 0 10px; } .cart-info .cart-total span { font-size: 12px !important; display: inline-block; text-align: left !important; } .cart-info .cart-total button { display: inline-block; float: left; margin-top: -3px; } .cart-price .prd-count { display: block; }
в шаблон "Ajax Добавление товара в корзину" добавьте
<script> updateCartInfo(); if(!$('.cart-preloaded').hasClass('fixed')) { setTimeout(function() { $('.cart-preloaded').addClass('fixed'); $('#cartInfo').find('.cart-info').addClass('selected'); }, 1000); setTimeout(function() { $('.cart-preloaded').removeClass('fixed'); $('#cartInfo').find('.cart-info').removeClass('selected'); }, 5000); } </script>
в файл main.js добавьте
$(function() { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > $('.cartInfo').offset().top) $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0); } else { $('.cart-info').animate({'marginTop': 0}, 500); } }); }); $(function() { $('#cartInfo').hover(function() { if($.trim($(this).find('.cart-item').text()).length) { $(this).find('.cart-info').addClass('selected'); return(false); } updateCartInfo(); }, function() { $(this).find('.cart-info').removeClass('selected'); }); }); function updateCartInfo() { $.get('/cart?only_body=1', function(html) { if($(html).find('#shopping-cart-table tr').size()) { $('.cart-count').html('Корзина ' + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> ' + $(html).find('.price .num').closest('.price').html()); var item = $('<table class="cart-table cartForm">'); $(html).find('#shopping-cart-table tr').each(function() { if($(this).find('.product-name').length) { var image = $('<td>').addClass('cart-image').append($(this).find('.goods-image-icon-square')); var name = $('<td>').addClass('cart-name').append($(this).find('.product-name')); var price = $('<td>').addClass('cart-price') .append($(this).find('td:eq(5) .cart-price')) .append($('<span class="prd-count">').append($(this).find('td:eq(4) .input-text').val() + ' шт.')); item.append(($('<tr>').append(image).append(name).append(price))); } }) $('.cart-item').html(item); $('.cart-total').html($(html).find('#shopping-cart-table tfoot tr:eq(1) td').html()); $('.cart-total').find('button').click(function() { document.location = '/cart'; }); } }); }
#5
Отправлено 28 Октябрь 2013 - 07:31
Но изменений никаких
#8
Отправлено 28 Октябрь 2013 - 19:10
tva1982 (28 Октябрь 2013 - 14:56) писал:
В файле "main.js".
Код:
$(function() { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > $('.rghtrever').offset().top) $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0); } else { $('.cart-info').animate({'marginTop': 0}, 500); } }); });Заменить:
$(function() { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > $('.rghtrever').offset().top) { $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0); } else { $('.cart-info').animate({'marginTop': 0}, 500); } }); });
#9
Отправлено 28 Октябрь 2013 - 19:20
Koderhan (28 Октябрь 2013 - 19:10) писал:
В файле "main.js".
Код:
$(function() { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > $('.rghtrever').offset().top) $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0); } else { $('.cart-info').animate({'marginTop': 0}, 500); } }); });Заменить:
$(function() { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > $('.rghtrever').offset().top) { $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0); } else { $('.cart-info').animate({'marginTop': 0}, 500); } }); });
Исправил. Далее что необходимо сделать?
#10
Отправлено 29 Октябрь 2013 - 03:16
#bar .rever a { background: url("http://design.momo-cosmetic.ru/tov.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; font: 18px 'Cuprum',sans-serif; height: 36px; margin: 0; padding: 20px 10px 0 55px; text-decoration: none; }
и замените на
#bar .rever #cartInfo > a { background: url("http://design.momo-cosmetic.ru/tov.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0); color: #FFFFFF; display: block; float: left; font: 18px 'Cuprum',sans-serif; height: 36px; margin: 0; padding: 20px 10px 0 55px; text-decoration: none; }
далее добавьте
.cart-preloaded * { text-shadow: none !important; }
далее в файле main.js найдите
function updateCartInfo() { $.get('/cart?only_body=1', function(html) { if($(html).find('#shopping-cart-table tr').size()) { $('.cart-count').html('Корзина ' + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> ' + $(html).find('.price .num').closest('.price').html()); var item = $('<table class="cart-table cartForm">'); $(html).find('#shopping-cart-table tr').each(function() { if($(this).find('.product-name').length) { var image = $('<td>').addClass('cart-image').append($(this).find('.goods-image-icon-square')); var name = $('<td>').addClass('cart-name').append($(this).find('.product-name')); var price = $('<td>').addClass('cart-price') .append($(this).find('td:eq(5) .cart-price')) .append($('<span class="prd-count">').append($(this).find('td:eq(4) .input-text').val() + ' шт.')); item.append(($('<tr>').append(image).append(name).append(price))); } }) $('.cart-item').html(item); $('.cart-total').html($(html).find('#shopping-cart-table tfoot tr:eq(1) td').html()); $('.cart-total').find('button').click(function() { document.location = '/cart'; }); } }); }
и замените на
function updateCartInfo() { $.get('/cart?only_body=1', function(html) { if($(html).find('.paddlr tr').size()) { $('.cart-count').html('Корзина ' + '<span class="count">' + $(html).find('.paddlr tr.order').size() + '</span> ' + $(html).find('.whtblue .num').closest('span').html()); var item = $('<table class="cart-table cartForm">'); $(html).find('.paddlr tr.order').each(function() { if($(this).find('.info').length) { var image = $('<td>').addClass('cart-image').append($(this).find('.img')); var name = $('<td>').addClass('cart-name').append($(this).find('.info span')); var price = $('<td>').addClass('cart-price') .append($(this).find('td.fnt12b:eq(2)')) .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.')); item.append(($('<tr>').append(image).append(name).append(price))); } }); $('.cart-item').html(item); $('.cart-total').html($(html).find('.cartbottom .right').html()); $('.cart-total').find('button').click(function() { document.location = '/cart'; }); } }); }
#11
Отправлено 29 Октябрь 2013 - 05:42
#12
Отправлено 29 Октябрь 2013 - 05:44
#bar .rever { color: #FF9B20; float: right; font: 12px/64px 'Cuprum',sans-serif; margin: 0; overflow: hidden; padding: 6px 15px 0 0; width: 250px; }
и замените на
#bar .rever { color: #FF9B20; float: right; font: 12px/64px 'Cuprum',sans-serif; margin: 0; padding: 6px 15px 0 0; width: 250px; }
#13
Отправлено 29 Октябрь 2013 - 06:02
Сake (29 Октябрь 2013 - 05:44) писал:
#bar .rever { color: #FF9B20; float: right; font: 12px/64px 'Cuprum',sans-serif; margin: 0; overflow: hidden; padding: 6px 15px 0 0; width: 250px; }
и замените на
#bar .rever { color: #FF9B20; float: right; font: 12px/64px 'Cuprum',sans-serif; margin: 0; padding: 6px 15px 0 0; width: 250px; }
Теперь отражается содержимое корзины, но не совсем красиво:
т.е. межстрочный интервал ну очень уж крупный, и если есть скидка по группе, то пишет "undefined".
Также при добавлении товара в корзину:
При наведении курсора на кнопку "Продолжить покупки" в окне, также выскакивает содержимое корзины. Как это убрать?
#14
Отправлено 29 Октябрь 2013 - 06:28
Цитата
Добавьте в ваш файл стилей main.css
.cart-price { white-space: nowrap; } .cart-info .cart-item * { line-height: 20px; }
Цитата
Пожалуйста, сообщите адрес товара при котором проявляется данная ошибка.
Цитата
В данном случае есть несколько вариантов решения проблемы:
1. Убрать стандартное сообщение при добавлении товара в корзину.
2. Отключить отображение добавленного окна корзины при добавлении товара в корзину.
Каждый из вариантов решается по разному. Думаю лучшим будет убрать стандартное окно, так как добавленное окно всегда будет видно.
#15
Отправлено 29 Октябрь 2013 - 06:53
Сake (29 Октябрь 2013 - 06:28) писал:
.cart-price { white-space: nowrap; } .cart-info .cart-item * { line-height: 20px; }
Пожалуйста, сообщите адрес товара при котором проявляется данная ошибка.
В данном случае есть несколько вариантов решения проблемы:
1. Убрать стандартное сообщение при добавлении товара в корзину.
2. Отключить отображение добавленного окна корзины при добавлении товара в корзину.
Каждый из вариантов решается по разному. Думаю лучшим будет убрать стандартное окно, так как добавленное окно всегда будет видно.
Ошибку показывает на саму скидку:
#16
Отправлено 30 Октябрь 2013 - 01:57
var price = $('<td>').addClass('cart-price') .append($(this).find('td.fnt12b:eq(2)')) .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.'));
и замените её на
var price = $('<td>').addClass('cart-price') .append($(this).find('td.fnt12b:eq(2)')) .append($('<span class="prd-count">').append($(this).find('input.number').length ? ($(this).find('input.number').val() + ' шт.') : ($(this).find('.number').html())));
#17
Отправлено 30 Октябрь 2013 - 06:34
Сake (30 Октябрь 2013 - 01:57) писал:
var price = $('<td>').addClass('cart-price') .append($(this).find('td.fnt12b:eq(2)')) .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.'));
и замените её на
var price = $('<td>').addClass('cart-price') .append($(this).find('td.fnt12b:eq(2)')) .append($('<span class="prd-count">').append($(this).find('input.number').length ? ($(this).find('input.number').val() + ' шт.') : ($(this).find('.number').html())));
ОК. Спасибо все работает
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных