I have an SVG map that I’ve created for my store that I would like to have on its own separate page. The HTML and CSS seem to be working fine – when I hover over a state the state becomes highlighted and loses its highlight when I hover off of it.
I am trying to add custom JS to the theme.liquid file in the theme code settings so that when I hover over a state some information is displayed as a popup by the cursor. This worked perfectly for an old Shopify store I worked on with an older theme, but it doesn’t seem to work with Shopify 2.0. The info is no longer displayed overtop the map as a smooth popup, but shifts the entire map down and displays at the top of the screen.
How would I go about linking this custom JS to the HTML/CSS that I’ve put on the page for Shopify 2.0?
Here is the JS, exactly how I am adding it to the theme.liquid file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("path, circle").hover(function(e) {
$('#info-box').css('display','block');
$('#info-box').html($(this).data('info'));
});
$("path, circle").mouseleave(function(e) {
$('#info-box').css('display','none');
});
$(document).mousemove(function(e) {
$('#info-box').css('top',e.pageY-$('#info-box').height()-30);
$('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();
var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
$('a').on('click touchend', function() {
var link = $(this).attr('href');
window.open(link,'_blank');
return false;
});
}
</script>
I’ve tried to “bundle” the JS code with the HTML/CSS on the product info page, creating a separate js.liquid file under “assets” in my theme code settings, and adding “defer=’defer'” to my JQuery info.