Code tạo sản phẩm mua chung mua kèm woocommerce
Yêu cầu ACF Custom field pro
Bước 1: Tạo field để chọn trong admin sản phẩm
add_action( 'acf/include_fields', function() {
if ( ! function_exists( 'acf_add_local_field_group' ) ) {
return;
}
acf_add_local_field_group( array(
'key' => 'group_64229ccad549e',
'title' => 'Thông tin sản phẩm mua kèm',
'fields' => array(
array(
'key' => 'field_642d283256264',
'label' => 'Sản phẩm mua kèm',
'name' => 'upsell_products',
'aria-label' => '',
'type' => 'relationship',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'post_type' => array(
0 => 'product',
),
'post_status' => array(
0 => 'publish',
),
'taxonomy' => '',
'filters' => array(
0 => 'search',
),
'return_format' => 'object',
'min' => '',
'max' => 6,
'elements' => array(
0 => 'featured_image',
),
'bidirectional_target' => array(
),
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'product',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
'show_in_rest' => 0,
) );
} );
Kết quả::
Bước 2: Code hiển thị sản phẩm trong single page sản phẩm
<?php
$select_upsells = get_field('upsell_products', get_the_ID() );
if ( $select_upsells ) {
?>
<div class="page-block">
<div class="page-block-heading">
<span>Mua kèm - Xài chung - Giảm thêm</span>
</div>
<div class="page-block-content">
<?php
echo '<div class="row large-columns-5 medium-columns-4 small-columns-2 row-small ">';
?>
<div class="col main-product">
<div class="col-inner">
<a href="<?php echo get_the_permalink(); ?>" aria-label="<?php echo esc_attr( $product->get_title() ); ?>">
<?php
echo get_the_post_thumbnail($product->get_id(), 'single-post-thumbnail', array( 'class' => 'center' ));
?>
</a>
<div class="product-title">
<a href="<?php echo get_permalink( $product->get_id() ) ?>"><?php echo get_the_title($product->get_id()) ?></a>
</div>
<div class="product-price">
<?php echo $product->get_price_html() ?>
</div>
</div>
</div>
<?php
$total = $product->get_price();
$discount = $product->is_on_sale() ? $product->get_regular_price() - $product->get_sale_price() : 0 ;
foreach( $select_upsells as $post ):
$product1 = wc_get_product( $post );
$discount1 = $product1->is_on_sale() ? $product1->get_regular_price() - $product1->get_sale_price() : 0 ;
?>
<div class="col add-more-product">
<div class="col-inner">
<a href="<?php echo get_the_permalink(); ?>" aria-label="<?php echo esc_attr( $product1->get_title() ); ?>">
<?php
echo get_the_post_thumbnail($product1->get_id(), 'single-post-thumbnail', array( 'class' => 'center' ));
?>
</a>
<div class="product-title">
<input class="select_product_mores"
data-price="<?php echo $product1->get_price()?>"
data-discount="<?php echo $discount1 ?>"
id="product-<?php echo $product1->get_id()?>"
type="checkbox" name="select_product_mores" value="<?php echo $product1->get_id() ?>">
<label for="product-<?php echo $product1->get_id()?>">
<?php echo get_the_title($product1->get_id()) ?>
</label>
</div>
<div class="product-price">
<?php echo $product1->get_price_html() ?>
</div>
</div>
</div>
<?php
endforeach;
?>
<div class="col">
<div class="col-inner end-col-buy-more">
<p>
Tổng cộng: <span data-init-price="<?php echo $total ?>" id="buy-more-total"><?php echo number_format($total) ?></span> đ<br/>
Tiết kiệm: <span data-init-discount="<?php echo $discount ?>" id="buy-more-discount"><?php echo number_format($discount) ?></span> đ
</p>
<button id="btn-buy-more" type="button" disabled class="button round primary">Chọn mua</button>
</div>
</div>
<?php
echo '</div>';
wp_reset_postdata();
?>
</div>
</div>
<script type="text/javascript">
jQuery(function(){
jQuery('input.select_product_mores').on('change', function(e){
e.preventDefault();
var init_price = jQuery('#buy-more-total').data('init-price');
var init_discount = jQuery('#buy-more-discount').data('init-discount');
console.log(init_price);
console.log(init_discount);
jQuery('input.select_product_mores:checked').each( function(index, item){
init_price += jQuery(item).data('price');
init_discount += jQuery(item).data('discount');
});
jQuery('#buy-more-total').text( Number(init_price).toLocaleString('vi') );
jQuery('#buy-more-discount').text( Number(init_discount).toLocaleString('vi') );
var more_ids = jQuery('input.select_product_mores:checked').map( function() { return this.value } ).get();
if( more_ids.length > 0 ){
jQuery('#btn-buy-more').prop('disabled', false);
}else{
jQuery('#btn-buy-more').prop('disabled', true);
}
})
jQuery('#btn-buy-more').on('click', function(e){
e.preventDefault();
var $thisbutton = jQuery(this);
var more_ids = jQuery('input.select_product_mores:checked').map( function() { return this.value } ).get();
if( more_ids.length > 0 ){
jQuery.ajax({
type : "post",
url: '<?php echo admin_url('admin-ajax.php');?>',
data: {
'action' : 'add_more_product_cart',
'product_ids' : more_ids
},
beforeSend: function(){
$thisbutton.removeClass('added').addClass('loading');
},
success: function(response) {
$thisbutton.removeClass('added').removeClass('loading');
jQuery(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
},
})
}
})
})
</script>
<?php
}
?>
Code Ajax thêm vào giỏ
<?php
add_action('wp_ajax_add_more_product_cart', 'func_add_more_product_cart');
add_action('wp_ajax_nopriv_add_more_product_cart', 'func_add_more_product_cart');
function func_add_more_product_cart() {
$product_ids = $_POST['product_ids'];
$quantity = 1;
if( is_array($product_ids) ){
foreach( $product_ids as $product_id ) {
$item_keys[] = WC()->cart->add_to_cart($product_id, $quantity);
}
WC_AJAX::get_refreshed_fragments();
}
$data = array(
'error' => true,
);
echo wp_send_json($data);
wp_die();
}
