Блог

Главная - Вопросы по программированию - Добавить модальное всплывающее окно Ajax на другую кнопку

Добавить модальное всплывающее окно Ajax на другую кнопку

#ajax #shopify

#ajax #Shopify

Вопрос:

https://bpt9hyq9jz7t6wkd-26803830855.shopifypreview.com На главной странице, если вы нажмете на кнопку корзины, появится всплывающее окно корзины, в котором будет указано, какой товар был добавлен, сколько товаров в корзине и т.д. если вы вместо этого перейдете сюда: https://bpt9hyq9jz7t6wkd-26803830855.shopifypreview.com/collections/all
из-за того, что оно создано с помощью приложения для улучшения фильтров, кнопка (как обычный, так и быстрый просмотр) не связана с модальным всплывающим окном. Я пытался разобраться в этом, но, хотя я могу понять Html и CSS, Ajax для меня в новинку. Я понял, что это Ajax, который вызывает модальное поле? Любая помощь будет оценена:

         initAddToCart: function() {
            if (e(".add-cart-btn").length > 0) {
                e(".add-cart-btn").click(function(n) {
                    n.preventDefault();
                    if (e(this).attr("disabled") != "disabled") {
                        var r = e(this).parents(".item-row");
                        var i = e(r).attr("id");
                        i = i.match(/d /g);
                        if (!window.ajax_cart) {
                            e("#cart-form-"   i).submit()
                        } else {
                            var s = e("#cart-form-"   i   " select[name=id]").val();                          
                            if (!s) {
                                s = e("#cart-form-"   i   " input[name=id]").val()
                            }                          
                            var o = e("#cart-form-"   i   " select[name=quantity]").val();
                            if (!o) {
                                o = 1
                            }
                          console.log(o);
                           var a = e(r).find(".featured-image").attr("src");
                           var p = e(r).find(".grid-link__title").text();
                           var amt = e(r).find(".grid-link__meta .product_price .grid-link__org_price span.money").text();                         
                            t.doAjaxAddToCart(s, o, a, p, amt)
                        }
                    }
                    return false
                })
            }
        },
        showLoading: function() {
            e(".loading-modal").show()
        },
        hideLoading: function() {
            e(".loading-modal").hide()
        },
        doAjaxAddToCart: function(n, r, a, p, amt) {
            e.ajax({
                type: "post",
                url: "/cart/add.js",
                data: "quantity="   r   "amp;id="   n,
                dataType: "json",
                beforeSend: function() {
                    t.showLoading()
                },
                success: function(n) {
                    t.hideLoading();                    
                    t.showModal(".ajax-success-modal");
                     e(".ajax-success-modal").find(".ajax-product-image").attr("src", a);
                     e(".ajax-success-modal").find(".added-to-wishlist").hide();
                     e(".ajax-success-modal").find(".added-to-cart").show();
                     e(".ajax-success-modal").find(".ajax-product-title").text(p);
                     e(".ajax-success-modal").find(".ajax_price").text(amt);
                    e(".ajax-success-modal").find(".ajax_qty").text(r);
                  e.ajax({
   type: 'GET',
   dataType: 'json',
   url: '/cart.js',
   success: function(cart){
      e(".ajax-success-modal").find(".ajax_qtyA").text(cart.item_count);
   }
});

Комментарии:

1. хорошо, итак, насколько я понимаю, вы хотите добавить корзину AJAX в быстрый просмотр загруженного приложения и добавить в корзину, верно?

2. Всплывающее окно AJAX, да.

3. Вам нужно отредактировать код JS, чтобы добавить код AJAX, для этого потребуется больше навыков, потому что требуется много редактирования кода в shop.js

4. Значит, это не просто вопрос подключения кнопки к текущему доступному всплывающему окну?

5. Нет, на самом деле структура HTML не совпадает с добавленной приложением, поэтому код темы по умолчанию в этом случае не работает. Вам нужно проверить это в настройках приложения, могут ли быть какие-либо опции для собственной функциональности AJAX cart?