Merge pull request #169 from youcan-shop/TH-297

TH-297: Origins > Single Product Section > Create Buy buttons block
youcan-shop · Jan 27, 2025 · 428ac1c · 428ac1c
2 parents 2baf52d + d418dbe
commit 428ac1c
Show file tree

Hide file tree

Showing 15 changed files with 721 additions and 471 deletions.
diff --git a/themes/origins/assets/component-modal.css b/themes/origins/assets/component-modal.css
@@ -3,10 +3,16 @@ yc-modal .modal-box{
   position:fixed;
   height:-moz-fit-content;
   height:fit-content;
-  background-color:var(--color-base-white);
+  background-color:var(--section-bg-color, var(--color-base-white));
 }
 @media (min-width: 768px){
-  yc-modal .modal-box{
+  yc-modal[as-drawer] .modal-box{
+    z-index:auto;
+    position:relative;
+  }
+}
+@media (min-width: 768px){
+  yc-modal:not([as-drawer]) .modal-box{
     width:500px;
     inset:50% 0 0 50%;
     translate:-50% -50%;
@@ -22,22 +28,36 @@ yc-modal .modal-box{
     inset-inline-start:0;
     border-radius:var(--radius-md) var(--radius-md) 0 0;
     transition:var(--transition-duration-normal);
+    max-height:90%;
+    overflow-y:scroll;
   }
   yc-modal .modal-box::before{
+    content:"";
+    width:100%;
+    height:30px;
+    display:block;
+    position:sticky;
+    z-index:2;
+    inset-block-start:0;
+    color:var(--section-bg-color, var(--color-base-white));
+    background-image:linear-gradient(to top, transparent 0%, color-mix(in srgb, currentColor 5%, transparent) 10%, currentColor 100%);
+  }
+  yc-modal .modal-box::after{
     content:"";
     width:48px;
-    height:6px;
-    position:absolute;
+    height:4px;
+    left:50%;
+    z-index:3;
+    position:sticky;
     border-radius:100px;
     translate:-50% -50%;
-    left:50%;
-    inset-block-start:1em;
+    inset-block-end:calc(100% - 1em);
     background-color:color-mix(in srgb, currentColor 10%, transparent);
   }
 }
-yc-modal[data-hidden=true] .modal-overlay{
-  opacity:0;
-  visibility:hidden;
+yc-modal[data-hidden=false] .modal-overlay{
+  opacity:1;
+  visibility:visible;
 }
 @media (max-width: 768px){
   yc-modal[data-hidden=true] .modal-box{
@@ -46,7 +66,7 @@ yc-modal[data-hidden=true] .modal-overlay{
   }
 }
 @media (min-width: 768px){
-  yc-modal[data-hidden=true] .modal-box{
+  yc-modal[data-hidden=true]:not([as-drawer]) .modal-box{
     opacity:0;
     visibility:hidden;
     translate:-50% -40%;

diff --git a/themes/origins/assets/component-modal.js b/themes/origins/assets/component-modal.js
@@ -1,4 +1,6 @@
 class Modal extends HTMLElement {
+  static observedAttributes = ["as-drawer"];
+
   constructor() {
     super();
 
@@ -64,7 +66,7 @@ class Modal extends HTMLElement {
     if (!this.isDragging || window.innerWidth > this.MOBILE_SCREEN) return;
 
     const deltaY = this.currentY - this.startY;
-    const threshold = this.modal.offsetHeight * 0.15;
+    const threshold = this.modal.offsetHeight * 0.4;
 
     deltaY > threshold ? this.close() : this.open();
     this.resetDrag();
@@ -95,7 +97,6 @@ class Modal extends HTMLElement {
   setState(hidden) {
     this.state = hidden;
     this.dataset.hidden = hidden;
-    document.body.toggleAttribute("data-scroll-locked", !hidden);
   }
 
   setTransition(duration) {
@@ -116,7 +117,12 @@ class Modal extends HTMLElement {
     const key = isMobile ? "mobile" : "desktop";
     const state = this.state ? "closed" : "open";
 
-    this.setPosition(positions[key][state]);
+    if (!isMobile && this.hasAttribute("as-drawer")) {
+      this.setPosition(0);
+      this.setState(true);
+    } else {
+      this.setPosition(positions[key][state]);
+    }
   }
 }
 

diff --git a/themes/origins/assets/component-select.css b/themes/origins/assets/component-select.css
@@ -46,6 +46,9 @@ yc-select yc-select-content{
   transition:var(--transition-duration-normal);
   border:1px solid color-mix(in srgb, currentColor 20%, transparent);
 }
+yc-select yc-select-content:has(yc-select-item){
+  display:none;
+}
 yc-select yc-select-content:not([data-visible=true]){
   opacity:0;
   filter:blur(2px);

diff --git a/themes/origins/assets/featured-product.css b/themes/origins/assets/featured-product.css
@@ -171,12 +171,27 @@
   gap:var(--gap-lg);
   margin-block-start:1em;
 }
-.single-product yc-product-info .buy-button .events{
+.single-product yc-product-info .buy-button .buy-area{
+  display:grid;
+  grid-gap:var(--gap-lg);
+  gap:var(--gap-lg);
+}
+.single-product yc-product-info .buy-button .actions{
   display:flex;
   gap:var(--gap-md);
+  background-color:var(--section-bg-color, var(--color-base-white));
+}
+.single-product yc-product-info .buy-button .actions[data-sticky]{
+  display:none;
 }
-.single-product yc-product-info .buy-button .events button[data-trigger]{
+.single-product yc-product-info .buy-button .actions button[data-toggle],
+.single-product yc-product-info .buy-button .actions button[data-submit]{
   width:100%;
+  color:var(--section-bg-color, var(--color-base-white));
+  background-color:rgb(var(--section-text-color, var(--color-base-black)));
+}
+.single-product yc-product-info .buy-button .actions button[data-submit]::before{
+  content:attr(data-desktop);
 }
 .single-product yc-product-info .buy-button .express-checkout{
   display:grid;
@@ -189,29 +204,47 @@
   gap:var(--gap-sm);
   font-size:var(--text-md);
   padding:1.5em;
-  border-block-end:1px solid color-mix(in srgb, currentColor 10%, transparent);
-}
-.single-product yc-product-info .buy-button .express-checkout .header .subtitle{
-  font-size:var(--text-sm);
-  color:color-mix(in srgb, currentColor 80%, transparent);
 }
 .single-product yc-product-info .buy-button .express-checkout .fields{
-  padding:1.5em;
   display:grid;
   grid-gap:var(--gap-lg);
   gap:var(--gap-lg);
   align-items:baseline;
   grid-template-columns:repeat(2, 1fr);
+  padding:1.5em;
+  position:relative;
+  padding-block-start:3.5em;
+  border-block-start:1px solid color-mix(in srgb, currentColor 10%, transparent);
+}
+.single-product yc-product-info .buy-button .express-checkout .fields::before{
+  content:attr(data-title);
+  inset:0;
+  position:absolute;
+  width:-moz-fit-content;
+  width:fit-content;
+  height:-moz-fit-content;
+  height:fit-content;
+  padding:0.3em 1.5em;
+  font-size:var(--text-sm);
+  border-end-end-radius:var(--radius-sm);
+  color:color-mix(in srgb, currentColor 80%, transparent);
+  background-color:color-mix(in srgb, currentColor 5%, transparent);
 }
 .single-product yc-product-info .buy-button .express-checkout .fields .field{
   display:grid;
   grid-gap:var(--gap-sm);
   gap:var(--gap-sm);
 }
+.single-product yc-product-info .buy-button .express-checkout .fields .field:last-child:nth-child(odd){
+  grid-column:1/-1;
+}
 .single-product yc-product-info .buy-button .express-checkout .fields .field label{
   font-size:var(--text-sm);
   color:color-mix(in srgb, currentColor 80%, transparent);
 }
+.single-product yc-product-info .buy-button .express-checkout .fields .field yc-select-trigger{
+  padding:12px 15px;
+}
 .single-product yc-product-info .buy-button .express-checkout .fields .field input{
   color:currentColor;
 }
@@ -249,4 +282,55 @@
   .single-product yc-product-media .gallery .slider-inner .image{
     height:70px !important;
   }
+  .single-product yc-product-info .buy-button .buy-area{
+    gap:0;
+  }
+  .single-product yc-product-info .buy-button .buy-area .express-checkout{
+    border:none;
+    border-radius:0;
+  }
+  .single-product yc-product-info .buy-button .buy-area .express-checkout .header{
+    text-align:center;
+    padding-inline:1em;
+  }
+  .single-product yc-product-info .buy-button .buy-area .express-checkout .fields{
+    padding-inline:1em;
+    border-block-start:none;
+    grid-template-columns:1fr;
+  }
+  .single-product yc-product-info .buy-button .buy-area .express-checkout .fields:last-child{
+    padding-block-end:0;
+  }
+  .single-product yc-product-info .buy-button .buy-area .express-checkout .fields::before{
+    border-start-end-radius:var(--radius-sm);
+  }
+  .single-product yc-product-info .buy-button .buy-area .actions{
+    z-index:2;
+    padding:1em;
+    position:sticky;
+    inset-block-end:0;
+  }
+  .single-product yc-product-info .buy-button .buy-area .actions yc-quantity-control{
+    display:none;
+  }
+  .single-product yc-product-info .buy-button .buy-area .actions button[data-submit]::before{
+    content:attr(data-mobile);
+  }
+  .single-product yc-product-info .buy-button .actions[data-sticky]{
+    z-index:2;
+    margin:1em;
+    padding:0.5em;
+    display:flex;
+    position:fixed;
+    inset-block-end:0;
+    inset-inline-start:0;
+    width:calc(100% - 2em);
+    border-radius:var(--radius-md);
+    background-color:var(--section-bg-color, var(--color-base-white));
+    border:1px solid color-mix(in srgb, currentColor 10%, transparent);
+  }
+  .single-product yc-product-info .buy-button .actions[data-sticky] button.primary,
+  .single-product yc-product-info .buy-button .actions[data-sticky] yc-quantity-control button.yc-btn.icon{
+    padding:10px;
+  }
 }