How to make the whole product item card clickable

I have a Product Card like this:

enter image description here

As you can see there is a hyperlink named Buy at the end of card.

But rather than this link, I need to make the whole card clickable with a another hyperlink. (so users won't need to click on the Buy link, they just can click wherever inside the card)

Here is the code of this Card:

<div class="item">
    <div class="card border-0 position-relative">
            <div class="">
                <img src="" class="card-img-top" alt="">
            </div>
            <div class="stars position-absolute">
                <form id="starRate" action="" data-id="">
                    <label class="star star-5 storeRate"></label>
                    <label class="star star-4 storeRate"></label>
                    <label class="star star-3 storeRate"></label>
                    <label class="star star-2 storeRate"></label>
                    <label class="star star-1 storeRate"></label>
                </form>
            </div>
            <div class="card-body text-center">
                <h5 class="card-title">
                    Title
                </h5>
                <div class="price">
                <p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
                <p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
            </div>
            <a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
        </div>
</div>

So how can I made the whole card clickable without making any unwanted changes to style of cards.

2 answers

  • answered 2021-07-05 06:47 Prachi Sharma

    Put your whole div inside a tag.

    <a href="">
      <div class="item">
        <div class="card border-0 position-relative">
                <div class="">
                    <img src="" class="card-img-top" alt="">
                </div>
                <div class="stars position-absolute">
                    <form id="starRate" action="" data-id="">
                        <label class="star star-5 storeRate"></label>
                        <label class="star star-4 storeRate"></label>
                        <label class="star star-3 storeRate"></label>
                        <label class="star star-2 storeRate"></label>
                        <label class="star star-1 storeRate"></label>
                    </form>
                </div>
                <div class="card-body text-center">
                    <h5 class="card-title">
                        Title
                    </h5>
                    <div class="price">
                    <p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
                    <p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
                </div>
                <a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
            </div>
      </div>
    </a>
    

  • answered 2021-07-05 06:59 Jaydeep Chauhan

    Add link just after the card and close before buy now. that will fixed your problem.

    The parsers effectively treat an start tag inside an open a element as implicitly terminating the open element before starting a new one.

    So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

    <div class="item">
      <div class="card border-0 position-relative">
        <a href="#">
          <div class="">
            <img src="" class="card-img-top" alt="">
          </div>
          <div class="stars position-absolute">
            <form id="starRate" action="" data-id="">
              <label class="star star-5 storeRate"></label>
              <label class="star star-4 storeRate"></label>
              <label class="star star-3 storeRate"></label>
              <label class="star star-2 storeRate"></label>
              <label class="star star-1 storeRate"></label>
            </form>
          </div>
          <div class="card-body text-center">
            <h5 class="card-title">
              Title
            </h5>
            <div class="price">
              <p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
              <p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
            </div>
        </a>
        <a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
      </div>
    </div>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum