将模态链接到按钮

Question

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

使用 Shopify 完成的网站。由于在主页上它使用网站完成的标准 material，它会自动 link 编辑到它的模态 ajax。

同时，collection 页面（第二个 link）是由一个应用程序生成的，该应用程序包含过滤器和内容。我想要做的是 link 购买按钮到这个模式弹出窗口，而不是让我进入购物车页面。我不知道如何完成这个，我应该在模式中还是在 collection 页面模板中进行修改？

Answer 1

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

需要注意：您需要检查并创建一种在将产品添加到购物车后更新迷你购物车的方法。

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> 结尾之前，如果将其放在 body 标签之前，请将其包装在 <script></script> 标签中。

注意： 还要确保 jQuery 是代码运行前的负载，否则代码会失败，因为依赖于 jQuery 库。

将模态链接到按钮

Linking modal to a button

ajax

liquid

shopify