Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Orderby selector

This commit is contained in:
claudiulodro 2018-03-15 10:20:43 -07:00
parent fdcd9107ed
commit 24059f109d
2 changed files with 121 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
plugins/woocommerce-blocks/assets/js/products-block.js
View File

@ -100,9 +100,8 @@ var _wp$components = wp.components,
Dropdown = _wp$components.Dropdown,
Dashicon = _wp$components.Dashicon,
RangeControl = _wp$components.RangeControl,
Tooltip = _wp$components.Tooltip;
var ToggleControl = InspectorControls.ToggleControl,
SelectControl = InspectorControls.SelectControl;
Tooltip = _wp$components.Tooltip,
SelectControl = _wp$components.SelectControl;
/**
@ -134,16 +133,6 @@ var PRODUCTS_BLOCK_DISPLAY_SETTINGS = {
description: '',
value: 'featured'
},
'best_sellers': {
title: __('Best sellers'),
description: '',
value: 'best_sellers'
},
'best_rated': {
title: __('Best rated'),
description: '',
value: 'best_rated'
},
'on_sale': {
title: __('On sale'),
description: '',
@ -431,7 +420,7 @@ var ProductsBlockSettingsEditor = function (_React$Component3) {
var heading = null;
if (this.state.display) {
var group_options = ['featured', 'best_sellers', 'best_rated', 'on_sale', 'attribute'];
var group_options = ['featured', 'on_sale', 'attribute'];
var should_group_expand = group_options.includes(this.state.display) ? this.state.display : '';
var menu_link = wp.element.createElement(
'button',
@ -571,6 +560,7 @@ var ProductsBlockPreview = withAPIData(function (_ref) {
rows = attributes.rows,
display = attributes.display,
display_setting = attributes.display_setting,
orderby = attributes.orderby,
block_layout = attributes.block_layout;
@ -591,14 +581,19 @@ var ProductsBlockPreview = withAPIData(function (_ref) {
}
} else if ('featured' === display) {
query.featured = 1;
} else if ('best_sellers' === display) {
// @todo Not possible in the API yet.
} else if ('best_rated' === display) {
// @todo Not possible in the API yet.
} else if ('on_sale' === display) {
query.on_sale = 1;
}
// @todo Add support for orderby by sales, rating, and random to the API.
if ('specific' !== display && ('title' === orderby || 'date' === orderby)) {
query.orderby = orderby;
if ('title' === orderby) {
query.order = 'asc';
}
}
var query_string = '?';
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
@ -702,6 +697,14 @@ registerBlockType('woocommerce/products', {
default: []
},
/**
* How to order the products: 'date', 'popularity', 'rand', 'rating', 'title'.
*/
orderby: {
type: 'string',
default: 'date'
},
/**
* Whether the block is in edit or preview mode.
*/
@ -725,6 +728,7 @@ registerBlockType('woocommerce/products', {
columns = attributes.columns,
display = attributes.display,
display_setting = attributes.display_setting,
orderby = attributes.orderby,
edit_mode = attributes.edit_mode;
/**
@ -749,6 +753,35 @@ registerBlockType('woocommerce/products', {
});
}
// Orderby settings don't make sense for specific-selected products display.
var orderControl = null;
if ('specific' !== display) {
orderControl = wp.element.createElement(SelectControl, {
key: 'query-panel-select',
label: __('Products Order'),
value: orderby,
options: [{
label: __('Newness'),
value: 'date'
}, {
label: __('Title'),
value: 'title'
}, {
label: __('Sales'),
value: 'popularity'
}, {
label: __('Rating'),
value: 'rating'
}, {
label: __('Random'),
value: 'rand'
}],
onChange: function onChange(value) {
return setAttributes({ orderby: value });
}
});
}
return wp.element.createElement(
InspectorControls,
{ key: 'inspector' },
@ -766,7 +799,8 @@ registerBlockType('woocommerce/products', {
},
min: 1,
max: 6
})
}),
orderControl
);
};
@ -866,7 +900,8 @@ registerBlockType('woocommerce/products', {
rows = _props$attributes.rows,
columns = _props$attributes.columns,
display = _props$attributes.display,
display_setting = _props$attributes.display_setting;
display_setting = _props$attributes.display_setting,
orderby = _props$attributes.orderby;
var shortcode_atts = new Map();
@ -886,10 +921,6 @@ registerBlockType('woocommerce/products', {
shortcode_atts.set('category', display_setting.join(','));
} else if ('featured' === display) {
shortcode_atts.set('visibility', 'featured');
} else if ('best_sellers' === display) {
shortcode_atts.set('best_selling', '1');
} else if ('best_rated' === display) {
shortcode_atts.set('orderby', 'rating');
} else if ('on_sale' === display) {
shortcode_atts.set('on_sale', '1');
} else if ('attribute' === display) {
@ -902,6 +933,10 @@ registerBlockType('woocommerce/products', {
}
}
if ('specific' !== display) {
shortcode_atts.set('orderby', orderby);
}
// Build the shortcode string out of the set shortcode attributes.
var shortcode = '[products';
var _iteratorNormalCompletion2 = true;

86
plugins/woocommerce-blocks/assets/js/products-block.jsx
View File

@ -1,8 +1,7 @@
const { __ } = wp.i18n;
const { RawHTML } = wp.element;
const { registerBlockType, InspectorControls, BlockControls } = wp.blocks;
const { Toolbar, withAPIData, Dropdown, Dashicon, RangeControl, Tooltip } = wp.components;
const { ToggleControl, SelectControl } = InspectorControls;
const { Toolbar, withAPIData, Dropdown, Dashicon, RangeControl, Tooltip, SelectControl } = wp.components;
import { ProductsSpecificSelect } from './views/specific-select.jsx';
import { ProductsCategorySelect } from './views/category-select.jsx';
@ -37,16 +36,6 @@ const PRODUCTS_BLOCK_DISPLAY_SETTINGS = {
description: '',
value: 'featured',
},
'best_sellers' : {
title: __( 'Best sellers' ),
description: '',
value: 'best_sellers',
},
'best_rated' : {
title: __( 'Best rated' ),
description: '',
value: 'best_rated',
},
'on_sale' : {
title: __( 'On sale' ),
description: '',
@ -259,7 +248,7 @@ class ProductsBlockSettingsEditor extends React.Component {
let heading = null;
if ( this.state.display ) {
const group_options = [ 'featured', 'best_sellers', 'best_rated', 'on_sale', 'attribute' ];
const group_options = [ 'featured', 'on_sale', 'attribute' ];
let should_group_expand = group_options.includes( this.state.display ) ? this.state.display : '';
let menu_link = <button type="button" className="wc-products-settings-heading__change-button button-link" onClick={ () => { this.setState( { menu_visible: ! this.state.menu_visible, expanded_group: should_group_expand } ) } }>{ __( 'Display different products' ) }</button>;
@ -340,7 +329,7 @@ class ProductPreview extends React.Component {
*/
const ProductsBlockPreview = withAPIData( ( { attributes } ) => {
const { columns, rows, display, display_setting, block_layout } = attributes;
const { columns, rows, display, display_setting, orderby, block_layout } = attributes;
let query = {
per_page: ( 'list' === block_layout ) ? rows : rows * columns,
@ -359,14 +348,19 @@ const ProductsBlockPreview = withAPIData( ( { attributes } ) => {
}
} else if ( 'featured' === display ) {
query.featured = 1;
} else if ( 'best_sellers' === display ) {
// @todo Not possible in the API yet.
} else if ( 'best_rated' === display ) {
// @todo Not possible in the API yet.
} else if ( 'on_sale' === display ) {
query.on_sale = 1;
}
// @todo Add support for orderby by sales, rating, and random to the API.
if ( 'specific' !== display && ( 'title' === orderby || 'date' === orderby ) ) {
query.orderby = orderby;
if ( 'title' === orderby ) {
query.order = 'asc';
}
}
let query_string = '?';
for ( const key of Object.keys( query ) ) {
query_string += key + '=' + query[ key ] + '&';
@ -447,6 +441,14 @@ registerBlockType( 'woocommerce/products', {
default: [],
},
/**
* How to order the products: 'date', 'popularity', 'rand', 'rating', 'title'.
*/
orderby: {
type: 'string',
default: 'date',
},
/**
* Whether the block is in edit or preview mode.
*/
@ -461,7 +463,7 @@ registerBlockType( 'woocommerce/products', {
*/
edit( props ) {
const { attributes, className, focus, setAttributes, setFocus } = props;
const { block_layout, rows, columns, display, display_setting, edit_mode } = attributes;
const { block_layout, rows, columns, display, display_setting, orderby, edit_mode } = attributes;
/**
* Get the components for the sidebar settings area that is rendered while focused on a Products block.
@ -484,6 +486,41 @@ registerBlockType( 'woocommerce/products', {
);
}
// Orderby settings don't make sense for specific-selected products display.
let orderControl = null;
if ( 'specific' !== display ) {
orderControl = (
<SelectControl
key="query-panel-select"
label={ __( 'Products Order' ) }
value={ orderby }
options={ [
{
label: __( 'Newness' ),
value: 'date',
},
{
label: __( 'Title' ),
value: 'title',
},
{
label: __( 'Sales' ),
value: 'popularity',
},
{
label: __( 'Rating' ),
value: 'rating',
},
{
label: __( 'Random' ),
value: 'rand',
},
] }
onChange={ ( value ) => setAttributes( { orderby: value } ) }
/>
);
}
return (
<InspectorControls key="inspector">
<h3>{ __( 'Layout' ) }</h3>
@ -495,6 +532,7 @@ registerBlockType( 'woocommerce/products', {
min={ 1 }
max={ 6 }
/>
{ orderControl }
</InspectorControls>
);
};
@ -590,7 +628,7 @@ registerBlockType( 'woocommerce/products', {
* @return string
*/
save( props ) {
const { block_layout, rows, columns, display, display_setting } = props.attributes;
const { block_layout, rows, columns, display, display_setting, orderby } = props.attributes;
let shortcode_atts = new Map();
shortcode_atts.set( 'limit', 'grid' === block_layout ? rows * columns : rows );
@ -609,10 +647,6 @@ registerBlockType( 'woocommerce/products', {
shortcode_atts.set( 'category', display_setting.join( ',' ) );
} else if ( 'featured' === display ) {
shortcode_atts.set( 'visibility', 'featured' );
} else if ( 'best_sellers' === display ) {
shortcode_atts.set( 'best_selling', '1' );
} else if ( 'best_rated' === display ) {
shortcode_atts.set( 'orderby', 'rating' );
} else if ( 'on_sale' === display ) {
shortcode_atts.set( 'on_sale', '1' );
} else if ( 'attribute' === display ) {
@ -625,6 +659,10 @@ registerBlockType( 'woocommerce/products', {
}
}
if ( 'specific' !== display ) {
shortcode_atts.set( 'orderby', orderby );
}
// Build the shortcode string out of the set shortcode attributes.
let shortcode = '[products';
for ( let [key, value] of shortcode_atts ) {