NO BUG: Add to cart element in query loop > a tag

Bugs
1

Browser: Chrome 115
OS: Windows

Hi team,

If we convert the div into a tag in the query loop and use the add to cart element inside it, it will be completely broken. Is there a way to avoid this problem?

2

Hi @jolia,

Can you please share a screenshot of the issue and is this happening in the frontend or builder (or both)?

Thanks!

3

Hi @charaf, This bug occurs both in the editor and in the frontend.

in editor :

A
A908Ă—525 38.2 KB

in frontend

B
B1261Ă—465 21.2 KB

4

Hi @jolia,

Thank you for the screenshots. Yup, I was able to reproduce it too and added this to our internal bug tracker.

1 Like
5

Hi @jolia,

I’ve revisited this with the team and it seems the root of the issue here is that the “add to cart” element itself is inherently an <a> tag. When you place this inside another <a> tag (by converting the div to an a tag), it results in nested <a> tags, which is not permitted in HTML and can cause irregularities in browser rendering. You can refer to these discussions for more insights on why this structure is problematic:

However, you still have options to make the entire block clickable without nesting <a> tags. One solution could be to use custom CSS using ::after to create a clickable overlay. Here’s an example of how you could do this:

.your-div-class::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0); /* Transparent background to not cover your content */
}

Another method is to create a <div> element as a sibling to the “Add to cart” element and apply position:absolute; top:0; left:0; right:0; bottom:0; in the CSS to make the whole block clickable without conflicting HTML structures.

I hope that helps :slight_smile:

1 Like