Debut theme mod

Highlighted
Tourist
8 0 0

I would like to add a hover popup over the shopping bag in our Debut theme not sure if its possible but thought I'd put it out in here to see who could help us out. screen shot to show what we are looking for.

Thanks in advance 

Wayne VC shop

cart hover screen shot.jpg

0 Likes
Shopify Expert
537 24 99

That's a modification for which you'll want to hire a Shopify Expert. I doubt anyone will make that modification for free unless they happen to have a ready-made code snippet lying around that does exactly what you want.

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Astronaut
1000 126 231

It's definitely possible. I have done it on our mobile cart with a click, I can't imagine it'd be much different with a hover. You'll need to make an ajax request to get the contents of the cart and build an html template in javascript to push it into an existing element on the page, then reveal it.

 

https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

 

Thats the API, it should give you a start. You'll want to get the contents of the cart with jQuery like:

 

<script>
let data = jQuery.getJSON('/cart.js');
//wait for the request to complete
data.done(function(){
let cart = data.responseJSON;
//log cart to see all the objects you can now access
console.log(cart)
//You'll have access to the items in your cart, assign them to a variable and loop through the array
let items = cart.items;
for (let i=0; i < items.length; i++){
let productTitle = item[i].title;
let imagesrc=item[i].image; let productPrice = shopify.formatMoney(item[i].price); //Then build a template let template =
'<div class="product-container">' + '<div class="product-title">' + productTitle + '</div>' +
'<div class="product-image"><img src="' + imageSrc + '"></div>' + '<div class="product-price">' + productPrice + '</div>' +
'</div>';
//Then append the item to an existing HTML element:

$('.cart-preview__container').append(template);
// Since this is inside the for loop it will push each item into the cart-preview__container. } }) </script>

 

Should give you a pretty good idea. Sorry for any typos, I just did that in this code editor so I don't know if I screwed anything up. But that's the gist of it.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like