From 8892d2bd6877751bb2db60c28a5c1df97f59d6b9 Mon Sep 17 00:00:00 2001 From: SaniyaMew Date: Fri, 20 Dec 2024 19:40:35 +0530 Subject: [PATCH] Add to cart Slideout Implementation --- blocks/product-hero/product-hero.css | 9 ++++ blocks/product-hero/product-hero.js | 31 +++++++++++++- scripts/slideout.js | 62 ++++++++++++++++++++++++++++ styles/styles.css | 55 ++++++++++++++++++++++++ styles/tailwind.css | 16 +++++++ 5 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 scripts/slideout.js diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css index b912568b6..b700dae5f 100644 --- a/blocks/product-hero/product-hero.css +++ b/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)); diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js index db63a0c93..f16fd3c79 100644 --- a/blocks/product-hero/product-hero.js +++ b/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) { diff --git a/scripts/slideout.js b/scripts/slideout.js new file mode 100644 index 000000000..c67716aa7 --- /dev/null +++ b/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(); +} diff --git a/styles/styles.css b/styles/styles.css index f5a9cb2db..25129b264 100644 --- a/styles/styles.css +++ b/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; diff --git a/styles/tailwind.css b/styles/tailwind.css index c8f6af0a7..33ece782e 100644 --- a/styles/tailwind.css +++ b/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; }