宏伟的弹出窗口和 Woo 添加到购物车变化答案

【问题标题】：Magnific popup and Woo add to cart variation宏伟的弹出窗口和 Woo 添加到购物车变化
【发布时间】：2018-10-31 14:23:17
【问题描述】：

我正在使用放大弹出窗口来显示图像，在该弹出窗口中，您可以在将图像添加到弹出窗口中的购物车之前选择变体。

这里是magnific js的回调部分。在其中我调用 Woo 添加到购物车变体 js 文件。每次加载图像时，我都必须调用此 js 文件，以便正确显示 woo 变化。在页面上加载该文件一次不适用于弹出窗口。

type: "image",
            callbacks: {
                imageLoadComplete: function() {

                    jQuery.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

                },
             } .... etc

因此，每次您点击查看下一张照片时，都会加载 add-to-cart-variation.min.js。有时该文件需要一些时间才能完全加载，因为它有许多其他调用来运行其他 php 函数。如果您多次单击下一个箭头以非常快地查看其他照片，这就是问题开始的地方，因为每次单击下一个时都会加载 getScript 文件，并在一段时间后冻结所有内容。

即使我在 imageLoadComplete 区域添加 woo js 而不是使用 getScript，我仍然有这个问题，所以不是 getScript 导致问题，而是加载 js 后运行的附加函数。使用 settimeout 也不是一种选择，因为无论如何它仍然会运行。

我怎样才能阻止这个问题的发生？

【问题讨论】：

标签： javascript php woocommerce magnific-popup

【解决方案1】：

想通了。也适用于移动设备，至少在 ios 上。

所以我将禁用的类添加到按钮中，以便赋予它禁用颜色的外观。然后，当您将鼠标悬停在包含变体的 div 上时，我加载了 woo 脚本，然后我删除了悬停 div 上的类，因此不会发生更多的悬停动作，包括 woo 脚本。在 mac os 上的 chrome、safari 和 firefox 以及移动 ios 上的 safari 上运行良好。

type: "image",
     callbacks: {
        imageLoadComplete: function() {

         if(jQuery('.ft-gallery-variations-text').hasClass('ft-gallery-js-load')) {
            jQuery('.single_add_to_cart_button').addClass('disabled');
           }

         jQuery( ".ft-gallery-js-load" ).hover(function() {
            if(jQuery('.ft-gallery-variations-text').hasClass('ft-gallery-js-load')){
               jQuery.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
               jQuery('.ft-gallery-variations-text').removeClass('ft-gallery-js-load');
              }
         });

      },
   } .... etc

【讨论】：