Cмена содержимого div при выполнении команды submit
Всем, привет. Прошу помощи в таком вопросе:
Необходимо дополнить действие при нажатии на кнопку купить. Имеется, стандартная кнопка купить и кнопка в один клики из плагина. Последний div, "order-in-cart-block", то, что необходимо показывать после добавления в корзину через стандартную кнопку. Сейчас скрыт стилем display:none; Остальное должно скрываться. Вот код: <div class="box-cart-bottom"> <div> <p id="add_to_cart" class="buttons_bottom_block no-print"> <input type="hidden" name="product_id" value="{$product.id}"> <button type="submit" class="exclusive btn button ajax_add_to_cart_button"> <span>[`Add to cart`]</span> </button> </p> </div>{shopStorequickorderPlugin::product_button()} <div class="order-in-cart-block"><a href="/cart" class="button-order-in-cart">Перейти в корзину</a></div> </div> Далее приведен код, описывающий событие (submit), при нажатии на стандартную кнопку купить, не учитывающий этот новый div: this.form.submit(function() { var f = $(this); $.post(f.attr('action') + '?html=1', f.serialize(), function(response) { if (response.status == 'ok') { if($('#product').hasClass('content_only')) { var cart_total = window.parent.$(".shopping_cart"); } else { var cart_total = $(".shopping_cart"); } var cart_div = f; var clone = $('<div class="cart"></div>').append(f.clone()); if (cart_div.closest('.dialog').length) { clone.insertAfter(cart_div.closest('.dialog')); } else { clone.insertAfter(cart_div); } clone.css({ top: cart_div.offset().top - $(window).scrollTop(), left: cart_div.offset().left, width: cart_div.width() + 'px', height: cart_div.height() + 'px', position: 'fixed', overflow: 'hidden', 'z-index': 9999 }).animate({ top: cart_total.offset().top, left: cart_total.offset().left, width: 0, height: 0 }, 500, function() { $(this).remove(); var quantity_wanted = parseInt($('#quantity_wanted').val()); if (cart_total.find('dt[data-id=' + response.data.item_id + ']').length) { var item = cart_total.find('dt[data-id=' + response.data.item_id + ']'); var quantity = parseInt(item.find('.quantity').text()); item.find('.quantity').text(quantity + quantity_wanted); cart_total.find('.ajax_block_cart_total').html(response.data.total); cart_total.find('.ajax_cart_quantity').text(response.data.count); } else { var info = cart_div.find('.ajax_product_info'); var tpl_data = { url: info.data('url'), name: info.data('name'), img: info.data('img'), price: info.data('price'), quantity: quantity_wanted, id: response.data.item_id }; $('#cart_block_list_item_tmpl').tmpl(tpl_data).appendTo(cart_total.find('.cart_block_list .products')); cart_total.find('.ajax_block_cart_total').html(response.data.total); cart_total.find('.ajax_cart_quantity').html(response.data.count); cart_total.find('.ajax_cart_discount').html(response.data.discount); cart_total.find('.ajax_cart_no_product').addClass('unvisible'); cart_total.find('.ajax_cart_product_txt_s').removeClass('unvisible'); cart_total.find('.ajax_cart_quantity').removeClass('unvisible'); } }); if (cart_div.closest('.dialog').length) { cart_div.closest('.dialog').hide().find('.cart').empty(); } if (response.data.error) { alert(response.data.error); } } else if (response.status == 'fail') { alert(response.errors); } }, "json"); return false; }); } Это все можно не менять, просто добавить смену содержимого. Буду рад помощи в данном вопросе. К сожалению, знаний для написания правильной функции не хватает. |
Paul12345, как вариант, пробуйте так:
<div class="box-cart-bottom"> <div id="hidden"> <p id="add_to_cart" class="buttons_bottom_block no-print"> <input type="hidden" name="product_id" value="{$product.id}"> <button type="submit" class="exclusive btn button ajax_add_to_cart_button"> <span>[`Add to cart`]</span> </button> </p> </div>{shopStorequickorderPlugin::product_button()} <div class="order-in-cart-block"><a href="/cart" class="button-order-in-cart">Перейти в корзину</a></div> </div> <script> this.form.submit(function() { var f = $(this); $.post(f.attr('action') + '?html=1', f.serialize(), function(response) { if (response.status == 'ok') { if($('#product').hasClass('content_only')) { var cart_total = window.parent.$(".shopping_cart"); } else { var cart_total = $(".shopping_cart"); } var cart_div = f; var clone = $('<div class="cart"></div>').append(f.clone()); if (cart_div.closest('.dialog').length) { clone.insertAfter(cart_div.closest('.dialog')); } else { clone.insertAfter(cart_div); } clone.css({ top: cart_div.offset().top - $(window).scrollTop(), left: cart_div.offset().left, width: cart_div.width() + 'px', height: cart_div.height() + 'px', position: 'fixed', overflow: 'hidden', 'z-index': 9999 }).animate({ top: cart_total.offset().top, left: cart_total.offset().left, width: 0, height: 0 }, 500, function() { $(this).remove(); var quantity_wanted = parseInt($('#quantity_wanted').val()); if (cart_total.find('dt[data-id=' + response.data.item_id + ']').length) { var item = cart_total.find('dt[data-id=' + response.data.item_id + ']'); var quantity = parseInt(item.find('.quantity').text()); item.find('.quantity').text(quantity + quantity_wanted); cart_total.find('.ajax_block_cart_total').html(response.data.total); cart_total.find('.ajax_cart_quantity').text(response.data.count); } else { var info = cart_div.find('.ajax_product_info'); var tpl_data = { url: info.data('url'), name: info.data('name'), img: info.data('img'), price: info.data('price'), quantity: quantity_wanted, id: response.data.item_id }; $('#cart_block_list_item_tmpl').tmpl(tpl_data).appendTo(cart_total.find('.cart_block_list .products')); cart_total.find('.ajax_block_cart_total').html(response.data.total); cart_total.find('.ajax_cart_quantity').html(response.data.count); cart_total.find('.ajax_cart_discount').html(response.data.discount); cart_total.find('.ajax_cart_no_product').addClass('unvisible'); cart_total.find('.ajax_cart_product_txt_s').removeClass('unvisible'); cart_total.find('.ajax_cart_quantity').removeClass('unvisible'); } }); if (cart_div.closest('.dialog').length) { cart_div.closest('.dialog').hide().find('.cart').empty(); $("#hidden").css('display','none'); $(".order-in-cart-block").fadeIn(400); } if (response.data.error) { alert(response.data.error); } } else if (response.status == 'fail') { alert(response.errors); } }, "json"); return false; }); </script> В js коде у Вас в конце лишняя скобка. |
Часовой пояс GMT +3, время: 03:10. |