Add ProductImage to variations autocompleter (https://github.com/woocommerce/woocommerce-admin/pull/832)

This commit is contained in:
Albert Juhé Lluveras 2018-11-13 09:40:17 -06:00 committed by GitHub
parent 2eff88bf4c
commit 1d5364f6a6
5 changed files with 42 additions and 6 deletions

View File

@ -5,6 +5,7 @@
*/ */
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { get } from 'lodash';
/** /**
* Internal dependencies * Internal dependencies
@ -12,14 +13,15 @@ import PropTypes from 'prop-types';
import './style.scss'; import './style.scss';
/** /**
* Use `ProductImage` to display a product's featured image. If no image can be found, a placeholder matching the front-end image * Use `ProductImage` to display a product's or variation's featured image.
* If no image can be found, a placeholder matching the front-end image
* placeholder will be displayed. * placeholder will be displayed.
* *
* @return { object } - * @return { object } -
*/ */
const ProductImage = ( { product, alt, width, height, className, ...props } ) => { const ProductImage = ( { product, alt, width, height, className, ...props } ) => {
// The first returned image from the API is the featured/product image. // The first returned image from the API is the featured/product image.
const productImage = product && product.images && product.images[ 0 ]; const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const src = ( productImage && productImage.src ) || false; const src = ( productImage && productImage.src ) || false;
const altText = alt || ( productImage && productImage.alt ) || ''; const altText = alt || ( productImage && productImage.alt ) || '';
@ -53,8 +55,10 @@ ProductImage.propTypes = {
*/ */
className: PropTypes.string, className: PropTypes.string,
/** /**
* Product object. The image to display will be pulled from `product.images`. * Product or variation object. The image to display will be pulled from
* `product.images` or `variation.image`.
* See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties * See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties
* and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties
*/ */
product: PropTypes.object, product: PropTypes.object,
/** /**

View File

@ -40,6 +40,16 @@ exports[`ProductImage should render a product image 1`] = `
/> />
`; `;
exports[`ProductImage should render a variations image 1`] = `
<img
alt=""
className="woocommerce-product-image"
height={60}
src="https://i.cloudup.com/pt4DjwRB84-3000x3000.png"
width={60}
/>
`;
exports[`ProductImage should render the passed alt prop 1`] = ` exports[`ProductImage should render the passed alt prop 1`] = `
<img <img
alt="testing" alt="testing"

View File

@ -61,6 +61,17 @@ describe( 'ProductImage', () => {
expect( image ).toMatchSnapshot(); expect( image ).toMatchSnapshot();
} ); } );
test( 'should render a variations image', () => {
const variation = {
name: 'Test Variation',
image: {
src: 'https://i.cloudup.com/pt4DjwRB84-3000x3000.png',
},
};
const image = shallow( <ProductImage product={ variation } /> );
expect( image ).toMatchSnapshot();
} );
test( 'should render a placeholder image if no product images are found', () => { test( 'should render a placeholder image if no product images are found', () => {
global.wcSettings.wcAssetUrl = 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/'; global.wcSettings.wcAssetUrl = 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/';
const product = { const product = {

View File

@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
* Internal dependencies * Internal dependencies
*/ */
import { computeSuggestionMatch } from './utils'; import { computeSuggestionMatch } from './utils';
import ProductImage from 'components/product-image';
import { stringifyQuery, getQuery } from '@woocommerce/navigation'; import { stringifyQuery, getQuery } from '@woocommerce/navigation';
import { NAMESPACE } from 'store/constants'; import { NAMESPACE } from 'store/constants';
@ -57,7 +58,14 @@ export default {
getOptionLabel( variation, query ) { getOptionLabel( variation, query ) {
const match = computeSuggestionMatch( getVariationName( variation ), query ) || {}; const match = computeSuggestionMatch( getVariationName( variation ), query ) || {};
return [ return [
// @TODO: make VariationsImage, modify ProductImage, or leave as is? <ProductImage
key="thumbnail"
className="woocommerce-search__result-thumbnail"
product={ variation }
width={ 18 }
height={ 18 }
alt=""
/>,
<span <span
key="name" key="name"
className="woocommerce-search__result-name" className="woocommerce-search__result-name"

View File

@ -1,7 +1,8 @@
`ProductImage` (component) `ProductImage` (component)
========================== ==========================
Use `ProductImage` to display a product's featured image. If no image can be found, a placeholder matching the front-end image Use `ProductImage` to display a product's or variation's featured image.
If no image can be found, a placeholder matching the front-end image
placeholder will be displayed. placeholder will be displayed.
@ -35,8 +36,10 @@ Additional CSS classes.
- Type: Object - Type: Object
- Default: null - Default: null
Product object. The image to display will be pulled from `product.images`. Product or variation object. The image to display will be pulled from
`product.images` or `variation.image`.
See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties
and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties
### `alt` ### `alt`