Merge pull request #56 from contentstack/shopify-add-oxygen-workflow-…

…ww7p resolved safari specifc issues
contentstack · Apr 12, 2024 · 2a565b1 · 2a565b1
2 parents aecb49e + 70e5cd0
commit 2a565b1
Show file tree

Hide file tree

Showing 8 changed files with 7,420 additions and 14,483 deletions.
diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -144,12 +144,16 @@ function RecommendedProducts({
     <div>
       <div className="home-page-banner">
         <div className="container">
-          <h5 className="page-banner-heading">
-            {cmsData?.banner?.banner_heading}
-          </h5>
-          <h1 className="page-banner-content bodyCss">
-            {cmsData?.banner?.banner_title}
-          </h1>
+          {cmsData?.banner?.banner_heading && (
+            <h5 className="page-banner-heading">
+              {cmsData?.banner?.banner_heading}
+            </h5>
+          )}
+          {cmsData?.banner?.banner_title && (
+            <h1 className="page-banner-content bodyCss">
+              {cmsData?.banner?.banner_title}
+            </h1>
+          )}
           {cmsData?.banner?.banner_description ? (
             <div
               className="banner-description"
@@ -269,7 +273,7 @@ function RecommendedProducts({
                                     ''
                                   )}
 
-                                  {priceOff > 0 ? (
+                                  {priceOff && priceOff > 0 ? (
                                     <p className="comparePrice">
                                       (${priceOff.toFixed(2)} OFF)
                                     </p>
@@ -323,7 +327,7 @@ function RecommendedProducts({
                                 newarrivalproducts?.collection?.products
                                   ?.nodes[1]?.images?.nodes[0]
                               }
-                              className=" first_img"
+                              className=" first_img safari-only"
                             />
                             <Link
                               to={`/products/${newarrivalproducts?.collection?.products?.nodes[1].handle}`}
@@ -345,7 +349,7 @@ function RecommendedProducts({
                                 newarrivalproducts?.collection?.products
                                   ?.nodes[0]?.images?.nodes[0]
                               }
-                              className=""
+                              className="safari-only"
                             />
                             <Link
                               to={`/products/${newarrivalproducts?.collection?.products?.nodes[0].handle}`}

diff --git a/app/routes/($locale).collections.$handle.tsx b/app/routes/($locale).collections.$handle.tsx
@@ -43,13 +43,13 @@ export default function Collection() {
     <>
       <div className="breadcrumbs container">
         <ul>
-          <li>
+          <li className="safari-only">
             <a href="/">Home</a>
           </li>
-          <li>
+          <li className="safari-only">
             <a href="/collections">Collections</a>
           </li>
-          <li>
+          <li className="safari-only">
             <span>{collection.title}</span>
           </li>
         </ul>

diff --git a/app/routes/($locale).collections.all.tsx b/app/routes/($locale).collections.all.tsx
@@ -84,10 +84,10 @@ function RecommendedProducts({
     <>
       <div className="breadcrumbs container">
         <ul>
-          <li>
+          <li className="safari-only">
             <a href="/">Home</a>
           </li>
-          <li>
+          <li className="safari-only">
             <span>Featured Products</span>
           </li>
         </ul>
@@ -158,7 +158,7 @@ function RecommendedProducts({
                         ) : (
                           ''
                         )}
-                        {priceOff  >0? (
+                        {priceOff && priceOff > 0 ? (
                           <p className="comparePrice">
                             (${priceOff.toFixed(2)} OFF)
                           </p>

diff --git a/app/routes/($locale).products.$handle.tsx b/app/routes/($locale).products.$handle.tsx
@@ -157,27 +157,27 @@ export default function Product() {
     <>
       <div className="breadcrumbs container">
         <ul>
-          <li>
+          <li className="safari-only">
             <a href="/">Home</a>
           </li>
           {state?.previousTabUrl === '/variantUrl' ? (
-            <li>
+            <li className="safari-only">
               <a href="/collections">Collections</a>
             </li>
           ) : (
-            <li>
+            <li className="safari-only">
               <a href="/collections/all">Products</a>
             </li>
           )}
 
           {state?.previousTabUrl === '/variantUrl' ? (
-            <li>
+            <li className="safari-only">
               <span>{collectionName}</span>
             </li>
           ) : (
             ''
           )}
-          <li>
+          <li className="safari-only">
             <span>{productName}</span>
           </li>
         </ul>

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -144,12 +144,16 @@ function RecommendedProducts({
     <div>
       <div className="home-page-banner">
         <div className="container">
-          <h5 className="page-banner-heading">
-            {cmsData?.banner?.banner_heading}
-          </h5>
-          <h1 className="page-banner-content bodyCss">
-            {cmsData?.banner?.banner_title}
-          </h1>
+          {cmsData?.banner?.banner_heading && (
+            <h5 className="page-banner-heading">
+              {cmsData?.banner?.banner_heading}
+            </h5>
+          )}
+          {cmsData?.banner?.banner_title && (
+            <h1 className="page-banner-content bodyCss">
+              {cmsData?.banner?.banner_title}
+            </h1>
+          )}
           {cmsData?.banner?.banner_description ? (
             <div
               className="banner-description"
@@ -160,7 +164,7 @@ function RecommendedProducts({
           ) : (
             ''
           )}
-          <div className="flex">
+          <div className="flex banner-button">
             {cmsData?.banner?.button?.repo.map((button: any, index: any) => {
               return button?.cta_title?.title ? (
                 <a
@@ -269,7 +273,7 @@ function RecommendedProducts({
                                     ''
                                   )}
 
-                                  {priceOff > 0 ? (
+                                  {priceOff && priceOff > 0 ? (
                                     <p className="comparePrice">
                                       (${priceOff.toFixed(2)} OFF)
                                     </p>
@@ -323,7 +327,7 @@ function RecommendedProducts({
                                 newarrivalproducts?.collection?.products
                                   ?.nodes[1]?.images?.nodes[0]
                               }
-                              className=" first_img"
+                              className=" first_img safari-only"
                             />
                             <Link
                               to={`/products/${newarrivalproducts?.collection?.products?.nodes[1].handle}`}
@@ -345,7 +349,7 @@ function RecommendedProducts({
                                 newarrivalproducts?.collection?.products
                                   ?.nodes[0]?.images?.nodes[0]
                               }
-                              className=""
+                              className="safari-only"
                             />
                             <Link
                               to={`/products/${newarrivalproducts?.collection?.products?.nodes[0].handle}`}

diff --git a/app/styles/pages.css b/app/styles/pages.css
@@ -583,6 +583,15 @@ img {
       max-width: 420px;
       min-height: 420px;
       object-fit: cover;
+      @media screen and (min-width: 1200px) and (max-width: 1919px) {
+        @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+          &.safari-only {
+             min-width: 386px;
+             height: auto;
+           }
+         }
+      }
+
     }
   }
 }
@@ -860,20 +869,35 @@ img {
 .breadcrumbs li:not(:last-child):after {
   content: url('../../public/breadcrumb.svg');
   margin: 0 5px;
+  vertical-align: -moz-middle-with-baseline !important;
   vertical-align: middle;
-  line-height: 1em;
 }
+.breadcrumbs li:not(:last-child) {
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+    &.safari-only:after {
+      vertical-align: -webkit-baseline-middle !important;
+     }
+   }
+  }
+
+
 
 .breadcrumbs li:not(:last-child) a:after {
   margin: 0 5px;
+  vertical-align: -moz-middle-with-baseline !important;
   vertical-align: middle;
-  line-height: 1em;
 }
+.breadcrumbs li:not(:last-child){
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+    &.safari-only a:after {
+      vertical-align: -webkit-baseline-middle !important;
+     }
+   }
+  }
 
 .breadcrumbs li a {
   text-decoration: none;
   color: #333;
-  font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;