Is there a way to make the images of product cards clickable without using the ProductProminentImageClickable card type? I have an experience with several product verticals that have been customized quite a bit, and feel like it would be a high lift to fork a new card type and update the template/component files. Additionally, because we plan to utilize multiple CTAs, I think having the entire card clickable to the product landing page URL might cause issues. Any feedback is appreciated!
Thanks,
Katie
Hey Katie,
Yes, you can make images (or other content) clickable by using the HTML <a> tag to surround whichever element(s) you want to be clickable. The product-prominent image card is just easy to use since the HTML is all there for you, but you can replicate what is done in the Handlebars template of the card:
Callouts:
- As you can see the
<a> tag (opening on line 3, closing on line 19) surrounds the image, title, subtitle, details, and thumbsfeedback partials of the card, making all these items clickable.
- The opening and closing
<a> tags are surrounded by if statements checking to see if a URL is specified (lines 2+9, 19). This is an important null check since you only want to add a link if there’s a URL. Notice that the content inside the <a> tag, such as title and subtitle, are not enclosed in the if statements - we still want the content to show up even if there’s no link!
- The opening
<a> tag includes flags for the link (href), target, data-eventtype, and data-eventoptions to make sure the link and analytics are set up properly.
To replicate this in the product-standard template.hbs file, I would change this
into something like (changes are in the images partial):
I pulled the existing <a> tag from the title partial below. As always, make sure to test the code in your instance to ensure that the frontend works and the appropriate analytics events are coming through!
Thank you Kristy! Was able to successfully make the images clickable via the existing template.
