将缺货添加到产品卡网格页面

Question

我正在尝试将following "out of stock" code应用于 product-card-grid.liquid 页面，但它似乎只适用于一个项目，即 product-template.liquid ，而不是全部。我认为这是因为引用的实现仅适用于一个页面而不适用于多个项目列表。如何更新它以便不是这种情况？

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% unless product.featured_image == blank %}
      {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
    {% endunless %}

    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
             class="grid-view-item__image lazyload"
             src="{{ product.featured_image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>

    <noscript>
      {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
      <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
    </noscript>

    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>

    {% unless product.available %}
    <div id="sold-out" style="margin-top: 10px">
      {% form 'contact' %}
        {% if form.posted_successfully? %}
        <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
        {% else %}
        <p><a id="notify-me" class="product-page-notify-me" href="#" style="color: #788188;">Email me when available</a></p>
        {% endif %}
        {% if form.errors %}
        <div class="error feedback accent-text">
          <p>Please provide a valid email address.</p>
        </div>
        {% endif %}
        {% unless form.posted_successfully? %}
        <div id="notify-me-wrapper" class="clearfix" style="display:none">
          {% if customer %}
          <input type="hidden" name="contact[email]" value="{{ customer.email }}" />
          {% else %}
          <input style="float:left; width:100%;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
          {% endif %}
          <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
          <input style="float:left;" class="btn styled-submit" type="submit" value="Send" />         
        </div>
        {% endunless %}
      {% endform %}
    </div>
    {% endunless %}

  </a>
</div>

更新

我已经尝试按如下方式编辑jQuery，修复了它，但是提交按钮会发送产品列表页面上所有项目的电子邮件：

jQuery（'。notify-me'）。click（function（）{   jQuery的（$（本）.closest（）找到（）淡入（） '接触形式。 '' 通知-ME-包装。'）;
  返回false; }）;