Marketsostenibles.es es uno de los proyectos en los que trabajo, y en los que tienen integrada una solución de marketing automation llamada Connectif.
Sin entrar mucho en detalle, Connectif permite entre otras muchas funcionalidades ofrecer al usuario productos relacionados , que aplicando inteligencia artificial, en principio serán propicios o con alta probabilidad de ser clickados por el usuario.
Ellos ya ofrecen una integración oficial con WordPress, pero en el diseño que ofrecen, no tienen la posibilidad de ofrecer un botón de «Añadir al carrito», así que ha tocado arremangarse y al lío.
Aunque no tenemos dicha opción en Connectif, lo que sí nos permite es añadir javascript, así que llamaremos a una función anadirAlCarro( url ), que se encargará de ello.
Ya tenemos el botón de añadir al carro en connectif, ahora nos toca hacer magia en WordPress.
El planteamiento general será que la función anadirAlCarro() haga una llamada ajax, pasándole la url del producto (ya que desde Connectif no tenemos el ID del producto, pero sí su url). Añadimos nuestro código javascript con wp_head
add_action('wp_head', 'ablancodev_script_add_cart');
function ablancodev_script_add_cart() {
?>
<script>
function anadirAlCarro(p_url) {
var data = {
action: 'woocommerce_ajax_add_to_cart',
product_url: p_url,
product_sku: '',
quantity: 1
};
jQuery.ajax({
type: 'post',
url: wc_add_to_cart_params.ajax_url,
data: data,
success: function (response) {
if (response.error && response.product_url) {
window.location = response.product_url;
return;
} else {
jQuery(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash]);
}
},
});
}
</script>
<?php
}
Teniendo ya la parte de front, vamos al back, y hagamos que el servidor responda a nuestra llamada ajax.
add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
function woocommerce_ajax_add_to_cart() {
$product_id = apply_filters('woocommerce_add_to_cart_product_id', url_to_postid(sanitize_text_field($_POST['product_url'])));
$quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
$passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
$product_status = get_post_status($product_id);
if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity) && 'publish' === $product_status) {
do_action('woocommerce_ajax_added_to_cart', $product_id);
if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
wc_add_to_cart_message(array($product_id => $quantity), true);
}
WC_AJAX :: get_refreshed_fragments();
} else {
$data = array(
'error' => true,
'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
echo wp_send_json($data);
}
wp_die();
}
Y con eso ya tenemos nuestro botón «Añadir al carro» de Connectif 100% funcional en nuestro WooCommerce.
🚀 👨🏻💻 🤟🏻