Shopify themes, liquid, logos, and UX
Dear all,
I am having a bit of a problem with the debut template, I have designed the following piece of code (as a form of a header):
<div class="fullscreen-video-wrap
fullscreen-video-wrap--{{ section.settings.height }}
fullscreen-video-wrap--{{ section.id }}">
<video class="video-js" autoplay preload playsinline muted
poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen">
<source src="{{ section.settings.newvideo_link }}" type="video/mp4">
</source>
</video>
</div>
However, if I try to do the following
<video class="video-js" autoplay preload playsinline muted
poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen" onclick="alert("I am an alert box!");">
I cannot make the alert box appear, it seems that the onclick event is "hijacked" by something else. I am wondering how I can still make the onclick alert work.
Any ideas?
Thanks
Solved! Go to the solution
This is an accepted solution.
I'm not entirely sure why that's not working, but it looks like all that is getting loaded in after the DOM through javascript or something, so that may be the case. You can add an event listener to the container for that video instead. Add this at the end of your theme.js file, there's a bit at the end of your file already that's throwing an error, you need to comment it out with double slashes at the beginning of the line. I'll include it here just so you can see the line, but just add the colored code in the snippet below that:
// this is your broken code, just add two slashes before it and it'll go light grey and comment it out
// $(window).on("resize", $.debounce(500, headerSize));
//then add this code underneath it.
document.addEventListener('DOMContentLoaded', function(){
let video = document.querySelector('div[data-section-id="1622579860237a54d2"]');
video.addEventListener('click', function(){
alert('I am an alert box');
})
})
Looks like you're just adding it wrong, you should be using single quotes inside the alert function, you're using double quotes so it's exiting the string and re-entering after the message:
onclick="alert("I am an alert box!");"
// should be
onclick="alert('I am an alert box!')"
It has been pointed out to me that it should be:
<video class="video-js" autoplay preload playsinline muted
poster="https:{{ section.settings.image | img_url: 'master' }}" controlsList="nofullscreen" onclick="alert('I am an alert box!');">
Unfortunately, it still fails.
Can you share a URL so we can take a look and see what's going on? I made a codepen the other day just to make sure it works on video elements and it was working for me.
Of course: https://goodwave-b-v.myshopify.com/
The password to enter on the website is: whohrt
Please inspect the video or click on it to get the alert, but I did not receive the alert :(.
This is an accepted solution.
I'm not entirely sure why that's not working, but it looks like all that is getting loaded in after the DOM through javascript or something, so that may be the case. You can add an event listener to the container for that video instead. Add this at the end of your theme.js file, there's a bit at the end of your file already that's throwing an error, you need to comment it out with double slashes at the beginning of the line. I'll include it here just so you can see the line, but just add the colored code in the snippet below that:
// this is your broken code, just add two slashes before it and it'll go light grey and comment it out
// $(window).on("resize", $.debounce(500, headerSize));
//then add this code underneath it.
document.addEventListener('DOMContentLoaded', function(){
let video = document.querySelector('div[data-section-id="1622579860237a54d2"]');
video.addEventListener('click', function(){
alert('I am an alert box');
})
})
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024