Add to cart Slideout Implementation

blocks/product-hero/product-hero.css

@@ -1,3 +1,7 @@
+.bg-danaherpurple-50 {
+  background-color: #EADEFF;
+}
+
 .btn-outline-trending-brand {
   color: #7523FF;
   background-color: rgb(255 255 255);
@@ -145,6 +149,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity));
 }
 
+.product-hero-wrapper :is(.bg-danaherpurple-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 222 255 / var(--tw-bg-opacity));
+}
+
 .product-hero-wrapper :is(.bg-danaherpurple-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 0 165 / var(--tw-bg-opacity));

blocks/product-hero/product-hero.js

@@ -1,11 +1,14 @@
 import {
-  a, div, p, span, hr, h1,
+  a, div, p, span, hr, h1, button,
 } from '../../scripts/dom-builder.js';
 import {
   getAuthorization, getCommerceBase,
   getProductResponse,
 } from '../../scripts/commerce.js';
-import { createOptimizedS7Picture, decorateModals } from '../../scripts/scripts.js';
+import {
+  createOptimizedS7Picture, decorateModals,
+} from '../../scripts/scripts.js';
+import addtoCartSlideout from '../../scripts/slideout.js';
 
 function showImage(e) {
   const selectedImage = document.querySelector('.image-content picture');
@@ -165,6 +168,30 @@ async function addToQuote(product) {
 export default async function decorate(block) {
   const titleEl = block.querySelector('h1');
   titleEl?.classList.add('title');
+
+  const json = [{
+    img: '/images/wesee/automation.png',
+    description: 'DM750 Educational Microscope with Integrated Wireless Camera',
+    qty: '2',
+    unitprice: 'CA$2,953.00',
+  },
+  {
+    img: '/images/wesee/scientist-microscope.png',
+    description: 'SQ390 Educational Microscope with Integrated Wireless Camera',
+    qty: '1',
+    unitprice: 'CA$2,953.00',
+  },
+  ];
+
+  const main = document.querySelector('.product-hero-wrapper');
+  const modalButton = button({ class: 'slideout-button-style .bg-danaherpurple-50' }, 'Add to cart');
+  main.append(modalButton);
+  const simpleModalButton = document.querySelector('.slideout-button-style');
+  simpleModalButton.addEventListener('click', async (e) => {
+    e.preventDefault();
+    addtoCartSlideout(main, json);
+  });
+
   titleEl?.parentElement.parentElement.remove();
   const response = await getProductResponse();
   if (response?.length > 0) {

scripts/slideout.js

@@ -0,0 +1,62 @@
+import {
+  div, p, button, img,
+} from './dom-builder.js';
+
+// Showing products that has been added to the cart from json
+function jsonIterate(json, slideout) {
+  json.forEach((item) => {
+    const contentBox = div({ class: 'flex pb-6 mb-6 border-b pb-4' });
+    contentBox.append(
+      div(
+        { class: 'w-1/6' },
+        img({ class: 'productImageStyle', src: item.img, alt: 'productImg' }),
+      ),
+      div(
+        { class: 'w-1/2' },
+        div({ class: 'font-bold ml-2' }, item.description),
+        div({ class: 'text-xs ml-2' }, 'SKU: dm750-educational-microscope-with-integrated-wireless-camera'),
+      ),
+      div({ class: 'w-1/12 text-center' }, item.qty),
+      div({ class: 'w-1/4 text-center font-bold' }, item.unitprice),
+    );
+    slideout.appendChild(contentBox);
+  });
+}
+function toggleClass() {
+  document.querySelector('.slideout').classList.toggle('on');
+}
+
+export default function addtoCartSlideout(main, json) {
+  // creating structure of slideout
+  const slideout = div({ class: 'slideout p-4' });
+  const slideoutHeading = div(
+    { class: '' },
+    div(
+      { class: 'flex justify-between pb-4' },
+      p({ class: 'text-lg font-bold' }, 'Item added to your cart'),
+      // close Icon
+      img({ class: 'closeIconStyle', src: '/icons/close.svg', alt: 'closeIcon' }),
+    ),
+    // Heading
+    div(
+      { class: 'flex' },
+      div({ class: 'w-1/6' }, ''),
+      div({ class: 'text-xs w-1/2 ml-2' }, 'Description'),
+      div({ class: 'text-xs w-1/12 text-center' }, 'QTY'),
+      div({ class: 'text-xs w-1/4 text-center' }, 'Unit Price'),
+    ),
+  );
+  slideout.append(slideoutHeading);
+
+  jsonIterate(json, slideout);
+
+  // Checkout Button
+  const checkoutButton = button({ class: 'btn-primary-purple rounded-full px-6 btn btn-lg font-medium w-full mt-5' }, 'Checkout');
+  slideout.appendChild(checkoutButton);
+  main.append(slideout);
+
+  // Dismiss slideout with close Icon
+  const imgElement = document.querySelector('.closeIconStyle');
+  imgElement.addEventListener('click', toggleClass);
+  toggleClass();
+}

styles/styles.css

@@ -685,6 +685,13 @@ main .default-content-wrapper h2, main .default-content-wrapper h3, main .defaul
   }
 }
 
+.btn-lg {
+  padding-top: .625rem;
+  padding-bottom: .625rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations {
   scrollbar-width: none;
 }
@@ -798,6 +805,13 @@ main .section:not(.stretch, .product-hero-container, .workflow-carousel-containe
   outline-offset: 2px;
 }
 
+.btn-lg {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .btn:disabled {
   cursor: not-allowed;
   opacity: 0.5;
@@ -2145,6 +2159,10 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   margin-bottom: 1.25rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -2173,6 +2191,10 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -2244,6 +2266,22 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   height: 100%;
 }
 
+.w-1\/12 {
+  width: 8.333333%;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -2415,6 +2453,10 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   border-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-danaherpurple-500 {
   --tw-border-opacity: 1;
   border-color: rgb(117 35 255 / var(--tw-border-opacity));
@@ -2550,6 +2592,10 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   padding-bottom: 1rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
 .pr-11 {
   padding-right: 2.75rem;
 }
@@ -2574,6 +2620,10 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   text-align: left;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .align-middle {
   vertical-align: middle;
 }
@@ -2606,6 +2656,11 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;

styles/tailwind.css

@@ -394,6 +394,22 @@
       @apply p-4;
   }
 
+ main .section .product-hero-wrapper .slideout{
+  @apply bg-white fixed top-0 -right-2/3 w-500 h-full z-50 duration-1000;
+}
+
+main .section .product-hero-wrapper .slideout.on{
+  @apply right-0;
+}
+
+main .section .product-hero-wrapper  .closeIconStyle{
+  @apply h-5 w-5 cursor-pointer;
+}
+
+main .section .product-hero-wrapper .productImageStyle{
+  @apply h-24 w-24 bg-white;
+}
+
   .product-hero .btn-outline-trending-brand {
       @apply text-center;
   }