[英]Issue adding jQuery to single product page in WooCommerce
I have an issue loading jQuery on the WooCommerce single product page.我在 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. I need to make a dynamic onclick change with jQuery: adding: 'border: xx xx xx'
to the .woocommerce-product-gallery__wrapper
css class.
My code:我的代码:
Hook (placed in WooCommerce functions.php):挂钩(放置在 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 (placed on the single product page): 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>
What could be the issue?可能是什么问题? It works on online simulations but not in WordPress (WooCommerce).它适用于在线模拟,但不适用于 WordPress (WooCommerce)。 Am I placing the script in the wrong place or perhaps not loading a correct jQuery script file...?我是否将脚本放置在错误的位置,或者可能没有加载正确的 jQuery 脚本文件......?
I'm not using any Cache.我没有使用任何缓存。
Any advice?有什么建议吗?
If you view the console tab in your browser with your existing code, you will see the following error message如果您使用现有代码在浏览器中查看控制台选项卡,您将看到以下错误消息
jQuery.Deferred exception: $ is not a function TypeError: $ is not a function jQuery.Deferred 异常:$ 不是 function 类型错误:$ 不是 function
The code below will solve that problem.下面的代码将解决这个问题。 The display of the HTML (drop-down list) can be applied anywhere on the page via template overrides or via the desired hook. HTML(下拉列表)的显示可以通过模板覆盖或通过所需的挂钩应用到页面上的任何位置。
In this answer I have combined both in one在这个答案中,我将两者合二为一
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 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.