Add ProductImage to variations autocompleter (https://github.com/woocommerce/woocommerce-admin/pull/832)
This commit is contained in:
parent
2eff88bf4c
commit
1d5364f6a6
|
@ -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,
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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`
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue