Is there a way to insert the variation_image into the slick slider and the thumbs?
I am attaching the code for AJAX:
function wordpress_ajax_select_variation()
{
$status = "failed";
$stock = "out_of_stock";
$selected_variation = array();
$variation_id = 0;
$variation_price = 0;
$variation_image = '';
$product_id = absint($_POST['product_id']);
$_post_variations = $_POST['variations'];
$post_variations = explode("|", $_post_variations);
foreach ($post_variations as $var) {
list($att_name, $att_id) = explode("=", $var);
$att_name = str_replace("attribute_", "", $att_name);
$selected_variation[$att_name] = $att_id;
}
$product = wc_get_product($product_id);
$variation_ids = $product->get_children();
foreach ($variation_ids as $variation_id) {
$variation = new WC_Product_Variation($variation_id);
$attributes = $variation->get_attributes();
$check = 0;
foreach ($attributes as $k => $v) {
if ($selected_variation[$k] != $v) {
$check++;
}
}
if ($check == 0) {
$stock = $variation->get_stock_status();
$variation_image = $variation->get_image('full');
$variation_price = $variation->get_price_html();
$status = "done";
break;
}
}
echo wp_send_json(array("status" => $status, "variation_id" => $variation_id, "variation_price" => $variation_price, "stock" => $stock, "variation_image" => $variation_image));
wp_die();
}
add_action('wp_ajax_wordpress_ajax_select_variation', 'wordpress_ajax_select_variation');
add_action('wp_ajax_nopriv_wordpress_ajax_select_variation', 'wordpress_ajax_select_variation');
This code helps me to get a variation id through AJAX, with the help of which I generate the price, image, etc.
This is my AJAX Javascript to get the variation_image that I need to display in my template:
function handleAttributeSelection() {
//Init variations
let variations = [];
let product_id = $('form.cubestheme-add-to-cart-form')
.find("input[name='product_id']")
.val();
let product_type = $('form.cubestheme-add-to-cart-form')
.find("input[name='product_type']")
.val();
if (product_type == 'variable') {
let selectedVariation = true;
$('.attribute_box').each(function () {
let att_id = $(this).find('.single-term.active').data('attr-id');
if (typeof att_id !== 'undefined') {
let att_name = $(this).find('.single-term.active').data('attr-name');
let att_slug = $(this).find('.single-term.active').data('attr-slug');
variations.push(att_name + '=' + att_slug);
} else {
selectedVariation = false;
}
});
if (!selectedVariation) {
//$("#warning-modal").fadeIn();
return;
} else {
//Get Variation ID
let data = {
action: 'wordpress_ajax_select_variation',
product_id: product_id,
variations: variations.join('|'),
};
$.ajax({
type: 'post',
url: '/wp-admin/admin-ajax.php',
data: data,
beforeSend: function (response) {
$('.se-pre-con').fadeIn('fast');
},
complete: function (response) {
$('.se-pre-con').fadeOut('show');
},
success: function (response) {
if (response.error & response.product_url) {
window.location = response.product_url;
return;
} else {
if (response.stock == 'instock') {
$('form.cubestheme-add-to-cart-form')
.find("input[name='variation_id']")
.val(response.variation_id);
} else {
$('#warning-modal h4').html(
'Sorry, this product is unavailable. Please choose a different combination.'
);
$('#warning-modal').fadeIn();
return;
}
$('.single-product-small-wrapper .slick-track').append(`
<div class="small-img-wrapper">
<figure class="img-placeholder">
${response.variation_image}
</figure>
</div>
`);
$('.single-product-big-wrapper .slick-track').append(`
<div class="big-img-wrapper mouseover">
<figure class="img-placeholder">
${response.variation_image}
</figure>
</div>
`);
$('.single-product-small-wrapper').slick('refresh');
$('.single-product-big-wrapper').slick('refresh');
}
},
});
}
} else {
form.submit();
}
}
I’ve tried everything, including appending the slider and refreshing it, I don’t even know what I’ve tried and I’ve never been able to do what I want. And I want the image in the thumb and the large image to be displayed, and when I change the variation (if that variation does not have an image), I will not be shown the image from the last variation.
This is my PHP partial where i display product images with thumbs:
<?php
/**
* Single Product Image
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerceTemplates
* @version 7.8.0
*/
defined('ABSPATH') || exit;
// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if (!function_exists('wc_get_gallery_image_html')) {
return;
}
global $product;
$product_id = $product->get_id();
$mainImage = $product->get_image_id();
$galleryImages = $product->get_gallery_image_ids();
?>
<div class="single-product-slider">
<?php
if (!empty($mainImage)) {
?>
<div class="single-product-small-wrapper"><!-- small img start -->
<?php
if (empty($product->get_image_id())) :
?>
<div class="small-img-wrapper">
<figure class="img-placeholder">
<?php echo wc_placeholder_img('full'); ?>
</figure>
</div>
<?php
else :
?>
<div class="small-img-wrapper">
<figure class="img-placeholder">
<img src="<?php echo !empty($variation_image) ? $variation_image : wp_get_attachment_image_url($mainImage, 'full') ?>" alt="image">
</figure>
</div>
<?php
endif;
?>
<?php
if (!empty($galleryImages && $product->get_image_id())) {
foreach ($galleryImages as $attachment_id) {
?>
<div class="small-img-wrapper">
<figure class="img-placeholder">
<?php echo wp_get_attachment_image($attachment_id, "full"); ?>
</figure>
</div>
<?php
}
}
?>
</div>
<!-- small img end -->
<div class="single-product-big-wrapper zoom-wrapper"><!-- big img start -->
<div class="big-img-wrapper mouseover">
<?php
if (empty($product->get_image_id())) :
?>
<figure class="img-placeholder">
<?php
echo wc_placeholder_img('full');
?>
</figure>
<?php
else :
?>
<figure class="img-placeholder">
<img src="<?php echo !empty($variation_image) ? $variation_image : wp_get_attachment_image_url($mainImage, 'full') ?>" alt="">
</figure>
<?php
endif;
?>
</div>
<?php
if ($galleryImages && $product->get_image_id()) {
foreach ($galleryImages as $attachment_id) {
?>
<div class="big-img-wrapper mouseover">
<figure class="img-placeholder">
<?php echo wp_get_attachment_image($attachment_id, "full"); ?>
</figure>
</div>
<?php }
} ?>
</div>
<!-- big img end -->
<?php
}
?>
</div>