При добавлении товара в корзину, как сделать всплывающим попут окно?

Question

[Антон Вебсайтовский]

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

Само окно попутное

<a href="#x" class="overlay" id="win3"></a>
        <div class="popup">
          <h2>Вы добавили товар в корзину</h2>
          <a href="/cart/" title="Перейти в корзину"><div class="knopkar anim">Перейти в корзину</div></a>
          <a href="#close" title="Продолжить покупку"><div class="knopkar anim">Продолжить покупку</div></a>
          <a class="close" title="Закрыть окно" href="#close"></a>
        </div>

Кнопка добавить товар в корзину и jQuery который обрабатывает задачу, посылает товар в корзину, как в него добавить чтобы он запускал всплывающее окно.

<a href="javascript:void(0)" class="add_tovar"><div class="vkorziny anim">Добавить в корзину</div></a> 

jQuery(document).ready(function(){

    jQuery(".vkorziny").on("click", function(){
		
      price = parseFloat(jQuery('#hiden-price').val());
      price = parseFloat(jQuery('#hiden-price0').val());
      qty = parseFloat(jQuery("#kolvo").val());
      product_id = jQuery('#product_id').val();

      if(qty > 0){
        var data = {};
        data.price = price;
        data.product_id = product_id;
        data.qty = qty;
        
        jQuery.ajax({
          url:'http://'+location.host+'/cart/add_item/',
          type:'POST',
          dataType:'json',
          data: {data:data},
          success: function(data){
            if (data.qty>0)  {
              console.log($("#basket"));
              $("#basket").removeClass("empty");
            }

            totNum = number_format(data.total, 0, '.', '.');
            jQuery('.corzb').html('<i class="icon-basket"></i><div class="corzbt"><b>Товаров: <strong>'+ + data.qty +'</strong><br/><strong>'+ totNum +'</strong> руб</b></div>');

            jQuery($this).addClass('active');
            $($this).find('.vkorziny.anim').html('Добавить в корзину');

          }
        });
        return false;
      }
      return false;
    });

  });

Comments

[alex-1917]

попут?
пздц

[Антон Вебсайтовский]

alex-1917, попуп )

[alex-1917]

Антон Вебсайтовский,
Лупа села за первую парту, а Пупа села за вторую парту.
Что получается?
Лупа перед Пупой,
а Пупа за Лупой.

[alex-1917]

ошибки в консоли наверное есть?

Answer 1

[Антон Вебсайтовский]

Вопрос решен: можно так сделать, window.location.hash = '#win3';

Answer 2

[Антон]

Скачать плагин попапа, прочитать документацию и вызвать в теле success: function(data){}

Comments

[Антон Вебсайтовский]

Зачем качать его, если у меня есть попут окно, его надо в js правильно прописать, ну чтобы js его запускал, вот и узнаю как это сделать.

[Антон]

Антон Вебсайтовский,

success: function(data){
$('.popup').show();
}

[Антон Вебсайтовский]

Антон, Нет, не открывает.
Пробовал и так $('#win3').show();

[Антон Вебсайтовский]

Я вот и так пробовал и тож ничего

$('#win3').click(function() {
              $('.popup').fadeIn();
              return false;
            });

[Антон]

Антон Вебсайтовский, Ну значит, надо смотреть на конкретный пример, почему у вас окно не показывается

[Антон Вебсайтовский]

Антон, все работает, если тупо сделать ссылку по которой кликаешь и окно всплывает.
Опен окно

Суть вопроса вижу вы не поняли.

[alex-1917]

встретились два антона

[Антон Вебсайтовский]

alex-1917, помог бы лучше ) флудераст.

[alex-1917]

Антон Вебсайтовский, ты не поверишь, я только щас вчитался в твой вопрос. Вишь как твой ПОПУТ меня заманил!!... ПОПУТал

[alex-1917]

Антон Вебсайтовский, см. мойответ

[Антон Вебсайтовский]

alex-1917, сработал маркетинг ))))

Answer 3

[alex-1917]

Что за говнокод??!!
Ты вешаешь обработку клика для DIV,при этом клик на a никто не отменял!
А твои return false; ДВА раза вообще про что?))) Ты их применяешь к DIV!!.. ппц

Тебе надо:
1. Вместо
jQuery(".vkorziny").on("click", function(){
сделать
jQuery(".add_tovar").on("click", function(){

2. переделать логику с учетом п.1

3. и вообще не совать внутрь ссылки ничего!
вместо

<a href="javascript:void(0)" class="add_tovar"><div class="vkorziny anim">Добавить в корзину</div></a>

сделать

<a href="javascript:void(0)" class="add_tovar">Добавить в корзину</a>

Comments

[Антон Вебсайтовский]

Да, можно и так сделать, но ведь это ничего толком не меняет, меньше код без лишнего.

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

[Антон Вебсайтовский]

Вставил в стили display: block; и кнопка стала как была.

[Антон Вебсайтовский]

Суть вообще вопроса не в этих мелочах, а про то как подключить popup, чтобы при клике на кнопку добавить в корзину всплывал.

[Антон Вебсайтовский]

/* активируем модальный блок */
.overlay:target+.popup {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 20%;
}
.overlay:target+.popup1 {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 20%;
}

[Антон Вебсайтовский]

Так срабатывает затемнение, а попупа нет. $("#win3").fadeIn();