Shopify/Liquid：现在购买与售罄：使用ELSIF代码购买时，售罄的按钮堆放在一个产品下，现在显示正确

Question

我整天都在反对这个代码。我设法使其几乎完美地工作，但是“售罄”的按钮堆叠在一个产品下，而不是在两种产品中的每一种中显示出售罄的产品。

用例：产品促销的礼物。我已经使用重量作为选择器可以使用每个产品的一种变体，因为购买优惠的礼物仅适用于某些产品尺寸。当我写了代码以一旦售罄而完全删除代码，但当特定变体缺货时，我希望显示一个“售罄”按钮。注意：产品的不同尺寸可能仍有库存，但是与购买礼品相关的产品售罄，因此我想出现一个“售罄”按钮。

我包括代码以及当前渲染的部分的图像，以便您可以看到正在发生的事情。

我添加的代码位于文件的底部。我认为我的循环效果不正确，但我无法弄清楚我错了。预先感谢您看！

态

{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
    - show_rating: {Boolean} Show the product rating. Default: false

    Usage:
    {% render 'product-card-gwp', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

  
<div class="card-wrapper">  
  <div class="card-information">
    <div class="card-information__wrapper">
      {%- if show_vendor -%}
        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
        <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
      {%- endif -%}

      {%- if product_card_product.featured_media -%}
        <h3 class="card-information__text h5">
          <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
            {{ product_card_product.title | escape }}
          </a>
        </h3>
      {%- endif -%}

      {%- for variant in product_card_product.variants -%}
      {% assign theweight = variant.weight | weight_with_unit: variant.weight_unit %}
      {%- if theweight == '9 g' and variant.inventory_quantity != 0 -%}       
      
      {% render 'price', product: product_card_product, use_variant: product_card_product.first_available_variant.id, price_class: price--large -%} 
           <div class="caption-with-letter-spacing light"> FREE SHIPPING </div>
           <div class="caption-with-letter-spacing light">   </div>

      {% continue %}
      {% endif %}
      {% endfor %}
    </div>
  </div>     
    
  <div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
    <div class="card__inner">
      {%- if product_card_product.featured_media -%}
        {%- liquid
          assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

          if product_card_product.featured_media.aspect_ratio == nil
            assign featured_media_aspect_ratio = 1
          endif
        -%}

        <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
          <div class="media media--transparent media--{{ media_size }} media--hover-effect"
            {% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
              src="{{ product_card_product.featured_media | img_url: '533x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt="{{ product_card_product.featured_media.alt | escape }}"
              loading="lazy"
              class="motion-reduce"
              width="{{ product_card_product.featured_media.width }}"
              height="{{ product_card_product.featured_media.height }}"
            >

            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
              <img
                srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
                  {{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
                src="{{ product_card_product.media[1] | img_url: '533x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ product_card_product.media[1].alt | escape }}"
                loading="lazy"
                class="motion-reduce"
              width="{{ product_card_product.media[1].width }}"
              height="{{ product_card_product.media[1].height }}"
              >
            {%- endif -%}
          </div>
        </div>
      {%- else -%}
        <div class="card__content">
          <h2 class="card__text h3">
            <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
              {{ product_card_product.title }}
            </a>
          </h2>
        </div>
      {%- endif -%}

      <div class="card__badge">
        {%- if product_card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
        {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
        {%- endif -%}
        
      </div>
    </div>
  </div>
</div>

    {%- for variant in product_card_product.variants -%}
    {% assign theweight = variant.weight | weight_with_unit: variant.weight_unit %}
    {%- if theweight == '9 g' and variant.inventory_quantity != 0 -%} 

        <form method="post" action="/cart/add">

          <input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
          <input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
          <input type="submit" value="Buy Now" class="button" />

        </form>
     {% elsif theweight == '9 g' and variant.inventory_quantity == 0 %}
      
         <div class="learn-more-button">
            <span>              
              <a href="{{ product_card_product.url }}" class="button">
                SOLD OUT
              </a>
             </span>
          </div>


    {% endif %}          
    {% endfor %}