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

Question

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

I need to make a dynamic onclick change with jQuery: adding: 'border: xx xx xx' to the .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 选择器使 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 脚本文件......？

我没有使用任何缓存。

有什么建议吗？

Answer 1

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

jQuery.Deferred 异常：$ 不是 function 类型错误：$ 不是 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 );