时间戳

首页 > 解决方案 > 将模态链接到按钮

ajax - 将模态链接到按钮

问题描述

https://www.fermento24.com - https://www.fermento24.com/collections/all

使用 Shopify 完成的网站。由于在主页上它使用网站完成的标准材料，它会自动链接到它的模态 ajax。

同时，收集页面（第二个链接）是由一个显示过滤器和东西的应用程序生成的。我想做的是将购买按钮链接到此模式弹出窗口，而不是将我带到购物车页面。不知道这个怎么过，是不是应该在模态里做修改呢，还是收藏页模板里做修改呢？

标签： ajaxshopifyliquid

解决方案

您可以尝试下面列出的代码，并且可能需要根据您的主题进行一些更新。

需要注意：商品加入购物车后，您需要检查并创建一个更新迷你购物车的方法。

window.onload = function(){
   // disable the default behavior
   $('.boost-pfs-addtocart-btn').each(function(index, button){
     var $this = $(button);
     $this.closest('form').on('submit', function(e){ 
       e.preventDefault();
     });
   });
   // create new logic once the button clicked
   $(document).on('click', '.boost-pfs-addtocart-btn', function(){
     var form = $(this).closest('form');
     $.post('/cart/add.js', form.serialize(), function(data, status){
       if( status == 'success' ){
         // show popup once added to cart
         var model = $(".ajax-success-modal");
         model.fadeIn(500);
         var item    = form.parents('.boost-pfs-filter-product-item-inner')[0]
         var imgSrc  = $(item).find('.boost-pfs-filter-product-item-main-image').attr('src');
         var pTitle  = $(item).find('.boost-pfs-filter-product-item-title').text();
         var CPrice  = $(item).find('.boost-pfs-filter-product-item-regular-price').text();
         model.find(".ajax-product-image").attr("src", imgSrc);
         model.find(".added-to-wishlist").hide();
         model.find(".added-to-cart").show();
         model.find(".ajax-product-title").text(pTitle);
         model.find(".ajax_price").text(CPrice);
         model.find(".ajax_qty").text(1);
         // updating the cart counter in header
         $.get("/cart.js", function(data){
          $('#cartCount,.ajax_qtyA').text('').text(data.item_count);
          $('.ajax_cartTotal').text(Shopify.formatMoney(data.total_price, window.money_format));
         }, 'json');
       }
     }, 'json');
   });
}

请在任何 JS 文件中或在结束之前将代码</body>放入<script></script>标签中，如果将其放在正文标签之前。

注意：还要确保在代码运行之前加载 jQuery，否则代码会由于依赖 jQuery 库而失败。

推荐阅读