Shopify Archives - Page 2 of 4

So you have a Shopify store but you personally don't like how you have to visit the cart page just to see the total amount you need to pay or to proceed to the checkout page. Well, in this article, we will be learning how to create an offset canvas or a cart drawer that displays the items inside of a Shopify store cart without installing Shopify apps. Video Tutorial If you prefer watching video tutorials rather than reading, then you can watch the video version of this article below: https://youtu.be/eZPuXw6MEZw Getting Started Before we can start displaying the items from our cart, we, obviously, need to create the offset canvas or the drawer first. Now, I just want to make a shoutout to Tomasz Bujnowicz for making this amazing easy sliding drawer. So credits to him for making this lesson easier to accomplish.Anyway, let's begin! Open your Shopify store admin page and access your code editor. Then, go to the assets folder and create two asset files: drawer.cssdrawer.js Once you have created the two files, open them and apply the following codes: Drawer.css For the styles of the drawer, copy the following code: .drawer { display: none; } .drawer__header { padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .drawer__close { margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; background-image: url("data:image/svg+xml,svg width='15px' height='16px' viewBox='0 0 15 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'g id='2.-Menu' transform='translate(-15.000000, -13.000000)' stroke='000000'g id='Group' transform='translate(15.000000, 13.521000)'path d='M0,0.479000129 L15,14.2971819' id='Path-3'/pathpath d='M0,14.7761821 L15,-1.24344979e-14' id='Path-3'/path/g/g/g/svg"); width: 15px; height: 15px; } .drawer__wrapper { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; max-width: 500px; z-index: 9999; overflow: auto; transition: transform 0.3s; will-change: transform; background-color: #fff; display: flex; flex-direction: column; -webkit-transform: translateX(103%); transform: translateX(103%); -webkit-overflow-scrolling: touch; box-shadow: 0 2px 6px #777; } .drawer__content { position: relative; overflow-x: hidden; overflow-y: auto; height: 100%; flex-grow: 1; padding: 1.5rem; } .drawer.is-active { display: block; } .drawer.is-visible .drawer__wrapper { -webkit-transform: translateX(0); transform: translateX(0); } .drawer.is-visible .drawer__overlay { opacity: 0.5; } .drawer__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; z-index: 200; opacity: 0; transition: opacity 0.3s; will-change: opacity; background-color: #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } Drawer.js For the JavaScript of the drawer, copy the following code: var drawer = function () { if (!Element.prototype.closest) { if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } Element.prototype.closest = function (s) { var el = this; var ancestor = this; if (!document.documentElement.contains(el)) return null; do { if (ancestor.matches(s)) return ancestor; ancestor = ancestor.parentElement; } while (ancestor !== null); return null; }; } var settings = { speedOpen: 50, speedClose: 350, activeClass: 'is-active', visibleClass: 'is-visible', selectorTarget: '[data-drawer-target]', selectorTrigger: '[data-drawer-trigger]', selectorClose: '[data-drawer-close]', }; var toggleccessibility = function (event) { if (event.getAttribute('aria-expanded') === 'true') { event.setAttribute('aria-expanded', false); } else { event.setAttribute('aria-expanded', true); } }; var openDrawer = function (trigger) { var target = document.getElementById(trigger.getAttribute('aria-controls')); target.classList.add(settings.activeClass); document.documentElement.style.overflow = 'hidden'; toggleccessibility(trigger); setTimeout(function () { target.classList.add(settings.visibleClass); }, settings.speedOpen); }; var closeDrawer = function (event) { var closestParent = event.closest(settings.selectorTarget), childrenTrigger = document.querySelector('[aria-controls="' + closestParent.id + '"'); closestParent.classList.remove(settings.visibleClass); document.documentElement.style.overflow = ''; toggleccessibility(childrenTrigger); setTimeout(function () { closestParent.classList.remove(settings.activeClass); }, settings.speedClose); }; var clickHandler = function (event) { var toggle = event.target, open = toggle.closest(settings.selectorTrigger), close = toggle.closest(settings.selectorClose); if (open) { openDrawer(open); } if (close) { closeDrawer(close); } if (open || close) { event.preventDefault(); } }; var keydownHandler = function (event) { if (event.key === 'Escape' || event.keyCode === 27) { var drawers = document.querySelectorAll(settings.selectorTarget), i; for (i = 0; i < drawers.length; ++i) { if (drawers[i].classList.contains(settings.activeClass)) { closeDrawer(drawers[i]); } } } }; document.addEventListener('click', clickHandler, false); document.addEventListener('keydown', keydownHandler, false); }; drawer(); Creating the cart drawer Now that we finally have the style and the JavaScript code for our cart drawer, we can now create the HTML of the drawer.Open your Shopify code editor once again and in the sections folder, create a new section file and name it drawer.liquid and apply the following code: Continue Shopping Total: Proceed Checkout Awesome! Now that we have all of the codes that we need, we can finally reference all of them in our theme.liquid. So open your theme.liquid and add the following objects inside of the head tag of your theme.liquid: {{ 'drawer.css' | asset_url | stylesheet_tag }} {{ 'drawer.js' | asset_url | script_tag }} Next, reference your drawer.liquid using the section tag inside of the body tag of your theme.liquid. {% section 'drawer' %} Awesome! Now, the last thing that we need to do is to customize our header.liquid to trigger the drawer.Go to your sections folder and open the header.liquid. Once opened, look for the anchor tag ( ) that uses either of the following href attribute values: {{ routes.cart_url }}/cart For example, I have the following: You can always find these elements using the search box ( CTRL + F ).Once you have found it, replace the value of href attribute with a number sign symbol ( # ). Then, we'll apply the following attributes to this anchor tag. data-drawer-trigger aria-controls="drawer-name" aria-expanded="false" So, it should look like this now: {% include 'icon-cart' %} {{ 'layout.cart.title' | t }} {{ cart.item_count }} {{ 'layout.cart.items_count' | t: count: cart.item_count }} Save the file. Now, that should allow you to display/hide the drawer whenever you click the Shopping bag button. Conclusion There you have it! That's how simple it is to create a drawer for your Shopify stores. Now, for simplicity reasons, this is still not the best way to create a drawer for your Shopify stores. I don't know if you noticed but the content of the cart will only show once you have either refreshed the page or opened another page. That's not effective right? So how do you fixed that? Well, that's when you'll have to use events for your Shopify theme.