Извещение о добавлении товара в корзину по центру экрана и без скролинга [РЕШЕНО]

[krissm8]

Всем доброго времени суток. Собственно вопрос, как сделать извещение о добавлении товара в корзину по центру экрана и без скролинга? Пример увидел здесь. Начал копать, сделал следующие изменения в файлах:

common.js

function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
 url: 'index.php?route=checkout/cart/add',
 type: 'post',
 data: 'product_id=' + product_id + '&quantity=' + quantity,
 dataType: 'json',
 success: function(json) {
  $('.success, .warning, .attention, .information, .error').remove();

  if (json['redirect']) {
   location = json['redirect'];
  }

  if (json['success']) {
   $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/minimarket/image/close.png" alt="" class="close" /></div>');

   $('.success').fadeIn('slow').delay(5000).fadeOut(1500);

   $('#cart-total').html(json['total']);


  }
 }
});
}

stylesheet.css

.success, .warning, .attention, .information {
padding: 10px 10px 10px 33px;
margin-bottom: 15px;
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Однако ничего не получилось. Подскажите, где копать?

[chupokabr]

Вам надо подправить только css стили.

Вам подойдет одно из 2-х значение свойства position:

absolute - Указывает, что элемент абсолютно позиционирован

fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствамиleft, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы

Подробнее тут

Вот пример с фиксированием сообщения.

.success, .warning, .attention, .information {
position: fixed; /*Фиксируем блок на экране*/
width: 400px; /* Устанавливаем ширину блока в 350 пикселей*/
top: 30%; /*Отступ от верхнего края окна браузера 30 процентов*/
left: 50%; /*Отступ от левого края окна браузера 50 процентов*/
margin-left: -200px; /*сдвиг блока влево на половину ширины блока, чтобы он был четко по середине */
padding: 10px 10px 10px 33px;
/*margin-bottom: 15px;*/ /* Закомментил за не надобностью нижнего отступа. Он не учитывается при фиксированном позиционировании*/
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

[sitecreator]

Посмотрите на форуме. не так давно обсуждалось. есть полностью готовое решение.

[chupokabr]

Может человек хочет сам разобраться, а не тупо клацать кнопки в админке

[sitecreator]

Может человек хочет сам разобраться, а не тупо клацать кнопки в админке

Так в той теме готовое ПРАВИЛЬНОЕ решение с кодом и обсуждением кода. Только лишь стоит поискать.

Хотя, именно в этой теме, я смотрю, вы объясняете человеку азы CSS, так сказать, азбуку верстки.

[krissm8]

Вам надо подправить только css стили.

Вам подойдет одно из 2-х значение свойства position:

absolute - Указывает, что элемент абсолютно позиционирован

fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствамиleft, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы

Подробнее тут

Вот пример с фиксированием сообщения.

.success, .warning, .attention, .information {
position: fixed; /*Фиксируем блок на экране*/
width: 400px; /* Устанавливаем ширину блока в 350 пикселей*/
top: 30%; /*Отступ от верхнего края окна браузера 30 процентов*/
left: 50%; /*Отступ от левого края окна браузера 50 процентов*/
margin-left: -200px; /*сдвиг блока влево на половину ширины блока, чтобы он был четко по середине */
padding: 10px 10px 10px 33px;
/*margin-bottom: 15px;*/ /* Закомментил за не надобностью нижнего отступа. Он не учитывается при фиксированном позиционировании*/
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Спасибо, сейчас попробую.

Посмотрите на форуме. не так давно обсуждалось. есть полностью готовое решение.

Лопатил весь форум, ничего подобного не смог найти.

[krissm8]

Все заработало, но для отключения скроллинга внес изменения в common.js:

function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
 url: 'index.php?route=checkout/cart/add',
 type: 'post',
 data: 'product_id=' + product_id + '&quantity=' + quantity,
 dataType: 'json',
 success: function(json) {
  $('.success, .warning, .attention, .information, .error').remove();

  if (json['redirect']) {
   location = json['redirect'];
  }

  if (json['success']) {
   $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/minimarket/image/close.png" alt="" class="close" /></div>');

   $('.success').fadeIn('slow').delay(5000).fadeOut(1500);

   $('#cart-total').html(json['total']);


  }
 }
});
}

[krissm8]

Однако! Скролинг отключается повсюду, кроме страницы товара. В добавок на главной страницы извещение появляется за слайд шоу. Что делать?

[sunny8u]

Изменение стандартного оповещения о добавлении в корзину

Открываем файл /catalog/view/javascript/common.js

Удаляем прокрутку страницы вверх

$('html, body').animate({ scrollTop: 0 }, 'slow');

Заменяем вот этот кусок:

[/color]
[color=#141414][font=Tahoma,]$('.success').fadeIn('slow');

на вот этот:

[/color]
[color=#141414][font=Tahoma,]$('.success').dialog({modal: true,buttons: {Ok: function() {$( this ).dialog( "close" );}}});

[chupokabr]

Однако! Скролинг отключается повсюду, кроме страницы товара. В добавок на главной страницы извещение появляется за слайд шоу. Что делать?

Чтобы вывести поверх, просто задайте номер слоя для уведомлений в стилях:

z-index: 999; /*Например*/

[krissm8]

Чтобы вывести поверх, просто задайте номер слоя для уведомлений в стилях:

z-index: 999; /*Например*/

Спасибо. Теперь все решено.

[bobin]

Однако! Скролинг отключается повсюду, кроме страницы товара.

В шаблоне карточки товара (product.tpl) тоже удалите

$('html, body').animate({ scrollTop: 0 }, 'slow');