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


Оформление Корзины


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

#41 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 26 Июнь 2013 - 10:09

Просмотр сообщенияСake (26 Июнь 2013 - 02:13) писал:

На данный момент у вас именно такое отображение, если вы говорите о корзине в шапке. Если же вы имеете в виду цену в всплывающем окне при добавлении товара в корзину, то для задания цвета данной цене - необходимо в файле стилей main.css найти

.black span {
color: #E9077C;
font-style: italic;
}

и заменить на

.black span, .newCartSum .num {
color: #E9077C;
font-style: italic;
}

По корзине: Далее добавьте в файл стилей main.css

.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 {
width: 96%;
height: 130px;
margin: 5px auto;
overflow-x: hidden;
overflow-y: auto;
border-bottom: 1px solid #E6E6E6;
}
.cart-info .cart-total {
height: 25px;
width: 96%;
margin: 5px auto;
font-size: 12px;
line-height: 25px;
text-align: right;
}

и замените код корзины

<div class="cart-info"></div>

заменить на

<div class="cart-info">
<div class="cart-count"></div>
<div class="cart-item"></div>
<div class="cart-total"></div>
</div>


Добрый день. Сделал все как вы описали, но ничего не произошло, как было так и осталось, что не так?

#42 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 27 Июнь 2013 - 03:07

Все правильно, просто еще данная корзина с информацией не доделана. Осталось вставить в файл main.js следующий код

$(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 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'));
		 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';
	 });
}
});
}

а в файл стилей main.css следующий

.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;
}

далее в шаблон "Ajax добавление товара в корзину" необходимо вставить

updateCartInfo();

после строки

<script>


#43 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 27 Июнь 2013 - 14:02

Просмотр сообщенияСake (27 Июнь 2013 - 03:07) писал:

Все правильно, просто еще данная корзина с информацией не доделана. Осталось вставить в файл main.js следующий код

$(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 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'));
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';
});
}
});
}

а в файл стилей main.css следующий

.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;
}

далее в шаблон "Ajax добавление товара в корзину" необходимо вставить

updateCartInfo();

после строки

&lt;script>


Ура! Ура! Ура! Сработало, спасибо всем кто помогал.
Теперь хочется чуть чуть доработать, пытался сам, но что то получилось, а вот остальное видимо без вас не справлюсь. Адрес моего сайта Итак:
1. Количество товаров во всплывающем окне корзины отображается не корректно почему то когда в корзине 1 товар пишет что там их 4
2. Как можно сделать тень от всплывающего окна сильнее

Ниже прикрепил картинку с иллюстрациями чтобы более понятны были вопросы:
3. Ситуация 1: когда в корзину помещен 1 товар
примечание: поле товара с описанием и ценой нужно увеличить в полтора раза в высоту чем сейчас. Так же хочется под ценой добавить количество, как изображено на картинке.
4. Ситуация 2: когда в корзину помещены 2 товара
примечание: всплывающее окно корзины автоматически увеличивается в высоту еще на 1 поле товара, итого становиться видно 2 позиции как изображено на картинке
5. Ситуация 3: когда в корзину помещены 3 и более товара
примечание: во всплывающем окно корзины появляется скрол, с помощью которого можно прокручивать и смотреть остальные позиции, возможно ли сделать такой же скрол как на картинке или на подобии, по аналогии всплывающей корзины как на сайте

Изображение

#44 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 28 Июнь 2013 - 02:15

1) Найдите в коде javascript строку

$(html).find('#shopping-cart-table tr').size()

и замените её на

$(html).find('#shopping-cart-table tbody > tr').size()

2) В файле стилей main.css найдите

.cart-info {
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0 0 2px #BABABA;
	display: none;
	max-height: 250px;
	position: absolute;
	right: 10px;
	top: 43px;
	width: 390px;
	z-index: 99999;
}

и измените свойство box-shadow

3) В файле стилей main.css найдите

.cart-info .cart-item {
	border-bottom: 1px solid #E6E6E6;
	height: 130px;
	margin: 5px auto;
	overflow-x: hidden;
	overflow-y: auto;
	width: 96%;
}

и замените на

.cart-info .cart-item {
	border-bottom: 1px solid #E6E6E6;
	max-height: 130px;
	margin: 5px auto;
	overflow-x: hidden;
	overflow-y: auto;
	width: 96%;
}

далее найдите в main.js

var price = $('<td>').addClass('cart-price').append($(this).find('td:eq(5) .cart-price'));

и замените на

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() + ' шт.'));


#45 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 28 Июнь 2013 - 15:07

Супер! Спасибо, получается очень классно)))
Только почему то штуки скачут в хроме и опере они начинаются сразу после цены и только на следующей строке надпись "шт.", как сбить все - цифру и надпись "шт." на следующую строку?
И скажите пожалуйста как сделать чтобы при добавлении товара это всплывающее окно меню, которое мы с вами сделали, открывалось само, т. е. каждый раз добавляя товар окно само открывается на некоторое время и скрывается вместо вот этого (см. картинку ниже)? как реализовано на этом сайте и причем, даже если поле с хедером и корзиной не видно при прокрутке вниз все равно добавляя товар окно появляется в верхнем правом углу указывая на корзину и что в ней находиться, посмотрите сами, думаю это удачная находки и пригодиться многим. С нетерпением жду )

Изображение

#46 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 29 Июнь 2013 - 03:50

Добавьте в ваш файл стилей main.css

.cart-price .prd-count {
   display: block;
}
.cart-preloaded.fixed {
	position: fixed !important;
	right: 0;
	top: -30px;
}

В шаблон "Ajax добавление товара в корзину" добавьте

<script>
updateCartInfo();
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>


#47 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 29 Июнь 2013 - 14:52

Просмотр сообщенияVaccina (29 Июнь 2013 - 03:50) писал:

Добавьте в ваш файл стилей main.css

.cart-price .prd-count {
display: block;
}
.cart-preloaded.fixed {
position: fixed !important;
right: 0;
top: -30px;
}

В шаблон "Ajax добавление товара в корзину" добавьте

&lt;script>
updateCartInfo();
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>

Спасибо! Скажите пожалуйста как выровнять это всплывающее окно ровно под тем которое появляется при наведении мышки на корзину, сейчас оно немного левее и как выровнять на одну строку количество товара в корзине и надпись "шт.", которое находится под ценой во всплывающем окне? И как на странице каталог и главной странице (в каруселе с новинками) оставить только всплывающее окно с корзиной и убрать вот это (см. картинку ниже), которое появляется при нажатии на кнопку "в корзину", а на странице товара когда нажимаешь добавить в корзину чтобы не перебросевало сразу в корзину, а так же появлялось это всплывающее окошко корзины

Изображение

#48 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 29 Июнь 2013 - 15:41

Найдите код в main.css:
.cart-info.selected {
display: block;
}
и замените на:
.cart-info.selected {
display: block;
right:0px;
}

Добавьте в конец main.css код:
.cart-price {width: 105px;}
.cart-price .cart-price, .cart-price .prd-count{width:auto;}
.cart-price .cart-price{float:left;}
.cart-price .prd-count{float:right;}


#49 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 29 Июнь 2013 - 16:55

Просмотр сообщенияmiyako (29 Июнь 2013 - 15:41) писал:

Найдите код в main.css:
.cart-info.selected {
display: block;
}
и замените на:
.cart-info.selected {
display: block;
right:0px;
}

Добавьте в конец main.css код:
.cart-price {width: 105px;}
.cart-price .cart-price, .cart-price .prd-count{width:auto;}
.cart-price .cart-price{float:left;}
.cart-price .prd-count{float:right;}


К сожалению нечего не изменилось(((

#50 sengun

sengun

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

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

Отправлено 29 Июнь 2013 - 17:13

Что касается цены и количества в одну линию во всплывающем окне корзины:
В main.css код
.cart-info .cart-item .cart-name {
		 width: 290px;
		 padding: 0 10px;
}
измените так
.cart-info .cart-item .cart-name {
		 width: 180px;
		 padding: 0 10px;
}
А код
.cart-price .prd-count {
display: block;
}
закомментируйте:
/*.cart-price .prd-count {
display: block;
}*/
29-06-2013 16-20-21.jpg

#51 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 29 Июнь 2013 - 17:23

Просмотр сообщенияsengun (29 Июнь 2013 - 17:13) писал:

Что касается цены и количества в одну линию во всплывающем окне корзины:
В main.css код
.cart-info .cart-item .cart-name {
		 width: 290px;
		 padding: 0 10px;
}
измените так
.cart-info .cart-item .cart-name {
		 width: 180px;
		 padding: 0 10px;
}
А код
.cart-price .prd-count {
display: block;
}
закомментируйте:
/*.cart-price .prd-count {
display: block;
}*/
Прикрепленный файл 29-06-2013 16-20-21.jpg

Спасибо за помощь, но имелось ввиду в одну строку 4 шт. и распологается эта строка под ценой а не на одной строке с ценой, т. к. сейчас цена и количество товаров на одной строке а надпись "шт." на следующей, нужно сбить количество товаров на строку с надписью "шт."

#52 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 30 Июнь 2013 - 08:24

Просмотр сообщенияbg999 (29 Июнь 2013 - 17:23) писал:

Спасибо за помощь, но имелось ввиду в одну строку 4 шт. и распологается эта строка под ценой а не на одной строке с ценой, т. к. сейчас цена и количество товаров на одной строке а надпись "шт." на следующей, нужно сбить количество товаров на строку с надписью "шт."

А если несколько товаров, то может возникнуть путаница.

#53 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 30 Июнь 2013 - 16:34

Добрый вечер прикрепил картинку чтобы было понятнее
1. Сдвинуть всплывающее окно корзины левее, так чтобы оно стало ровно под верхним всплывающим окном корзины, которая появляется когда мышкой наводишь на нее
2. Убрать вот это диалогвовое окно где написано продолжить покупки или перейти в корзину. Убрать на странице ТОВАРЫ и на ГЛАВНОЙ в новинках (коруселе). А на странице ТОВАР сделать так чтобы при нажатии на кнопку добавить в корзину не перекидовало сразу в КОРЗИНУ а оставалась на той же и появлялось то же всплывающее окно корзины, по аналогии со страницей ТОВАРЫ
Изображение

#54 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 02 Июль 2013 - 01:28

Попробуйте добавить в ваш файл main.js

$(function() {
  $(window).scroll(function() {
	 var scrollTop = $(window).scrollTop();
	 if(scrollTop > $('.cart-info').offset().top) {console.log(1);
		$('.cart-info').animate({'marginTop': scrollTop}, 500);
	 }
	 else {
		$('.cart-info').animate({'marginTop': 0}, 500);
	 }
  });
});

а также найдите и удалите в файле стилей main.css

.cart-preloaded.fixed {
		position: fixed !important;
		right: 0;
		top: -30px;
}

далее в шаблоне "Ajax Добавление товара в корзину" найдите

<script>
updateCartInfo();
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>

и замените на

<script>
$('#nyroModalFull').hide();
$('.nyroModalClose').trigger('click');
updateCartInfo();
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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsListForm')

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsListForm, .goodsDataForm')


#55 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 02 Июль 2013 - 12:20

Просмотр сообщенияСake (02 Июль 2013 - 01:28) писал:

Попробуйте добавить в ваш файл main.js

$(function() {
$(window).scroll(function() {
	 var scrollTop = $(window).scrollTop();
	 if(scrollTop > $('.cart-info').offset().top) {console.log(1);
	 $('.cart-info').animate({'marginTop': scrollTop}, 500);
	 }
	 else {
	 $('.cart-info').animate({'marginTop': 0}, 500);
	 }
});
});

а также найдите и удалите в файле стилей main.css

.cart-preloaded.fixed {
	 position: fixed !important;
	 right: 0;
	 top: -30px;
}

далее в шаблоне "Ajax Добавление товара в корзину" найдите

<script>
updateCartInfo();
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>

и замените на

<script>
$('#nyroModalFull').hide();
$('.nyroModalClose').trigger('click');
updateCartInfo();
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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsListForm')

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsListForm, .goodsDataForm')


Добрый день спасибо за ответ)
Вот такая ситуация, когда я убираю вот этот код

.cart-preloaded.fixed {
    position: fixed !important;
    z-index: 99999;
}
в этом случае у меня каждый раз когда я добавляю товар, окно всплывает на верху и его естественно не видно если добавлять товар в корзину находясь на середине страницы ТОВАРЫ (во время прокрутки), и непонятно добавился товар или нет. Сейчас если вы посмотрите на моем сайте http://cosmetikova.ru, когда добавляешь товар окно всплывает и его видно на каком месте прокрутки ты бы не находился, но проблема в том что она всплываеат немного левее чем надо, а хотелось бы сдвинуть правее чтобы она была строго под тем всплывающим окном которое поялветься при наведении на корзину.

И еще как сделать чтобы при добавлении товара в корзину или каждый раз экран затимнялся или вообще никогда не затимнялся, а то сейчас при первом добавлении затемняется а потом нет и тоже не понятно толи товар добавился то ли кнопка не реагирует

И третее как сделать так чтобы во всплывающем окно всегда отображались данные модификации например у меня это "Объем: 50мл.", сейчас отображаються только в том случае когда у одного товара 2 и более модификации (например: Объем: 150 мл. и Объем: 250 мл.) тогда во всплывающем окне показываеться модификация (см. картинку ниже)

Изображение

#56 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 03 Июль 2013 - 05:02

Попробуйте заменить файл в main.js

$(function() {
$(window).scroll(function() {
		 var scrollTop = $(window).scrollTop();
		 if(scrollTop > $('.cart-info').offset().top) {console.log(1);
		 $('.cart-info').animate({'marginTop': scrollTop}, 500);
		 }
		 else {
		 $('.cart-info').animate({'marginTop': 0}, 500);
		 }
});
});

на следующий код

$(function() {
  $(window).scroll(function() {
	var scrollTop = $(window).scrollTop();
	if(scrollTop > $('.mymenu').offset().top) {
	   $('.cart-info').animate({'marginTop': (scrollTop - $('.mymenu').offset().top)}, 500);
	}
	else {
	   $('.cart-info').animate({'marginTop': 0}, 500);
	}
  });
});

Так же добавьте в файл main.css

#nyroModalBg {
   background: transparent !important;
}

Цитата

И третее как сделать так чтобы во всплывающем окно всегда отображались данные модификации например у меня это "Объем: 50мл.", сейчас отображаються только в том случае когда у одного товара 2 и более модификации (например: Объем: 150 мл. и Объем: 250 мл.) тогда во всплывающем окне показываеться модификация (см. картинку ниже)

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

#57 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 03 Июль 2013 - 13:34

Просмотр сообщенияСake (03 Июль 2013 - 05:02) писал:

Попробуйте заменить файл в main.js

$(function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if(scrollTop > $('.cart-info').offset().top) {console.log(1);
$('.cart-info').animate({'marginTop': scrollTop}, 500);
}
else {
$('.cart-info').animate({'marginTop': 0}, 500);
}
});
});

на следующий код

$(function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if(scrollTop > $('.mymenu').offset().top) {
$('.cart-info').animate({'marginTop': (scrollTop - $('.mymenu').offset().top)}, 500);
}
else {
$('.cart-info').animate({'marginTop': 0}, 500);
}
});
});

Так же добавьте в файл main.css

#nyroModalBg {
background: transparent !important;
}



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


Добрый день уже лучше)
прикрепил картинку ниже: скажите пожалуйста как сделать так чтобы окошко появлялось как на картинке и была видна надпись "корзина" количество товаров и верхний белый треугольник, и при прокрутки вверх и вниз оно (окошко) четко и плавно двигалась а не дрыгалась и дергалась как сейчас. И почему то прилоудер по середине экрана который появляется при добавлении экрана (знак загрузки и затемнение экрана) сейчас не работает или то работает то нет

Изображение

Просмотр сообщенияСake (03 Июль 2013 - 05:02) писал:

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

Тогда скажите как можно это вывести в корзину, она там тоже очень нужна

#58 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 03 Июль 2013 - 23:29

Замените строку

$('.cart-info').animate({'marginTop': (scrollTop - $('.mymenu').offset().top)}, 500);

на следующую

$('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);

Цитата

Тогда скажите как можно это вывести в корзину, она там тоже очень нужна

Пожалуйста, приложите ваш шаблон "Корзина", возможно он у вас изменен, и поэтому информация отображается иначе.

#59 bg999

bg999

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

  • Пользователи
  • PipPipPipPip
  • 263 сообщений

Отправлено 04 Июль 2013 - 20:31

Просмотр сообщенияСake (03 Июль 2013 - 23:29) писал:

Замените строку

$('.cart-info').animate({'marginTop': (scrollTop - $('.mymenu').offset().top)}, 500);

на следующую

$('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);



Пожалуйста, приложите ваш шаблон "Корзина", возможно он у вас изменен, и поэтому информация отображается иначе.

Добрый вечер) Спасибо большое за вашу помошь!
Уже лучше, но почему то загрузчик, который появляется после того как добавляешь товар в корзину работает через раз (я имею ввиду анимация загрузки со всплывающим окном). И скажите возможно вернуть фоновое затемнение экрана исключительно на странице товар при увеличении картинки, только на этой странице, т. к. сейчас когда открываешь картинку то сзади фон не темнее и не видно крестика и номера страницы (они же белого цвета и фон белый)

И вот шаблон "Корзин"




<div class="breadcrumbs">
  <ul>
    <li><a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a><span>&nbsp;</span></li>
    <li><strong>Корзина</strong></li>
  </ul>
</div>









<div class="col-main" style="padding-right: 0px;">
  <div class="col-main">
    <div class="cart">
  <div class="page-title title-buttons">
    <h1>{% IF cart_items_empty %}Корзина покупок пуста{% ELSE %}Корзина{% ENDIF %}</h1>
    
    
    
    
    
    </br>
    </br>
    
    
    
    
    
    
    
    <p style="vertical-align: top; height: 45px; width: 730px; text-align: left;"><span style="color:#555;"><span style="font-size:12px;">
    <strong><span style="font-family: Arial, Verdana, san-serif;">Нужна помощь? Позвоните по тел. (863) 250-58-99 &nbsp;|&nbsp;
  
  <a href="http://design.cosmet...роба.html?6054" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=733,height=500');
  return false;">
  <snap style="color: #555;">информация о доставке</snap></a>&nbsp;&nbsp;</snap>|&nbsp;<a href="http://design.cosmet...роба.html?6054" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=733,height=500');
  return false;">
  <snap style="color: #555;">информация об оплате</snap></a>&nbsp;&nbsp;</snap>|&nbsp;<a href="http://design.cosmet...роба.html?6054" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=733,height=500');
  return false;">
  <snap style="color: #555;">возврат товара</snap></a></span></strong></span></span></p>
    
    
    
    
    
    {% IFNOT cart_items_empty %}
  <ul class="checkout-types">
  
  
  
  <!------------------
  
    <li><button type="button" title="Перейти к оформлению заказа" class="button btn-checkout" onclick="$('.cartForm').append('<input type=\'hidden\' name=\'next_step\' value=\'1\' />').submit();return false;"><span><span>Оформить заказ</span></span></button> </li>
    ------------------>
    
  </ul>
    {% ENDIF %}
    </div>
    
    
    
    <div class="clear"></div>
  





            
        










  {% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-msg{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}

  {% IF cart_items_empty %}
    <p class="note-msg">Корзина покупок пуста. Вы можете выбрать нужный товар из <a href="{CATALOG_URL}">каталога</a></p>
    
  {% ELSE %}
  
    <form action="{CART_URL}" method="post" class="cartForm">
  <fieldset>
    <input type="hidden" name="hash" value="{HASH}" />
    <table id="shopping-cart-table" class="data-table cart-table">
  <col width="1" />
  <col width="1" />
  <col />
  <col width="1" />
  <col width="1" />
  <col width="1" />
  <thead>
    <tr>
  <th rowspan="1" class="a-center">&nbsp;</th>
  <th rowspan="1">Фото</th>
  <th rowspan="1"><span class="nobr">Название товара</span></th>
  <th class="a-center" colspan="1"><span class="nobr">Цена</span></th>
  <th rowspan="1" class="a-center" title="">Кол-во</th>
  <th class="a-center" colspan="1">Cумма</th>
    </tr>
  </thead>
  
  
  
<tfoot>
  
  
  
  
  <td colspan="6" class="a-right button-update" style="border-right:0;border-bottom:5px solid #4f4f4f; display: none;">
   <button type="button" title="Пересчитать" class="button btn-continue right" onclick="$('.cartForm').submit();return false;" style="padding-top: 4px; padding-bottom: 4px; color: rgb(131, 131, 131);"><span><span>Пересчитать</span></span></button>
  
  </td>
  
  
  
  
  
    </tr>
    <tr>
    
  <td colspan="6" class="a-right">
   <span class="price" style="font-size: 17px; padding-right:5px;">Итого:</span> <span class="price" style="font-size: 21px; font-style: normal; font-color: #000;">
  {% FOR cart_sum %}
    {cart_sum.NOW | money_format}<br />
  {% ENDFOR %}
    </span>
    <button type="submit" title="Перейти к оформлению заказа" class="button btn-update" onclick="$('.cartForm').append('<input type=\'hidden\' name=\'next_step\' value=\'1\' />').submit();return false;" style="padding-top: 5px;"><span><span>Оформить заказ</span></span></button>

  </td>
    </tr>     
  </tfoot>
  
  
  
  
  <tbody>
    {% FOR cart_items %}
  <tr>
    <td class="a-center"><a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="btn-remove2">Удалить</a></td>
    <td><a href="{cart_items.GOODS_URL}" style="background-image:url('{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}');" class="goods-image-icon-square"></a></td>
    <td>
  <span class="product-name">
    <a href="{cart_items.GOODS_URL}" class="cartFormTbodyHeader">
  <snap style="font-size:12px; font-weight: bold; font-family: Verdana, san-serif;">{cart_items.GOODS_NAME}</a>
  </br>
  <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
  <snap style="font-size:12px; line-height: 20px; color: #858484;">{% 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 %}
    </snap>
  </span>
    </td>
    <td class="a-right">
  <span class="cart-price">
    <span  class="price">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>     
  </span>
    </td>
    <td class="a-center">
  <input name="form[quantity][{cart_items.GOODS_MOD_ID}]" title="Количество, {cart_items.GOODS_MOD_MEASURE_NAME}" value="{cart_items.ORDER_LINE_QUANTITY}" class="input-text qty a-center" size="4" maxlength="12" />
    </td>
    <td class="a-right">
  <span class="cart-price">
    <span class="price">{cart_items.ORDER_LINE_PRICE_NOW | money_format}</snap>     
  </span>
    </td>
  </tr>  
    {% ENDFOR %}
  </tbody>
    </table>
  </fieldset>
    </form>
    
  

    {% ENDIF %}
  </div>
</div></div>

#60 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 05 Июль 2013 - 01:01

Попробуйте сделать следующее - в файле стилей main.css найдите и удалите

#nyroModalBg {
	background: none repeat scroll 0 0 transparent !important;
}

далее в шаблоне "Ajax Добавление товара в корзину" найдите

<script>
$('#nyroModalFull').hide();
$('.nyroModalClose').trigger('click');
updateCartInfo();
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>

и замените на

<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 найдите

// Если нужно просто добавить в корзину и продолжить покупки
} else {
$(this).nyroModalManual({
formIndicator: 'ajax_q', // Value added when a form is sent
minWidth: 420, // Minimum width
minHeight: 150, // Minimum height
gallery: null // Gallery name if provided
});
return false;
}
});
// Клик по ячейке с изображением означает клик по картинке

и замените на

// Если нужно просто добавить в корзину и продолжить покупки
} else {
$(this).nyroModalManual({
formIndicator: 'ajax_q', // Value added when a form is sent
minWidth: 420, // Minimum width
minHeight: 150, // Minimum height
showContent: function(){
	$('#nyroModalFull').hide();
	$('.nyroModalClose').trigger('click');
},
gallery: null // Gallery name if provided
});
return false;
}
});
// Клик по ячейке с изображением означает клик по картинке

Цитата

Тогда скажите как можно это вывести в корзину, она там тоже очень нужна

К сожалению, все же этого реализовать нельзя, так как эти данные отображаются системно и выводятся с помощью стандартного кода

<snap style="font-size:12px; line-height: 20px; color: #858484;">{% 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 %}
	 </snap>

В данном случае если данные не выводятся, то вывести их другим способом нельзя.




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

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