Merge branch 'ultimate-tester-cart-product-image-fix' into dev

progresivo · Oct 13, 2023 · b30fcd0 · b30fcd0
2 parents 60df41c + fcb5ec3
commit b30fcd0
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 67 deletions.
diff --git a/packages/evershop/src/components/common/ProductNoThumbnail.jsx b/packages/evershop/src/components/common/ProductNoThumbnail.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const ProductNoThumbnail = ({ width, height }) => (
+  <svg
+    width={width || 100}
+    height={height || 100}
+    viewBox="0 0 251 276"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M62.2402 34.2864L0.329313 68.5728L0.131725 137.524L0 206.538L62.3061 240.95C96.5546 259.858 124.81 275.363 125.139 275.363C125.468 275.363 142.527 266.035 163.142 254.69C183.691 243.282 211.748 227.841 225.448 220.277L250.278 206.538V191.789V176.978L248.829 177.735C247.973 178.176 219.915 193.617 186.457 212.147C152.933 230.677 125.205 245.677 124.81 245.614C124.349 245.488 102.219 233.387 75.5444 218.639L27.0037 191.853V137.65V83.447L48.9359 71.346C60.9229 64.7282 82.9211 52.6271 97.7401 44.4337C112.493 36.2402 124.876 29.5594 125.139 29.5594C125.402 29.5594 142.593 38.9504 163.339 50.4212L223.801 83.447L233.337 78.0776L250.278 68.5728L223.801 54.1397C202.857 42.2908 125.6 -0.0629802 124.941 4.62725e-05C124.546 4.62725e-05 96.2912 15.4415 62.2402 34.2864Z"
+      fill="#BBBBBB"
+    />
+    <path
+      d="M188.367 102.796C154.514 121.515 126.325 137.019 125.732 137.146C125.073 137.335 108.542 128.511 87.0045 116.662L49.397 95.8632V110.8L49.4628 125.675L86.0166 145.843C106.105 156.936 123.229 166.264 124.085 166.579C125.402 167.02 134.623 162.167 187.445 132.986C221.43 114.141 249.488 98.5734 249.817 98.3213C250.08 98.0691 250.212 91.3253 250.146 83.321L249.949 68.7618L188.367 102.796Z"
+      fill="#BBBBBB"
+    />
+    <path
+      d="M243.362 126.557C239.74 128.511 211.814 143.953 181.254 160.844C150.694 177.735 125.468 191.537 125.139 191.537C124.81 191.537 107.751 182.21 87.1363 170.865L49.7263 150.192L49.5288 164.688C49.397 175.781 49.5946 179.373 50.1874 179.941C51.4388 181.012 124.349 221.16 125.139 221.16C125.798 221.16 248.763 153.406 249.817 152.524C250.08 152.272 250.212 145.528 250.146 137.461L249.949 122.902L243.362 126.557Z"
+      fill="#BBBBBB"
+    />
+  </svg>
+);
+
+export default ProductNoThumbnail;
diff --git a/packages/evershop/src/components/frontStore/catalog/product/list/item/Thumbnail.jsx b/packages/evershop/src/components/frontStore/catalog/product/list/item/Thumbnail.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import '@components/frontStore/catalog/product/list/item/Thumbnail.scss';
-import NoThumbnail from '@components/frontStore/catalog/product/single/NoThumbnail';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function Thumbnail({ url, imageUrl, alt }) {
   return (
@@ -13,7 +13,7 @@ function Thumbnail({ url, imageUrl, alt }) {
       )}
       {!imageUrl && (
         <a href={url}>
-          <NoThumbnail width={100} height={100} />
+          <ProductNoThumbnail width={100} height={100} />
         </a>
       )}
     </div>

diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx b/packages/evershop/src/components/frontStore/checkout/cart/items/Items.jsx
@@ -6,6 +6,7 @@ import { _ } from '@evershop/evershop/src/lib/locale/translate';
 import { ItemOptions } from './ItemOptions';
 import { ItemVariantOptions } from './ItemVariantOptions';
 import './Items.scss';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
   const AppContextDispatch = useAppDispatch();
@@ -54,7 +55,7 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
             <tr key={index}>
               <td>
                 <div className="flex justify-start space-x-1 product-info">
-                  <div className="flex justify-center">
+                  <div className="product-image flex justify-center items-center">
                     {item.thumbnail && (
                       <img
                         className="self-center"
@@ -63,20 +64,7 @@ function Items({ items, setting: { displayCheckoutPriceIncludeTax } }) {
                       />
                     )}
                     {!item.thumbnail && (
-                      <svg
-                        className="self-center"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                        />
-                      </svg>
+                      <ProductNoThumbnail width={40} height={40} />
                     )}
                   </div>
                   <div className="cart-tem-info">

diff --git a/packages/evershop/src/components/frontStore/checkout/cart/items/Items.scss b/packages/evershop/src/components/frontStore/checkout/cart/items/Items.scss
@@ -35,6 +35,11 @@
       }
     }
     .product-info {
+	  .product-image {
+		  background: rgb(246, 246, 246);
+		  min-height: 100px;
+		  min-width: 100px;
+	  }
       @media screen and (max-width: 767px) {
         img {
           max-width: 5rem;

diff --git a/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx b/packages/evershop/src/components/frontStore/checkout/checkout/summary/Items.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import './Items.scss';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function ItemVariantOptions({ options = [] }) {
   if (!Array.isArray(options) || !options || options.length === 0) {
@@ -50,18 +51,7 @@ function Items({ items, displayCheckoutPriceIncludeTax }) {
                       <img src={item.thumbnail} alt={item.productName} />
                     )}
                     {!item.thumbnail && (
-                      <svg
-                        style={{ width: '2rem' }}
-                        fill="currentcolor"
-                        viewBox="0 0 20 20"
-                        focusable="false"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z"
-                        />
-                      </svg>
+                      <ProductNoThumbnail width={100} height={100} />
                     )}
                   </div>
                   <span className="qty">{item.qty}</span>

diff --git a/packages/evershop/src/components/frontStore/checkout/success/summary/items/Items.jsx b/packages/evershop/src/components/frontStore/checkout/success/summary/items/Items.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ItemVariantOptions } from '@components/frontStore/checkout/cart/items/ItemVariantOptions';
 import './Items.scss';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function Items({ items, displayCheckoutPriceIncludeTax }) {
   return (
@@ -18,18 +19,7 @@ function Items({ items, displayCheckoutPriceIncludeTax }) {
                       <img src={item.thumbnail} alt={item.productName} />
                     )}
                     {!item.thumbnail && (
-                      <svg
-                        style={{ width: '2rem' }}
-                        fill="currentcolor"
-                        viewBox="0 0 20 20"
-                        focusable="false"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z"
-                        />
-                      </svg>
+                      <ProductNoThumbnail width={100} height={100} />
                     )}
                   </div>
                   <span className="qty">{item.qty}</span>

diff --git a/packages/evershop/src/components/frontStore/customer/detail/Order.jsx b/packages/evershop/src/components/frontStore/customer/detail/Order.jsx
@@ -1,6 +1,7 @@
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 import PropTypes from 'prop-types';
 import React from 'react';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 export default function Order({ order }) {
   return (
@@ -18,18 +19,7 @@ export default function Order({ order }) {
                   />
                 )}
                 {!item.thumbnail && (
-                  <svg
-                    style={{ width: '2rem' }}
-                    fill="currentcolor"
-                    viewBox="0 0 20 20"
-                    focusable="false"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z"
-                    />
-                  </svg>
+                  <ProductNoThumbnail width={100} height={100} />
                 )}
               </div>
               <div className="order-item-info">

diff --git a/packages/evershop/src/modules/catalog/graphql/types/Product/Image/ProductImage.resolvers.js b/packages/evershop/src/modules/catalog/graphql/types/Product/Image/ProductImage.resolvers.js
@@ -11,24 +11,16 @@ function getUrls(image) {
   const listingVersion = image.replace(/.([^.]*)$/, '-list.$1');
   const thumb = fs.existsSync(path.join(CONSTANTS.MEDIAPATH, thumbVersion))
     ? `/assets${thumbVersion}`
-    : `/assets/theme/frontStore${getConfig(
-        'catalog.product.image.placeHolder'
-      )}`;
+    : null;
   const single = fs.existsSync(path.join(CONSTANTS.MEDIAPATH, singleVersion))
     ? `/assets${singleVersion}`
-    : `/assets/theme/frontStore${getConfig(
-        'catalog.product.image.placeHolder'
-      )}`;
+    : null;
   const listing = fs.existsSync(path.join(CONSTANTS.MEDIAPATH, listingVersion))
     ? `/assets${listingVersion}`
-    : `/assets/theme/frontStore${getConfig(
-        'catalog.product.image.placeHolder'
-      )}`;
+    : null;
   const origin = fs.existsSync(path.join(CONSTANTS.MEDIAPATH, image))
     ? `/assets${image}`
-    : `/assets/theme/frontStore${getConfig(
-        'catalog.product.image.placeHolder'
-      )}`;
+    : null;
   return {
     thumb,
     single,

diff --git a/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx b/packages/evershop/src/modules/catalog/pages/frontStore/productView/Images.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable react/no-array-index-key */
-import NoThumbnail from '@components/frontStore/catalog/product/single/NoThumbnail';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
@@ -20,7 +20,7 @@ function Current({ image }) {
       {image && (
         <img src={image.single} alt={image.alt} className="self-center" />
       )}
-      {!image && <NoThumbnail width={250} height={250} />}
+      {!image && <ProductNoThumbnail width={250} height={250} />}
     </div>
   );
 }