diff --git a/imports/plugins/included/product-variant/components/productGrid.js b/imports/plugins/included/product-variant/components/productGrid.js
index 6a3ff706bb..38dce037ae 100644
--- a/imports/plugins/included/product-variant/components/productGrid.js
+++ b/imports/plugins/included/product-variant/components/productGrid.js
@@ -73,8 +73,25 @@ const styles = (theme) => ({
tableBody: {
"& tr:nth-child(odd)": {
backgroundColor: theme.palette.colors.black02
+ },
+ "& td": {
+ borderBottom: "none",
+ letterSpacing: "0.28px",
+ padding: 0,
+ color: theme.palette.colors.coolGrey500
+ },
+ "& td:first-child": {
+ padding: "4px",
+ width: "50px"
+ },
+ "& td:nth-child(2)": {
+ width: "60px"
}
},
+ textNotFound: {
+ textAlign: "right",
+ height: "50px"
+ },
tableHead: {
"& tr th": {
borderBottom: "none",
@@ -192,6 +209,29 @@ class ProductGrid extends Component {
);
}
+ /**
+ * Render the not found component
+ * @access protected
+ * @returns {Node} React node containing the `NotFound` component.
+ */
+ renderNotFound() {
+ const { classes } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
renderProductGridItems() {
const { productMediaById, products } = this.props;
const { classes, ...notClasses } = this.props;
@@ -208,15 +248,7 @@ class ProductGrid extends Component {
));
}
- return (
-
- );
+ return this.renderNotFound();
}
handleDisplayTagSelector = () => {
diff --git a/imports/plugins/included/product-variant/components/products.js b/imports/plugins/included/product-variant/components/products.js
index 41b0cb8cbe..3ba1b85bb0 100644
--- a/imports/plugins/included/product-variant/components/products.js
+++ b/imports/plugins/included/product-variant/components/products.js
@@ -108,33 +108,13 @@ class Products extends Component {
return null;
}
- /**
- * Render the not found component
- * @access protected
- * @returns {Node} React node containing the `NotFound` component.
- */
- renderNotFound() {
- return (
-
- );
- }
-
/**
* Render component
* @access protected
* @returns {Node} React node containing elements that make up the `Products` component.
*/
render() {
- const { isProductsSubscriptionReady, isReady, showNotFound } = this.props;
-
- // Force show the not-found view.
- if (showNotFound) {
- return this.renderNotFound();
- }
+ const { isProductsSubscriptionReady, isReady } = this.props;
if (!isProductsSubscriptionReady || !isReady) {
return (
@@ -142,11 +122,6 @@ class Products extends Component {
);
}
- // Render not-found view if no products are available.
- if (!this.hasProducts) {
- return this.renderNotFound();
- }
-
return (
{this.renderProductGrid()}