Resume And Continue Shopping Buttons

There are some semi-expensive plug-ins to add the “resume shopping” button to your cart page. As a personal exercise I opted for creating my own. Along with it I modified the “continue shopping” button. The beauty of my implementation is that these buttons now not only take you back to the last browsed category of the shop, no matter whether you have visited other pages in-between. They also take you to the product you viewed last. This functionality is sadly not available on mobile devices as of this writing. I believe it has to do with scroll tags (#) support, or how scrolling is handled on mobile. Nevertheless, I am proud of this solution as it seems even more robust than the commercial plug-ins. On mobile it simply takes you back to the shop category, not the product.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
var screenWidth = window.innerWidth;
const subString = 'shop';
const subStringTwo = 'shop/p/';
let lastScrollPosition = window.scrollY;
let getURL = window.location.href;
getURL = getURL.split('#')[0]; // Purify URL from any position

if (getURL.includes(subString) && !getURL.includes(subStringTwo)) {
window.addEventListener('scroll', function() {
const currentScrollPosition = window.scrollY;
if (Math.abs(currentScrollPosition - lastScrollPosition) >= 100) {
lastScrollPosition = currentScrollPosition;
const viewportHeight = window.innerHeight;
const viewportTop = window.scrollY;
const viewportBottom = viewportTop + viewportHeight;
const viewportMiddle = viewportTop + viewportHeight / 2;
	let products = document.querySelectorAll('.post-type-store-item');
	products.forEach((element, index) => {
    var rect = element.getBoundingClientRect();
    const elementTop = rect.top + window.scrollY;
    const elementBottom = elementTop + rect.height;
    const elementMiddle = elementTop + rect.height / 2;
// Check if the element's middle is within the viewport middle
    if (elementMiddle >= viewportTop && elementMiddle <= viewportBottom) {
    const elementId = element.id;
    sessionStorage.setItem('scrollPosition', elementId);
    sessionStorage.setItem('shoppingURL', getURL);
				}
			});
		}
	});
}
// Monitor cart container and add button
var cartString = 'cart';
if (getURL.includes(cartString)) {
function observeCartContainer() {
// Create a new observer instance
const observer = new MutationObserver((mutationsList) => {
// Check each mutation
	for (let mutation of mutationsList) {
// Check added children divs for cart container
	if (mutation.type === 'childList') {
	const addedNodes = Array.from(mutation.addedNodes);
	addedNodes.forEach(node => {
	if (node.nodeType === 1 && node.classList.contains('cart-container')) {
// Remove existing variants of the button
const existingShopBtns = document.querySelectorAll('.resumeShoppingButton');
if (existingShopBtns.length > 0) {
existingShopBtns.forEach(element => {
element.remove();
	});
}
// Create the resume button
const resumeShoppingButton = document.createElement('button');
resumeShoppingButton.id = "resumeShoppingButton";
resumeShoppingButton.classList.add('resumeShoppingButton', 'sqs-block-button-container', 'sqs-button-element--primary');
resumeShoppingButton.type = 'button';
resumeShoppingButton.textContent = 'Resume Browsing';
// Append the button
const lastChild = document.querySelector('.cart-container > :last-child');
lastChild.insertAdjacentElement('afterend', resumeShoppingButton);
// Assign the button URL
resumeShoppingButton.addEventListener('click', function() {
var scrollPosition = sessionStorage.getItem('scrollPosition');
var shoppingUrl = sessionStorage.getItem('shoppingURL');
	if (!shoppingUrl || screenWidth <= 790) {
	shoppingUrl = 'https://www.polivantage.com/shop';
	scrollPosition = 0;
	}
var resumeShopUrl = `${shoppingUrl}#${scrollPosition}`;
window.location.href = resumeShopUrl;
			});
		}
	});
}
// Check removed text children for cart container
if (mutation.removedNodes.length > 0) {
mutation.removedNodes.forEach(node => {
if (node.nodeType === 3) {
const lastChild = document.querySelector('.cart-container > :last-child');
   if (lastChild !== null) {
// Make sure the button is last child
   lastChild.insertAdjacentElement('afterend', resumeShoppingButton);
					}
				}
			});
		}
var continueShoppingButton = document.querySelector('.cart-continue-button');
if (continueShoppingButton) {
var scrollPosition = sessionStorage.getItem('scrollPosition');
var shoppingUrl = sessionStorage.getItem('shoppingURL');
	if (!shoppingUrl || screenWidth < 790) {
	shoppingUrl = 'https://www.polivantage.com/shop';
	scrollPosition = 0;
	}
var resumeShopUrl = `${shoppingUrl}#${scrollPosition}`;
continueShoppingButton.href = resumeShopUrl;
}
}  
});          
observer.observe(document.body, {
childList: true,
subtree: true
	});
}
observeCartContainer();
	}
});

CSS:

//RESUME SHOPPING BUTTON//
.resumeShoppingButton {
    -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  display: block;
  cursor: pointer;
//  padding-left: 70px !important;
  padding-right: 15px !important;
  padding-top: 15px !important;
  padding-bottom: 27px !important;
  margin-top: 60px;
  margin-bottom: 20px;
  min-width: 335px;
  height: 50px;
  color: #000000;
  letter-spacing: 2.5px !important;
  font-size: 20px;
  text-align: right !important;
  text-transform : uppercase;
 // text-align: right !important;
  align-items: center !important;
  position: relative;
  @media only screen and (min-width:790px) {
  transform: translateX(0%) translateY(0%) !important;
  }
  @media only screen and (max-width:790px) {
  width: 100%;
  padding-bottom: 38px !important;
  padding-left: 44% !important;
  margin-bottom: 40px;
  }
}
.resumeShoppingButton:hover {
    @media only screen and (min-width:790px) {
  color: #FFC700 !important;
}
  @media only screen and (max-width:790px) {
    color: #FFC700 !important;
  }
}
  @media only screen and (max-width:790px) {
.resumeShoppingButton:focus {
  background-color: #FFC700 !important;
  color: #000000 !important;
}
.resumeShoppingButton:active {
  background-color: #FFC700 !important;
  color: #000000 !important;
	}
}

//CONTINUE SHOPPING BUTTON//
a.cart-continue-button {
    color: #000000 !important;
    font-size: 22px !important;
  	text-transform: uppercase !important;
  letter-spacing: 4px !important;
  padding-right: 10px !important;
}
a.cart-continue-button:hover {
  color: #FFC700 !important;
}
@media only screen and (max-width: 790px) {
a.cart-continue-button {
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: absolute;
    width: 83% !important;
  }
}

There is more CSS tucked away in general button make-up which isn’t presented here. I trust in your ability to style your own buttons.