Code hiển thị biến thể sản phẩm trong trang shop Woocommerce

Trong hướng dẫn này, tôi sẽ giúp bạn có thể tạo danh sách biến thể trên trang cửa hàng (hoặc bất kỳ trang sản phẩm lưu trữ nào).

Ngoài ra, code này đảm bảo rằng ajax add to cart button cũng hoạt động tốt khi bạn tùy chọn biến thể.

Dưới đây là kết quả chúng ta cần hướng đến:

Bạn sử dụng đoạn code dưới đây ném vào file function.php của theme

<?php
add_filter( 'woocommerce_loop_add_to_cart_link', 'hwp_select_variations_shop_page', 99, 2 );

function hwp_select_variations_shop_page( $add_to_cart, $product ) {

	// do nothing in case it is not a variable product
	if( ! $product->is_type( 'variable' ) ) {
		return $add_to_cart;
	}

	// if there is no variations available for purchase, also do nothing
	if( ! $variations = $product->get_available_variations() ) {
		return $add_to_cart;
	}

	ob_start();
	?>

	<div class="hwp_variations" data-product_variations="<?php echo wc_esc_json( wp_json_encode( $variations ) ) ?>">

		<?php 
			foreach( $product->get_attributes() as $attribute_name => $attribute ) :
				?>
					<div class="rudr-variation-select value">
						<?php
							wc_dropdown_variation_attribute_options(
								array(
									'show_option_none' => 'Select ' . strtolower( wc_attribute_label( $attribute_name ) ),
									'options' => $attribute->get_slugs(),
									'attribute' => $attribute_name,
									'product' => $product
								)
							);
						?>
					</div>
				<?php 
			endforeach;
		?>

		<a href="" data-product_id="" class="disabled button add_to_cart_button">Add to cart</a>

	</div>
	<?php
	
	return ob_get_clean();

}

<?php

add_filter( 'woocommerce_loop_add_to_cart_link', 'hwp_select_variations_shop_page', 99, 2 );

function hwp_select_variations_shop_page( $add_to_cart, $product ) {

// do nothing in case it is not a variable product

if( ! $product->is_type( 'variable' ) ) {

return $add_to_cart;

}

// if there is no variations available for purchase, also do nothing

if( ! $variations = $product->get_available_variations() ) {

return $add_to_cart;

}

ob_start();

<?php

foreach( $product->get_attributes() as $attribute_name => $attribute ) :

<?php

wc_dropdown_variation_attribute_options(

array(

'show_option_none' => 'Select ' . strtolower( wc_attribute_label( $attribute_name ) ),

'options' => $attribute->get_slugs(),

'attribute' => $attribute_name,

'product' => $product

)

);

</div>

<?php

endforeach;

</div>

<?php

return ob_get_clean();

}

Ở đây:

Tôi đang lưu trữ toàn bộ giá trị bên trong một thuộc tính HTML giống $product->get_available_variations()như WooC Commerce thực hiện trên các trang sản phẩm riêng lẻ, nhưng bạn có thể đơn giản hóa điều đó vì chúng tôi chỉ cần các thuộc tính attributes, và đối tượng.variation_idprice_htmlimage
ob_start()và ob_end_clean()cần thiết vì chúng ta phải trả về (không in) giá trị cho woocommerce_loop_add_to_cart_linkfilter hook nhưng hàm wc_dropdown_variation_attribute_options()được sử dụng bên trong luôn in danh sách thả xuống.
Và cuối cùng nhưng không kém phần quan trọng, bạn có thể thấy nút thêm vào giỏ hàng AJAX không có data-product_idthuộc tính và không có ajax_add_to_cart

Để trơn chu còn đoạn js nữa :))

jQuery( function( $ ) {

	$( '.hwp-variation-select' ).find( 'select[data-attribute_name]' ).change( function() {

		const el = $(this);
		const variationsWrapper = el.closest( '.hwp_variations' );
		const availableVariations = JSON.parse( variationsWrapper.attr( 'data-product_variations' ) );
		const productWrapper = variationsWrapper.closest( 'li.product' );
		const button = productWrapper.find( 'a.add_to_cart_button' );

		// our matching variation will be stored in this object
		let matchingVariation = {};

		// now we can loop through all the variations and check them against the selected attributes
		for( let i = 0; i < availableVariations.length; i++ ) {
			// assign it as a matching variation in any case
			matchingVariation = availableVariations[i];

			// let's check all the attributes of this variation
			for( const [ attr_name, attr_value ] of Object.entries( availableVariations[i].attributes ) ) {
	  		// if any of attributes doesn't match
				if( attr_value !== variationsWrapper.find( '[name="' + attr_name + '"]' ).val() ) {
					matchingVariation = {};
				}
			}

			// exit the loop if we have a matching variation
			if( Object.keys( matchingVariation ).length !== 0 ) {
				break;
			}

		}

		// add a variation ID to the Add to cart button
		if( matchingVariation.variation_id ) {
			button.removeClass( 'disabled' ).addClass( 'ajax_add_to_cart' );
			button.attr( 'data-product_id', matchingVariation.variation_id );
		}
		// update product price
		if( matchingVariation.price_html ) {
			productWrapper.find( 'span.price').replaceWith( matchingVariation.price_html );
		}
		// update product image
		if( matchingVariation.image ) {
			productWrapper.find( 'img' ).attr( {
				src: matchingVariation.image.src,
				srcset: matchingVariation.image.srcset,
				width: matchingVariation.image.src_w,
				height: matchingVariation.image.src_h
			} );
		}

	} );

} );