Liquid, JavaScript, themes, sales channels
Below I have code that shows one of the preset banner randomly.
However I want to have individual link for each of the banner.
As you can see in the code, currently it only has one same link for every banner.
Can anyone advice how to insert separate link for each of the images in the code ?
<script type="text/javascript">
var imageCount = 4;
$(function(){
var whichImage=get_random();
var image=new Array(imageCount)
image[0] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}\" />";
image[1] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}\" />";
image[2] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}\" />";
image[3] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}\" />";
function get_random() {
var ranNum= Math.floor(Math.random()* imageCount );
return ranNum;
}
$('#randimage p a').prepend(image[whichImage]);
});
</script>
<div id="randimage" align="center"><p><a href="https://alatolahraga.id"></a></p></div>
I also have the same problem. Hope someone can assist 🙂
What are the problem you're facing on your Shopify banner in the home page?
I can help you
Hello,
So you need to add the link from the image variable declaration and replace the existing a tag, see below:
<script type="text/javascript">
var imageCount = 4;
$(function(){
var whichImage=get_random();
var image=new Array(imageCount)
// Add the link for each picture here
image[0] = "<a href="https://customLink1"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}\" /></a>";
image[1] = "<a href="https://customLink2"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}\" /></a>";
image[2] = "<a href="https://customLink3"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}\" /></a>";
image[3] = "<a href="https://customLink4"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}\" /></a>";
function get_random() {
var ranNum= Math.floor(Math.random()* imageCount );
return ranNum;
}
// Replace the html in the p tag with your random link + picture html
$('#randimage p').html(image[whichImage]);
});
</script>
<div id="randimage" align="center"><p><a href="https://alatolahraga.id"></a></p></div>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024