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

Question

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

我需要使用 jQuery 进行动态的点击更改：添加：'border: xx xx xx' 到 .woocommerce-product-gallery__wrapper css class.

我的代码：

挂钩（放置在 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 selector to make onclick change（放置在单品页面）：

    <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 脚本文件...？

我没有使用任何缓存。

有什么建议吗？

Answer 1

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

jQuery.Deferred exception: $ is not a function TypeError: $ is not a function

下面的代码将解决这个问题。 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 );

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

Issue adding jQuery to single product page in WooCommerce

wordpress

jquery

product

woocommerce