P1 345 woo shopping data in google preview

[marijnyoast]

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/search-metadata-previews] When product data like rating, number of reviews, price or availability is provided, it is now shown in the Google Preview.

Relevant technical choices:

Test instructions

This PR can be tested by following these steps:

• Please follow the test instructions in the corresponding branch / version of WP SEO for WooCommerce

Impact check

• This PR affects the following parts of the plugin, which may require extra testing:
  • Search metadata preview

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Fixes P1-345

[igorschoester]

CR 🏗️

[igorschoester]

CR 🏗️

[igorschoester]

A couple of things:

• You can not compare an object to an empty different object. It compares the memory address and thus will never be the same. You can work around this by checking if there are any values for example.
• You can early return on the shoppingData check so you don't have to indent for all the rest. This improves readability of your code.
• You are missing a return for when the shoppingData is empty, that will be undefined instead of null in your current code. That is not a problem in behavior, but it is not correct.

Suggested change

	if ( shoppingData !== {} ) {
	if ( mode === MODE_DESKTOP ) {
	return (
	<ProductDataDesktop
	shoppingData={ shoppingData }
	/>
	);
	}
	if ( mode === MODE_MOBILE ) {
	return (
	<ProductDataMobile
	shoppingData={ shoppingData }
	/>
	);
	}
	return null;
	if ( Object.values( shoppingData ).length === 0 ) {
	return null;
	}
	if ( mode === MODE_DESKTOP ) {
	return (
	<ProductDataDesktop
	shoppingData={ shoppingData }
	/>
	);
	}
	if ( mode === MODE_MOBILE ) {
	return (
	<ProductDataMobile
	shoppingData={ shoppingData }
	/>
	);
	}
	return null;

[igorschoester]

CR 👍

[JoseeWouters]

Acceptance 👍