Ad

Container Redirect To URL But Nested Anchor Go To Different URL Than Container

- 1 answer

So I have a template in Shopify that I am trying redirect users to an info page if it is clicked. That's pretty straight forward with the exception that there's two nested links in that container. The 'Learn More' goes to the page the container should, but the 'Buy Now' button doesn't. It needs to go to the buy now page.

I was using jQuery to accomplish this because nesting the whole thing in an anchor tag just didn't work.

The jquery I have so far:

$(document).ready(function() {
        $(".cross-sell-img-container").click(
          function() { window.location = $(this).find(".spec").attr("href");
          return false;
        });
        $(".purchase").click(function() {
          window.location = $(this).find(".purchase").attr("href");
          return false;
        });  
        //$(".cross-sell-img-container").click(function() {
          //window.location = $(this).find("a").attr("href");
          //return false;
        //});
      });

returns undefined in the route if I click anywhere.

The template looks like this:

<div class="cross-sell-img-container">

    <div class="detailed-cross-sell">

      <a target="_blank" rel="nofollow noreferrer" href="{{ product.url }}">
        <p class="detailed-cross-sell-title">{{ "The " | append: product.title }}</p>
      </a>

      <div class="detailed-cross-sell-image-container">
        {{ product.metafields.custom_fields["spec_preview_image"] | replace: '<img', '<img class="detailed-cross-sell-image"' }}
      </div>

      <div class="button-container">
        {% assign shop_url = product.metafields.custom_fields["domehastore.com_link"] %}
        <a target="_blank" rel="nofollow noreferrer" href="{% if shop_url %}{{ shop_url }}{% else %}{{ product.url }}#purchasing-area{% endif %}" class="button purchase" target="_blank">
          <span class="add-to-cart__text">Buy Now</span>
        </a>
        <!-- | replace: "/products", "/pages" | append: "-specifications" FP: add after product.url to make go to specs -->
        {% assign link_name = product.url %}
        <a class="button spec" target="_blank" rel="nofollow noreferrer" href="{{ link_name }}">
          Learn More
        </a>
      </div>

    </div>

    <div class="preview-cross-sell">
      <a class="preview-image" target="_blank" rel="nofollow noreferrer" href="{{ product.url }}">
        {{ product.metafields.custom_fields.cross_sell_preview_image }}
      </a>
    </div>

  </div>

How do I accomplish what I am trying to do?

Thank you!

Ad

Answer

Prevent the default and stop propagation on the <a> click

$(".purchase").click(function(e) {
    e.preventDefault()
    e.stopPropagation();
    window.location = $(this).find(".purchase").attr("href");    
});  

Or use one handler for both and check the target of the event

$(".cross-sell-img-container").click(function(event) {--?prettify?-->
$(".purchase").click(function(e) {
    e.preventDefault()
    e.stopPropagation();
    window.location = $(this).find(".purchase").attr("href");    
});  

Or use one handler for both and check the target of the event

$(".cross-sell-img-container").click(function(event) {
  var $link = $(event.target).closest('a.purchase');
  if ($link.length) {
    window.location = $link.attr('href');
  } else {
    window.location = $(this).find(".spec").attr("href");
  }

});
Ad
source: stackoverflow.com
Ad