时间戳

首页 > 解决方案 > 华丽的弹出窗口和 Woo 添加到购物车变化

javascript - 华丽的弹出窗口和 Woo 添加到购物车变化

问题描述

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

这里是壮丽的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 也不是一种选择，因为无论如何它仍然会运行。

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

标签： javascriptphpwoocommercemagnific-popup

解决方案

想通了。也适用于移动设备，至少在 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

推荐阅读