时间戳

首页 > 解决方案 > 在 WooCommerce 中将 jQuery 添加到单个产品页面的问题

jquery - 在 WooCommerce 中将 jQuery 添加到单个产品页面的问题

问题描述

我在 WooCommerce 单一产品页面上加载 jQuery 时遇到问题。

我需要使用 jQuery 进行动态 onclick 更改：添加：'border: xx xx xx'到.woocommerce-product-gallery__wrappercss 类。

我的代码：

钩子（放置在 WooCommerce functions.php 中）：

add_action( 'woocommerce_after_single_product_summary', 'jquery_script_after_single_product_summary' );
function jquery_script_after_single_product_summary() {
    ?>
    <script type="text/javascript">
    //**START CHANGE FRAME PRODUCT PAGE**//
                    jQuery(document).ready(function() {
                  $("select.frame").change(function() {
                    var changeframe = $(this).children("option:selected").val();
                    $('.woocommerce-product-gallery__wrapper').css('border', changeframe);
                  });
                });
    //END CHANGE FRAME PRODUCT PAGE**//
    </script>
    <?php
}

html选择器进行onclick更改（放置在单个产品页面上）：

    <select class="frame">
<option value="">Choose frame</option>
<option value="">Without frame</option>
            <option value="20px solid black">Red</option>
            <option value="20px solid blue">Blue</option>
            <option value="20px solid purple">Yellow</option>
        </select>

<br><br><br>
<figure class="woocommerce-product-gallery__wrapper"><img src="image.jpg"></div>

可能是什么问题？它适用于在线模拟，但不适用于 WordPress (WooCommerce)。我是否将脚本放置在错误的位置，或者可能没有加载正确的 jQuery 脚本文件......？

我没有使用任何缓存。

有什么建议吗？

标签： jquerywordpresswoocommerceproduct

解决方案

如果您使用现有代码在浏览器中查看控制台选项卡，您将看到以下错误消息

jQuery.Deferred 异常：$ 不是函数 TypeError：$ 不是函数

下面的代码将解决这个问题。HTML（下拉列表）的显示可以通过模板覆盖或通过所需的挂钩应用到页面上的任何位置。

在这个答案中，我将两者合二为一

function action_woocommerce_after_single_product_summary() {
    // Display drop-down list
    echo '<select class="frame">
            <option value="">Choose frame</option>
            <option value="">Without frame</option>
            <option value="20px solid red">Red</option>
            <option value="20px solid blue">Blue</option>
            <option value="20px solid yellow">Yellow</option>
          </select>';
    ?>
    <script>
    jQuery(document).ready(function($) {
        // On change
        $( 'select.frame' ).change( function() {
            var changeframe = $(this).children( 'option:selected' ).val();
            
            // DEBUG
            console.log(changeframe);
            
            // Add border
            $( '.woocommerce-product-gallery__wrapper' ).css( 'border', changeframe );
        });          
    });
    </script>
    <?php
}
add_action( 'woocommerce_after_single_product_summary', 'action_woocommerce_after_single_product_summary', 10, 0 );

推荐阅读