How to Make Featured Product Image and Title Clickable (Craft Theme)

[l1kim]

Hello,

How do you make both image and title of "Featured Product" clickable to its product page?

I would like it to be clickable WITHOUT underlining the Product Title as a link. 

https://putonlovemarket.com

[theycallmemakka]

Hi @l1kim 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
function getClosestViewDetailsLink(element) {
    return element.closest('.featured-product').querySelector('.product__view-details');
}

function handleClick(event) {
    var closestLink = getClosestViewDetailsLink(event.currentTarget);
    if (closestLink) {
        window.location.href = closestLink.href;
    }
}

document.querySelector('.featured-product .product__media-item')?.addEventListener('click', handleClick);

document.querySelector('.featured-product .product__title')?.addEventListener('click', handleClick);

</script>
<style>
.featured-product .product__title {
    cursor: pointer;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Raj-webdesigner]

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find Base.css file

Add this option if you just want to Only click on product total Than Put This Css

@media screen and (min-width: 767px){
       .collection .card__heading a:after{
		display:none;
	}
}

Otherwise This Css 

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}

And if you want to do both Than Put This Css

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}
@media screen and (min-width: 767px){
	.collection .card__heading a:after{
		display:none;
	}
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Raj-Webdesigner

[l1kim]

Hmm.. This worked only for the top product but not the product underneath. Would you please help me do the same for the 2nd product the one right under it?

https://putonlovemarket.com/pages/candle-workshop

[theycallmemakka · Accepted solution]

Hi @l1kim ,

Try replacing the previous code with the below code. Also do not forget to like and mark the answer as accepted.

<script>
function getClosestViewDetailsLink(element) {
    return element.closest('.featured-product').querySelector('.product__view-details');
}

function handleClick(event) {
    var closestLink = getClosestViewDetailsLink(event.currentTarget);
    if (closestLink) {
        window.location.href = closestLink.href;
    }
}

document.querySelectorAll('.featured-product .product__media-item')?.forEach(function(t){
    t.addEventListener('click', handleClick);
});
document.querySelectorAll('.featured-product .product__title')?.forEach(function(t){
    t.addEventListener('click', handleClick);
});


</script>
<style>
.featured-product .product__title {
    cursor: pointer;
}
</style>

[l1kim]

So amazing! It worked!

Thank you very much,

[kingbeehkb]

Hello,

I've used this code for the same purpose and it actually worked perfectly which I truly thank you for. But it causes some weird issue.
so when I zoom in (on mobile) on the product photo the page either refreshes or crashes! 
Would you actually be able to check that and help me with it? 

[l1kim]

Hello, I’m not sure why it would crash on your end… since I’m not an expert at this. Maybe write a new post about it asking for help?