I built a WooCommerce plugin that, among other things, allows a customer to order a sample of the product they are currently viewing. Sometimes this functionality works, sometimes it does not. I am able to see the data come all the way through to the functions.php
, but I cannot figure out why some products add a sample to the cart and others don’t. Before I share the relevant code, keep in mind that the sample is an actual product in the WooCommerce admin area. The sample sku is based upon the product sku.
functions.php
add_action('wp_ajax_order_sample', 'order_sample');
add_action('wp_ajax_nopriv_order_sample', 'order_sample');
function order_sample() {
$cart_item_key = null;
if ((isset($_POST['nonce']) && wp_verify_nonce($_POST['nonce'], 'nonce_custom_atc'))
&& (isset($_POST['product_id']) && $_POST['product_id'] > 0)
&& (isset($_POST['quantity']) && $_POST['quantity'] > 0)
&& (isset($_POST['cost']) && $_POST['cost'] > 0)) {
$cart_item_key = wc()->cart->add_to_cart(
intval($_POST['product_id']),
intval($_POST['quantity']),
0,
array(),
array(
'cost'=>isset($_POST['cost']) ? floatval($_POST['cost']) : '',
'thumbnail_url'=>isset($_POST['thumbnail_url']) ? esc_attr($_POST['thumbnail_url']) : '',
'sku'=>isset($_POST['product_sku']) ? sanitize_text_field($_POST['product_sku']) : '', // we do this to specifically set the sku on the order to the sample sku and NOT the product sku
)
);
}
write_log(create_message('sku: ' . $_POST['sku'])); // lets us confirm that the info came through from the AJAX call
wp_die(isset($cart_item_key) && $cart_item_key ? "Added to cart!" : "Error: not added!");
}
function write_log($message) {
$logger = wc_get_logger();
$logger->debug($message, array('source' => 'visualizer'));
}
function create_message($item) {
return boolval(!empty($item)) ? print_r($item, true) : 'nothing to see here!';
}
visualizer-modal.php
global $product;
$id = trim($product->get_id());
$sku = trim($product->get_sku());
$sample_sku = "";
$product_sku = "";
if (str_starts_with($sku, "S-")) {
$sample_sku = $sku;
$product_sku = str_replace("S-", "", $sku);
} else {
$product_sku = $sku;
$sample_sku = "S-" . $sku;
}
// this lets us make sure that we get the sample sku and the product sku into the right places
$sample_id = trim($GLOBALS['wpdb']->get_results("SELECT `product_id` FROM `wp_wc_product_meta_lookup` WHERE `sku` = '" . $sample_sku . "'")[0]->product_id);
<div class="hidden" id="sample-sku">
<?php echo esc_attr($sample_sku) ?>
</div>
<div class="hidden" id="sample-id">
<?php echo esc_attr($sample_id) ?>
</div>
<div class="hidden" id="thumbnail-url">
<?php echo wp_get_attachment_image_url($cart_thumbnail, 'full') ?>
</div>
js/order-sample.js
document.addEventListener('DOMContentLoaded', () => {
if (typeof wc_params_custom === 'undefined') {
return false;
}
const ORDER_SAMPLE_BUTTON = document.getElementById('order-sample');
const SAMPLE_SKU = document.getElementById('sample-sku').innerHTML.trim();
const SAMPLE_ID = document.getElementById('sample-id').innerHTML.trim();
const CART_THUMBNAIL_URL = document.getElementById('thumbnail-url').innerHTML.trim();
const GOLD_COLOR = '#DEC48D';
const COST = 5;
ORDER_SAMPLE_BUTTON.addEventListener('click', (e) => {
e.preventDefault();
const ORDER = {
action: 'order_sample',
nonce: wc_params_custom.nonce,
product_id: SAMPLE_ID,
product_sku: SAMPLE_SKU,
quantity: 1,
cost: COST.toFixed(2),
thumbnail_url: CART_THUMBNAIL_URL,
};
$.ajax({
type: 'POST',
url: wc_params_custom.ajax_url,
data: ORDER,
success: (response) => {
console.log('response: ', response);
ORDER_SAMPLE_BUTTON.innerHTML = 'Added to Cart!';
ORDER_SAMPLE_BUTTON.style.backgroundColor = GOLD_COLOR;
setTimeout(() => {
location.reload();
}, 1000);
},
error: (error) => {
console.error('error: ', error);
},
});
});
});
I have also checked and double-checked the sample products in the WooCommerce admin area and cannot see any difference in how the non-working samples are setup versus the working samples. All of the same fields are filled out, the same radio buttons clicked, etc. However, something is obviously wrong because the same code will add some samples to the cart, but not others.
Does anybody have any idea of what isn’t quite right here? Thanks for your time!