Add/34000 attribute select control #34744

louwie17 · 2022-09-20T14:07:07Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR enables the select2 typeahead field for the attribute dropdown and the terms dropdown within the individual product attributes.
Currently I added a threshold for the attribute dropdown of 20, if more it will show the async typeahead field. This is similar to what is done for the category dropdown in the product list page. I could remove this condition if we don't think this is necessary.

Kapture.2022-09-20.at.10.54.33.mp4

Partially address #34000

How to test the changes in this Pull Request:

Load and build this PR and finish the onboarding, adding several products and attributes (an easy way is to import the sample products CSV).
Either edit an existing product or create a new one and select the Attributes tab
Assume you still have attributes less then 20, the normal dropdown should show.
Add the color attribute and add some terms. Notice how the terms are loaded on the fly and filtered as you type.
Now either add more then 20 different attributes (would probably have to be done manually) or add this filter to your mu-plugin -> add_filter( 'woocommerce_attribute_taxonomy_filter_threshold', function() { return 1; } )
It should now show a Add custom attribute button and a typeahead dropdown in the Attributes tab.
Test out the Add custom attribute button, it should add the custom item.
Now search for existing attributes and upon selection it should add the attribute to the product
Try searching for your previously selected item, it should be disabled now.
Now remove the attribute, the dropdown should not show it as disabled anymore.
Saving the attributes and persisting by refreshing the page should work the same as usual.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

louwie17 · 2022-09-20T14:08:03Z

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js

 		}
+	}
+
+	$('select.wc-attribute-search').on('select2:select', function (e) {


callback for when user selects something from the dropdown field.

louwie17 · 2022-09-20T14:08:32Z

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js

+	});
+
+	// Add rows.
+	$( 'button.add_attribute' ).on( 'click', function () {


Same callback as before just moved down and using the add_attribute function

louwie17 · 2022-09-20T14:09:35Z

plugins/woocommerce/includes/admin/class-wc-admin-assets.php

+					'search_customers_nonce'          => wp_create_nonce( 'search-customers' ),
+					'search_categories_nonce'         => wp_create_nonce( 'search-categories' ),
+					'search_taxonomy_terms_nonce'     => wp_create_nonce( 'search-taxonomy-terms' ),
+					'search_product_attributes_nonce' => wp_create_nonce( 'search-product-attributes' ),


I only added the above two, but had to re-indent everything to re-align correctly.

github-actions · 2022-09-20T14:11:33Z

New hook, template, or database changes in this PR

New hooks:

file: /plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-attributes.php
- NOTICE - 'woocommerce_attribute_taxonomy_filter_threshold' introduced in 7.0.0: Filter for the attribute taxonomy filter dropdown threshold.

louwie17 · 2022-09-20T14:14:15Z

plugins/woocommerce/includes/class-wc-ajax.php

+		$found_product_categories = array();
+
+		foreach ( $attributes as $attribute_obj ) {
+			if ( ! $search_text || false !== stripos( $attribute_obj->attribute_label, $search_text ) ) {


I end up resorting to filtering by getting the entire list (which is cached) and just sorting through this on the back-end.

I browsed around for a while and it turns out we do not have any logic in place to search for attribute taxonomies. We seem to always retrieve the entire list and cache this. To keep things simple I did it this way.
But I would foresee us needing this in the future and also adding this functionality to the Woo REST api (as it currently doesn't support this either).

I could still add this as part of this issue, but it felled slightly out of scope, as it will require the addition of a whole new attribute taxonomy Query class.

github-actions · 2022-09-20T14:32:06Z

Test Results Summary

Commit SHA: 38fce14

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	153	0	0	2	0	155	0m 40s
E2E Tests	187	0	0	2	0	189	17m 53s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

octaedro · 2022-09-29T19:28:41Z

plugins/woocommerce/client/legacy/js/admin/wc-enhanced-select.js

+					var minimumInputLength = 3;
+
+					if ( $( this ).data( 'minimum_input_length' ) !== undefined ) {
+						minimumInputLength = $( this ).data( 'minimum_input_length' );
+					}


Can we use here a ternary operator as the line before?
It would look like this:

var minimumInputLength = $( this ).data( 'minimum_input_length' ) !== undefined ? $( this ).data( 'minimum_input_length' ) : 3;

Another good option would be:

var minimumInputLength = $( this ).data( 'minimum_input_length' ) ?? 3;

Fixed as part of: 9cf74f8

octaedro

You did a really nice job here @louwie17! This is testing well on my end and the code looks mostly good. I just left a small comment.
As a side note, we should probably do something similar with the attribute terms since it seems like we show a maximum of 6.

louwie17 · 2022-10-03T17:49:26Z

@octaedro thanks for the review, I addressed your feedback.

As a side note, we should probably do something similar with the attribute terms since it seems like we show a maximum of 6.

I am kinda confused with what you mean here? Where are we showing a maximum of 6? the page size is 50.

octaedro

Thank you @louwie17 for the changes. LGTM 🚀

…ropdowns

…ilters

octaedro

🚀

github-actions · 2022-10-06T17:28:05Z

Hi @louwie17, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

florianmastacan · 2023-02-24T20:51:32Z

@octaedro thanks for the review, I addressed your feedback.

As a side note, we should probably do something similar with the attribute terms since it seems like we show a maximum of 6.

I am kinda confused with what you mean here? Where are we showing a maximum of 6? the page size is 50.

Hi there, may I ask why the page size was limited to 50? We have a client who is using 186 colours containing the "green" word and thus when he tries to add attributes to a product in order to build the relevant variations he cannot get to the items from positions 51+ and above...

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Sep 20, 2022

louwie17 commented Sep 20, 2022

View reviewed changes

github-actions bot added the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Sep 20, 2022

louwie17 commented Sep 20, 2022

View reviewed changes

louwie17 requested a review from a team September 20, 2022 14:14

louwie17 mentioned this pull request Sep 20, 2022

[Enhancement]: Load categories and attributes on demand in product editor #34000

Closed

octaedro requested review from octaedro and removed request for a team September 29, 2022 15:07

octaedro reviewed Sep 29, 2022

View reviewed changes

louwie17 force-pushed the add/34000_attribute_select_control branch from 41c7902 to 9cf74f8 Compare October 3, 2022 17:46

louwie17 requested a review from octaedro October 3, 2022 17:49

octaedro previously approved these changes Oct 5, 2022

View reviewed changes

louwie17 added 9 commits October 6, 2022 08:57

Replace preloaded attribute and term dropdowns with async typeahead d…

31528c0

…ropdowns

Revert accidenatal change.

ef4f7f5

Add condition to show the old dropdown in certain situations

356f598

Add changelog

81382ec

Use ternary condition

4a66a09

Move mininumInputLength down to follow the same format as the other f…

0005479

…ilters

Fix the minimum input length

8fd01c1

Update the select all to work with the async terms field

0945ccb

Make sure empty attributes are shown and suppress query filter

84fa056

louwie17 dismissed octaedro’s stale review via 84fa056 October 6, 2022 11:57

louwie17 force-pushed the add/34000_attribute_select_control branch from 59054b1 to 84fa056 Compare October 6, 2022 11:57

Fix code sniff error

38fce14

octaedro approved these changes Oct 6, 2022

View reviewed changes

louwie17 merged commit f28a467 into trunk Oct 6, 2022

louwie17 deleted the add/34000_attribute_select_control branch October 6, 2022 17:27

github-actions bot added this to the 7.1.0 milestone Oct 6, 2022

louwie17 added the release: add testing instructions PRs that have not had testing instructions added to the wiki. [auto] label Oct 14, 2022

github-actions bot mentioned this pull request Nov 10, 2022

Test WooCommerce 7.1 UVLabs/location-picker-at-checkout-for-woocommerce#55

Closed

This was referenced Dec 16, 2022

Since 7.1.0 attributes values dropdown display in Product Data > Attribute in order originally added in spite of Order By setting #35639

Closed

Make sure attribute term dropdown adheres to sort order setting #36047

Merged

Add/34000 attribute select control #34744

Add/34000 attribute select control #34744

Uh oh!

Conversation

louwie17 commented Sep 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

louwie17 Sep 20, 2022

Choose a reason for hiding this comment

Uh oh!

louwie17 Sep 20, 2022

Choose a reason for hiding this comment

Uh oh!

louwie17 Sep 20, 2022

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 20, 2022

New hook, template, or database changes in this PR

New hooks:

Uh oh!

louwie17 Sep 20, 2022

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

octaedro Sep 29, 2022

Choose a reason for hiding this comment

Uh oh!

louwie17 Oct 3, 2022

Choose a reason for hiding this comment

Uh oh!

octaedro left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louwie17 commented Oct 3, 2022

Uh oh!

octaedro left a comment

Choose a reason for hiding this comment

Uh oh!

octaedro left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 6, 2022 • edited by louwie17 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

florianmastacan commented Feb 24, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

louwie17 commented Sep 20, 2022 •

edited

Loading

github-actions bot commented Sep 20, 2022 •

edited

Loading

octaedro left a comment •

edited

Loading

github-actions bot commented Oct 6, 2022 •

edited by louwie17

Loading