我想在WordPress中使用AJAX在点击功能上更改我的图像。 这是我的代码:
JS:
jQuery(".swatchinput label").click(function(){
var mycolor = jQuery(this).attr("data-option");
var postid = jQuery(".single-product .product.type-product").attr("data-id");
jQuery.ajax({
cache: false,
timeout: 8000,
url: php_array.admin_ajax,
type: "POST",
data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),
beforeSend: function() {
},
success: function(response){
var myimageresponse = jQuery( response );
jQuery( '.product-image a img' ).attr('src', myimageresponse);
},
error: function( jqXHR, textStatus, errorThrown ){
console.log( 'The following error occured: ' + textStatus, errorThrown );
},
complete: function( jqXHR, textStatus ){
}
});
});
这是我在PHP / WordPress中的功能:
add_action('wp_ajax_theme_post_vimage','theme_post_vimage_init');
add_action( 'wp_ajax_nopriv_theme_post_vimage', 'theme_post_vimage_init' );
function theme_post_vimage_init() { ?>
<?php
global $post, $product, $woocommerce;
$postiID = $_POST['postvalue'];
$colorname = $_POST['colorimg'];
$product = new WC_Product_Variable( $postiID );
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
if($variation['attributes']['attribute_pa_color'] == $colorname) :
$myimageurl = $variation['image']['url'];
echo $myimageurl;
endif;
}
?>
<?php }
当我点击我的颜色时,此错误会显示在我的浏览器控制台中:
Uncaught Error: Syntax error, unrecognized expression: http://samsonite.stuntmen.ae/wp-content/uploads/2017/05/PROD_COL_73353_1726_WHEEL-HANDLE-FULL.jpg
答案 0 :(得分:2)
将行data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),
替换为
data: { action:'theme_post_vimage', colorimg: mycolor, postvalue: postid},
在你的ajax输出中你通过使用&#39;?&gt;来放置不必要的空白区域。
更重要的是你的成功函数是什么jQuery( response )
?仅使用response
。
答案 1 :(得分:2)
jQuery( response );
错了...为什么不直接使用response
?
success: function(response){
jQuery( '.product-image a img' ).attr('src', response);
},
此外,我建议你将实现改为这样的。
<强> PHP 强>
function theme_post_vimage_init() {
$postiID = $_POST['postvalue'];
$colorname = $_POST['colorimg'];
$product = wc_get_product( $postiID );
$variations = $product->get_available_variations();
$return = array(
'status' => 'failed',
);
foreach ( $variations as $variation ) {
if($variation['attributes']['attribute_pa_color'] == $colorname) :
$return = array(
'status' => 'success',
'url' => $variation['image']['url'],
);
endif;
}
wp_send_json($return);
}
<强>的jQuery 强>
jQuery(".swatchinput label").click(function(){
var mycolor = jQuery(this).attr("data-option");
var postid = jQuery(".single-product .product.type-product").attr("data-id");
jQuery.ajax({
cache: false,
timeout: 8000,
url: php_array.admin_ajax,
type: "POST",
data: ({ action:'theme_post_vimage', colorimg: mycolor, postvalue: postid}),
beforeSend: function() {
},
success: function(response){
if ( response.status === 'success' ) {
jQuery( '.product-image a img' ).attr('src', response.url);
}
// you can also do something for response.status === 'failed'
},
error: function( jqXHR, textStatus, errorThrown ){
console.log( 'The following error occured: ' + textStatus, errorThrown );
},
complete: function( jqXHR, textStatus ){
}
});
});
寻找success
我做了更改。