Ad

Shopify Liquid Closing Html A Tag Early

- 1 answer

the following html+liquid code is not out putting what it should.

<div  class="collection-item">
	<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ collection.url }}">
		<img src="{{ collection_image }}" alt="{{ collection_alt | escape }}" class="img-responsive collection-img">
		<p class="collection-title">{{ collection_title}}</p>
		<div class="hover-content">
			<div class="hover-content__wrap">
				<p class="collection-title">{{ collection_title}}</p>
				<div class="divider"></div>
				<div class="cta">
					<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ collection.url }}" class="btn btn--primary">Explore<i class="fa fa-long-arrow-right"></i></a>
				</div>
			</div>
		</div>
	</a>
</div>

in browser its closing the a tag early, and also outputting it multiple time unnecessarily, cant understand why.

<div class="collection-item">
  <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/hats" style="
    display: block;
">
		<img src=" //cdn.shopify.com/s/files/1/0746/5419/collections/hats_collection_500x500.png?v=1516731948 " alt=" Hats " class="img-responsive collection-img">
		<p class="collection-title"> Hats </p>
	</a>
  <div class="hover-content">
    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/hats"></a>
    <div class="hover-content__wrap">
      <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/hats">
        <p class="collection-title"> Hats </p>
        <div class="divider"></div>
      </a>
      <div class="cta">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/hats"></a>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/hats" class="btn btn--primary">Explore<i class="fa fa-long-arrow-right"></i></a>
      </div>
    </div>
  </div>

</div>

Ad

Answer

You have an <a> wrapping another <a>

Ad
source: stackoverflow.com
Ad