Container-Umleitung zu URL, aber geschachtelter Anker wechseln zu anderer URL als Container

Question

Also habe ich eine Vorlage in Shopify, die ich versuche, Benutzer auf eine Info-Seite umzuleiten, wenn sie angeklickt wird. Das ist ziemlich einfach, mit der Ausnahme, dass in diesem Container zwei verschachtelte Links vorhanden sind. Der 'Learn More' geht auf die Seite, die der Container sollte, aber die 'Jetzt kaufen'-Schaltfläche nicht. Es muss auf die Buy Now-Seite gehen.

Ich habe jQuery verwendet, um dies zu erreichen, weil die ganze Sache in einem Anker-Tag verschachtelte einfach nicht funktioniert hat.

Die jquery ich bisher haben:

$(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; 
     //}); 
     }); 

in der Route undefined zurück, wenn ich auf eine beliebige Stelle.

Die Vorlage sieht wie folgt aus:

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

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

     <a 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 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" href="{{ link_name }}"> 
      Learn More 
     </a> 
     </div> 

    </div> 

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

    </div> 

Wie erreichen ich, was ich tun möchte?

Vielen Dank! funktionierte perfekt

Answer 1

Verhindern, dass der Standard und stoppen Ausbreitung auf der <a> klicken

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

Oder ein Handler für beide verwenden und das Ziel des

$(".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"); 
    } 

});