[Cart/checkout blocks]Mix and Match compatibility could use disabled quantity inputs

[helgatheviking]

Is your feature request related to a problem? Please describe.

Mix and Match establishes a parent/child relationship between a "pack" and the products that are included in that pack. And since there's usually a fixed quantity restriction on the number of products that can be in the pack, the selected child products do not have the ability to change quantities in the cart, but it's still important to show the quantity.

So far, I've handled this the way Product Bundles does... by setting the quantity limits to have the min = max = current quantity.

With a little styling to make that look less like an input this works out ok:

However, it's still an input and you can click or tab into focus... but you can't actually make a change... which isn't great UX.

Describe the solution you'd like

What I'd like is some way to set that input to disabled. Then it's not clickable, while still displaying the quantity. Here's the current logic for whether it's disabled Perhaps this could be adjusted so that if not editable, it shows the disabled input?

Ideally, I would also like to display the quantity in a disabled input in the case that a child item is sold individually (which would currently be hidden)... however this is fairly rare so not critical. Is there a downside to showing a "1" for an item that is sold individually?

[tarhi-saad]

Hi @helgatheviking! Thank you for reaching out and suggesting new features and improvements to the Woo Blocks plugin! 🙌

What I'd like is some way to set that input to disabled. Then it's not clickable, while still displaying the quantity. Here's the current logic for whether it's disabled Perhaps this could be adjusted so that if not editable, it shows the disabled input?

Ideally, I would also like to display the quantity in a disabled input in the case that a child item is sold individually (which would currently be hidden)... however this is fairly rare so not critical. Is there a downside to showing a "1" for an item that is sold individually?

We currently support removing the quantity selector if we want to disable the item's Qty using the woocommerce_store_api_product_quantity_editable hook. Code example:

add_filter( 'woocommerce_store_api_product_quantity_editable', function( $quantity, $product, $cart_item )  {
	return false;
}, 10, 3 );

Result:

See this PR #5406 for more details!

We don't plan to show disabled item quantities to avoid confusing shoppers. In some contexts they will not understand why it's disabled and may wonder "Why can't I increase the number of this item?".

However, it's still an input and you can click or tab into focus... but you can't actually make a change... which isn't great UX.

To expand on your current solution, to prevent the input click you can use this CSS property pointer-events: none;. And to prevent the focus state using tab, you can set the following attribute to the input in question: <input tabindex="-1" .../>

I hope this answered your questions! I'll close this issue, but feel free to comment on it or open a new issue if you have other requests.

[helgatheviking]

Hi @tarhi-saad 👋

We currently support removing the quantity selector
We don't plan to show disabled item quantities to avoid confusing shoppers

Sure, I get this makes sense for a simple product. I guess for sold individually stuff you can assume the quantity is 1? Though if you had 2 Beanies and hide the quantity how would anyone know there were 2?

For the selections in a Mix and Match box, it's critical to show the quantity that was selected as part of the box. Say you build a 6 pack box of wine and picked 3 red wines and 3 white wines. Then you go to the cart and it only says Red Wine and White Wine with no indication of how many you picked of each? That would be confusing.

However, the quantity of the Red and While Wines can't be edited independently in the cart (because of box validation rules.. still need 6 total) so the quantity input should still be disabled in this case. Alternatively, it might be sufficient to print the quantity as text (that's actually how I do it in the PHP cart).

I have done some serious working around to get the styling I showed above, but it's more than a little janky and could use a better approach... hence this issue. It's currently a regular input but the min/max are tweaked to be whatever the value is, so you can't change it. The pointer events style rule could help a bit, thanks! Not sure how I could add the tab index since the input is rendered by the blocks code. Plus then could screenreaders read it at all?

There's also the possibility of doing something like this:

I just don't know if that's better than the current which visually shows each selected child product as a line item in the cart (which is on par with the php cart approach)

Anyway, I hope the additional context makes it clear why I still need to show the quantity (but can't allow it to be edited)

[tarhi-saad]

Hello, @helgatheviking! Thank you for your thorough explanation! 🙌 We are aware of this constraint. We do not intend to expand our extensibility APIs with this use case at this time. However, things may change in the future, so your feedback is valuable to us and will be noted. I updated the labels on this issue to make it easier to find in the future.

On the other hand, there is a proper solution to this problem using our APIs. The end result is as follows:

First step

Let's start by removing the quantity selectors of the products included in the pack by using the woocommerce_store_api_product_quantity_editable hook (see docs). Here is the code I tested against your plugin:

add_filter( 'woocommerce_store_api_product_quantity_editable', function( $quantity, $product, $cart_item )  {
	if ( !isset( $cart_item["mnm_child_id"] ) ) return true; // Remove the "quantity selector" only for product children
	
	return false;
}, 10, 3 );

Second step

Use one of our available filters to update the Cart Line Items. Code example:

const appendQuantityToItemName = ( context, cartItem ) => {
	const { child_item_data } = cartItem.mix_and_match;

	if ( ! child_item_data ) return context; // Update name only for product children

	const { quantity } = child_item_data; // You should add the "quantity" attribute to the "child_item_data" in your plugin

	return `${ context } x ${ quantity }`;
};

__experimentalRegisterCheckoutFilters( 'mix-and-match', {
	itemName: appendQuantityToItemName,
} );

Please let me know if you have any questions! 🙌