From 594125a68c5c0d854418d5f3e76fb0e18c23b0a4 Mon Sep 17 00:00:00 2001 From: groguo Date: Wed, 14 Jul 2021 15:37:41 +0000 Subject: [PATCH] Removed hideOutOfStock from AllProducts and realized hide out of stock functionality from SQL query --- .../base/components/product-list/container.js | 2 - .../components/product-list/product-list.js | 48 +++++-------------- .../js/blocks/products/all-products/block.js | 4 -- src/BlockTypes/AllProducts.php | 1 - src/StoreApi/Utilities/ProductQuery.php | 3 ++ 5 files changed, 15 insertions(+), 43 deletions(-) diff --git a/assets/js/base/components/product-list/container.js b/assets/js/base/components/product-list/container.js index 97832f43481..6e6cb55d259 100644 --- a/assets/js/base/components/product-list/container.js +++ b/assets/js/base/components/product-list/container.js @@ -11,7 +11,6 @@ import ProductList from './product-list'; const ProductListContainer = ( { attributes, - hideOutOfStockItems = false, } ) => { const [ currentPage, setPage ] = useState( 1 ); const [ currentSort, setSort ] = useState( attributes.orderby ); @@ -31,7 +30,6 @@ const ProductListContainer = ( { return ( { const { columns, rows } = attributes; const getSortArgs = ( orderName ) => { @@ -57,31 +56,11 @@ const generateQuery = ( { } }; - // eslint-disable-next-line react-hooks/rules-of-hooks - const [ productStockStatus, setProductStockStatus ] = useQueryStateByKey( - 'stock_status', - [] - ); - // @todo Find way to exclude "outofstock" from existing product filters. - if ( hideOutOfStockItems ) { - let newStockStatus = [ 'instock', 'onbackorder' ]; - if ( productStockStatus.length > 0 ) { - newStockStatus = productStockStatus; - if ( productStockStatus.includes( 'outofstock' ) ) { - newStockStatus = productStockStatus.filter( - ( slug ) => slug !== 'outofstock' - ); - } - } - setProductStockStatus( newStockStatus ); - } - return { ...getSortArgs( sortValue ), catalog_visibility: 'catalog', per_page: columns * rows, page: currentPage, - stock_status: productStockStatus, }; }; @@ -135,14 +114,24 @@ const ProductList = ( { onSortChange, sortValue, scrollToTop, - hideOutOfStockItems = false, } ) => { + // These are possible filters. + const [ productAttributes, setProductAttributes ] = useQueryStateByKey( + 'attributes', + [] + ); + const [ productStockStatus, setProductStockStatus ] = useQueryStateByKey( + 'stock_status', + [] + ); + const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' ); + const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' ); + const [ queryState ] = useSynchronizedQueryState( generateQuery( { attributes, sortValue, currentPage, - hideOutOfStockItems, } ) ); const { products, totalProducts, productsLoading } = useStoreProducts( @@ -152,18 +141,6 @@ const ProductList = ( { const totalQuery = extractPaginationAndSortAttributes( queryState ); const { dispatchStoreEvent } = useStoreEvents(); - // These are possible filters. - const [ productAttributes, setProductAttributes ] = useQueryStateByKey( - 'attributes', - [] - ); - const [ productStockStatus, setProductStockStatus ] = useQueryStateByKey( - 'stock_status', - [] - ); - const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' ); - const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' ); - // Only update previous query totals if the query is different and the total number of products is a finite number. const previousQueryTotals = usePrevious( { totalQuery, totalProducts }, @@ -277,7 +254,6 @@ const ProductList = ( { ProductList.propTypes = { attributes: PropTypes.object.isRequired, - hideOutOfStockItems: PropTypes.bool, // From withScrollToTop. scrollToTop: PropTypes.func, }; diff --git a/assets/js/blocks/products/all-products/block.js b/assets/js/blocks/products/all-products/block.js index f1fb4ab8975..9138ecbaff0 100644 --- a/assets/js/blocks/products/all-products/block.js +++ b/assets/js/blocks/products/all-products/block.js @@ -6,7 +6,6 @@ import PropTypes from 'prop-types'; import { ProductListContainer } from '@woocommerce/base-components/product-list'; import { InnerBlockLayoutContextProvider } from '@woocommerce/shared-context'; import { gridBlockPreview } from '@woocommerce/resource-previews'; -import { getSetting } from '@woocommerce/settings'; /** * The All Products Block. @@ -26,8 +25,6 @@ class Block extends Component { return gridBlockPreview; } - const hideOutOfStockItems = getSetting( 'hideOutOfStockItems', false ); - /** * Todo classes * @@ -42,7 +39,6 @@ class Block extends Component { ); diff --git a/src/BlockTypes/AllProducts.php b/src/BlockTypes/AllProducts.php index f3e40d7690f..c973abd279e 100644 --- a/src/BlockTypes/AllProducts.php +++ b/src/BlockTypes/AllProducts.php @@ -27,6 +27,5 @@ protected function enqueue_data( array $attributes = [] ) { $this->asset_data_registry->add( 'min_rows', wc_get_theme_support( 'product_blocks::min_rows', 1 ), true ); $this->asset_data_registry->add( 'max_rows', wc_get_theme_support( 'product_blocks::max_rows', 6 ), true ); $this->asset_data_registry->add( 'default_rows', wc_get_theme_support( 'product_blocks::default_rows', 3 ), true ); - $this->asset_data_registry->add( 'hideOutOfStockItems', 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ), true ); } } diff --git a/src/StoreApi/Utilities/ProductQuery.php b/src/StoreApi/Utilities/ProductQuery.php index 89a87156ee5..e6aab765b1a 100644 --- a/src/StoreApi/Utilities/ProductQuery.php +++ b/src/StoreApi/Utilities/ProductQuery.php @@ -317,6 +317,9 @@ public function add_query_clauses( $args, $wp_query ) { if ( $wp_query->get( 'stock_status' ) ) { $args['join'] = $this->append_product_sorting_table_join( $args['join'] ); $args['where'] .= ' AND wc_product_meta_lookup.stock_status IN ("' . implode( '","', array_map( 'esc_sql', $wp_query->get( 'stock_status' ) ) ) . '")'; + } elseif ( 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) ) { + $args['join'] = $this->append_product_sorting_table_join( $args['join'] ); + $args['where'] .= ' AND wc_product_meta_lookup.stock_status NOT IN ("outofstock")'; } if ( $wp_query->get( 'min_price' ) || $wp_query->get( 'max_price' ) ) {