Can I repurpose the cart button to open a modal window?

Store Design
,
1

I’m using Locally.com to import my store inventory feed into Shopify. Locally provides a product locator tool that I’ve embeded into the main-product.liquid file and it looks like this…

heindlap_0-1683637241265.png
heindlap_0-1683637241265.png1303×766 120 KB

When a shopper clicks on the pickup location to purchase, it brings up a modal that looks like this…

heindlap_1-1683637316657.png
heindlap_1-1683637316657.png1037×936 103 KB

Once the shopper clicks ‘Buy Now’ the item is placed into the shopping cart inside this modal from Locally.com. But if the shopper decides to keep shopping, they won’t have a way to get back to the shopping cart modal and complete their purchase. Instead, they’ll likely click the cart icon at the top of the store and the cart page will say that their cart is empty.

Can someone help me write the code that will essentially “hijack” the cart icon at the top of my site and make this modal appear, showing the shopper’s cart?

URL: bikewise-oxford.myshopify.com

Password: vihaog

Thanks.

2

Hi @heindlap ,

I have checked and found We have option to continue shopping after buy now button is clicked.

Screenshot_37.png
Screenshot_37.png953×786 82.7 KB

3

Screenshot_38.png
Screenshot_38.png1745×807 162 KB

Hi @heindlap

And i found that adding product into cart is not updating the mini cart on Navigation menu.

This will required custom coding.

Let know if you want to hire me.

Regards

4

Will you please private message me with an estimated cost to write the custom code?

5

To “hijack” the cart icon at the top of your site and make the shopping cart modal appear, you can add custom code to handle the click event on the cart icon and trigger the display of the modal with the shopper’s cart content. Here’s an example of how you can achieve this:

  1. Locate the HTML element for the cart icon on your site. It may have a class or ID assigned to it. For example, let’s assume the cart icon has the ID “cart-icon”.

  2. Add an event listener to the cart icon element using JavaScript. This listener will handle the click event and trigger the display of the shopping cart modal.

// Get the cart icon element
const cartIcon = document.getElementById('cart-icon');

// Add click event listener to the cart icon
cartIcon.addEventListener('click', function() {
  // Retrieve the shopper's cart data and display the modal
  const cartData = retrieveCartData(); // Replace with your own function to retrieve the cart data
  displayShoppingCartModal(cartData); // Replace with your own function to display the shopping cart modal
});
  1. In the event listener, you can define the necessary functions to retrieve the cart data and display the shopping cart modal. The retrieveCartData function should fetch the cart data from the server or local storage, and the displayShoppingCartModal function should handle the rendering and display of the modal with the cart content.

Note: The implementation of the retrieveCartData and displayShoppingCartModal functions will depend on your specific setup, theme, and the integration you’re using for the shopping cart modal from Locally.com. You may need to consult the documentation or support resources provided by Locally.com for specific guidance on how to retrieve the cart data and display the modal.