Add marketplace theme discover section

[bgrgicak]

Changes proposed in this Pull Request:

This PR is part of #40159

This PR adds support for theme sections on the Discover tab.
It also displays the new section on no-results for search theme.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Prep

To test the request from your local WooCommerce core wp-env environment to your local WCCOM environment, you first need a running instance of WCCOM.

Make sure you have the latest version of trunk in your WCCOM environment. Set up a group of three or four theme products in the Featured Products ad admin. (See the test steps in 18244-gh-Automattic/woocommerce.com for more details.) Check that the group is being returned from the featured endpoint https://woocommerce.test/wp-json/wccom-extensions/2.0/featured?country=US. (You'll probably need to flush the transient that caches this on your WCCOM with wp cache flush.)

Add a mu-plugin to wp-env (as suggested in p6JqRr-aWb), and put these two filters in it:

add_filter( 'http_request_host_is_external', '__return_true' );

add_filter( 'http_request_args', function ( $r ) {
	$r['reject_unsafe_urls'] = false;
	$r['sslverify']          = false;
	$r['timeout']            = 60;

	return $r;
} );

Get the ID of wp-env's WordPress container.

Link the container to woocommerce.test in the Docker network.

docker network connect woocommerce.test <container ID>

Test

1. Until we get WCCOM API support, we need to point the API to local WCCOM with data available in the API
2. Replace this line with:

$featured = false;

3. Replace these lines with:

$raw_featured = wp_safe_remote_get(
				'https://woocommerce.test/wp-json/wccom-extensions/2.0/featured' . $parameter_string . '&no_cache=true',

4. Open the Discover page
5. Confirm that the Our favorite ecommerce themes. section is loaded
6. Cards in this section should be displayed as themes

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

Add support for themes to marketplace discovery and use it in the theme no-result section.

[github-actions]

Hi @Dan-Q, @andfinally,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Hi @Dan-Q, @andfinally,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[andfinally]

Hm, I'm getting cURL error 7: Failed to connect to woocommerce.test port 443: Connection refused from the API when I try to load the page. These are my testing changes.

Index: plugins/woocommerce/includes/admin/class-wc-admin-addons.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-addons.php b/plugins/woocommerce/includes/admin/class-wc-admin-addons.php
--- a/plugins/woocommerce/includes/admin/class-wc-admin-addons.php	(revision 48e9566c2de2db0be72d175758aeceeb4e352add)
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-addons.php	(date 1695815757702)
@@ -80,7 +80,7 @@
 	 */
 	public static function fetch_featured() {
 		$locale   = get_user_locale();
-		$featured = self::get_locale_data_from_transient( 'wc_addons_featured', $locale );
+		$featured = false; // self::get_locale_data_from_transient( 'wc_addons_featured', $locale );
 
 		if ( false === $featured ) {
 			$headers = array();
@@ -97,8 +97,8 @@
 			}
 
 			// Important: WCCOM Extensions API v2.0 is used.
-			$raw_featured = wp_safe_remote_get(
-				'https://woocommerce.com/wp-json/wccom-extensions/2.0/featured' . $parameter_string,
+			$raw_featured = wp_remote_get(
+			'https://woocommerce.test/wp-json/wccom-extensions/2.0/featured' . $parameter_string . '&no_cache=true',
 				array(
 					'headers'    => $headers,
 					'user-agent' => 'WooCommerce/' . WC()->version . '; ' . get_bloginfo( 'url' ),

The URL should be as shown, because $parameter_string starts with ?. For some reason, even with this change I'm getting Connection refused. The URL is accessible directly in my browser. 😞

[andfinally]

I haven't been able to test against my local API, but the code looks good to me.

[bgrgicak]

@andfinally could this be a networking issue?
Can you try connecting your Woo container (wordpress-1) to WC.test?

docker network connect woocommerce.test <CONTAINER-ID>

[andfinally]

Thanks Bero, that didn't help.

• Also tested with Local by Flywheel environment – no luck there either.
• On debugging, it turned out the URL was being rejected because it appeared to be local. So I added this to my mu-plugin to allow it.

add_filter( 'http_request_host_is_external', '__return_true' );

• However, now I'm getting cURL error 60: SSL certificate problem: unable to get local issuer certificate. The certificate authority is present in my browser, but I suppose it needs to be present on the container. 😭

---

LATER

Eureka! I just needed this filter as well. Adding to the test steps.

add_filter( 'http_request_args', function ( $r ) {
	$r['reject_unsafe_urls'] = false;
	$r['sslverify']          = false;
	$r['timeout']            = 60;

	return $r;
} );

[andfinally]

Woooh this has been a marathon! Finally worked out that I needed both the filters and the Docker network connection for this to work. Also that you need some featured themes set up in the ad system. I've updated the test steps. I'm now seeing the new themes group as expected.

I made a tiny CSS change in 3d4841a to address this funny-looking centering when there aren't enough items to fill a row:

[github-actions]

Test Results Summary

Commit SHA: 486706a

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 53s
E2E Tests	211	0	1	7	0	219	24m 26s

⚠️ Warning

Please address the following issues prior to merging this pull request:

• FAILED/BROKEN TESTS. There were failed and/or broken API and E2E tests.

---

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.

[bgrgicak]

has has been a marathon! Finally worked out that I needed both the filters and the Docker network connection for this to work.

Thanks for taking the time @andfinally and sorry about the instructions. I probably configured some of these things over time and forgot about it.

[Dan-Q]

Sorry I didn't see your comment earlier @andfinally: as soon as I saw it, I thought "that's a certificate problem"! Glad you sussed it!

[Dan-Q]

Tested using local WCCOM; looks good!