Перейти к содержанию
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;
}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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


  }
 }
});
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.