Jump to content
Sign in to follow this  
krissm8

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

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites

Вам надо подправить только 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;
}
  • +1 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Вам надо подправить только 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;
}

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

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

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

Share this post


Link to post
Share on other sites

Все заработало, но для отключения скроллинга внес изменения в 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']);


  }
 }
});
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

2013-01-04_005606.png

Открываем файл /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" );}}});

Share this post


Link to post
Share on other sites

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

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

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

  • +1 2

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.