Code tạo sản phẩm mua chung mua kèm woocommerce

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();
}