Shopify Dawn 主题 - 液体问题 - 我的收藏部分中出现空白，但条件尚未满足

Question

概念：我在主页上构建了一个自定义部分，该部分应仅显示产品系列中的第一个产品变体。注意：购买时赠送的礼物仅提供特定型号的尺寸，尺寸因产品而异。

尝试的解决方案：使用“variant.weight”作为选择器，仅显示变体有可用库存且重量正确的商品。注意：这家商店不会通过 Shopify 发货。运输时不需要使用重量。

问题：存在空白点，其中集合中的商品不符合条件，因为款式不符合重量要求或没有可用库存。

问：

1. 如何修复此代码以使空格消失？我假设我需要添加 {% else %} 代码，但我不知道要添加到该行中。我尝试了 {% continue %} 但没有实现我想要实现的目标。
2. 我可以将缺货商品显示为“已售完”而不是保留它们吗 删除？ （我意识到我编写的代码是为了删除没有 库存，我在学习时迭代我的代码）
3. 是否有我错过的更优雅的修复/解决方案？

网站：https://test-store-colleen.myshopify.com/ 密码：thanksforyourhelp

出现问题的主页上的集合快照

这是代码片段：

{% 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 }}

    {%- 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 -%}    



<div class="card-wrapper">

  {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
  {% unless the_snippet_fave_icon contains 'Liquid error' %}
  {{ the_snippet_fave_icon }}
  {% endunless %}
  
  <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 -%}
      
      {% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
      {% unless the_snippet_review_avg contains 'Liquid error' %}
      {{ the_snippet_review_avg }}
      {% endunless %}

      {% comment %} TODO: metafield 
      <span class="caption-large light">{{ block.settings.description | escape }}</span>
      {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
        {% liquid
          assign rating_decimal = 0 
          assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1 
          if decimal >= 0.3 and decimal <= 0.7
            assign rating_decimal = 0.5
          elsif decimal > 0.7
            assign rating_decimal = 1
          endif 
        %}
        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
        </div>
        <p class="rating-text caption">
          <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
        </p>
        <p class="rating-count caption">
          <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
          <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
        </p>
      {%- endif -%}
      {% endcomment %}
 
{% comment %}      
     Original code NOTE: Also added line for "Free Shipping" below
     {% render 'price', product: product_card_product, price_class: '' %}
      
     Colleen modified code below to show the first variant price under the product on the collection gwp page     
      
{% endcomment %}
      
      {% 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>
    </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>

{% comment %} 
Code added by Colleen to create add to cart button 
{% endcomment %}



<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>

    {% endif %}          
    {% endfor %} 
 

这是部分代码：

{% comment %}
also edited en.default.schema.json to add settings for 
featured-collection-gwp
{% endcomment %}

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}>
    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
 

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
   <ul id="gwp-section"
    class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
           {% render 'product-card-gwp',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">                               
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
      </ul>
    {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ section.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.featured-collection-gwp.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "GWP Collection",
      "label": "t:sections.featured-collection-gwp.settings.title.label"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection-gwp.settings.collection.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 8,
      "label": "t:sections.featured-collection-gwp.settings.products_to_show.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection-gwp.settings.show_view_all.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection-gwp.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection-gwp.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection-gwp.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection-gwp.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection-gwp.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection-gwp.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection-gwp.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.featured-collection-gwp.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.featured-collection-gwp.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection-gwp.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection-gwp.settings.show_rating.label",
      "info": "t:sections.featured-collection-gwp.settings.show_rating.info"
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection-gwp.presets.name"
    }
  ]
}
{% endschema %}

Answer 1

在这里以下面的代码；
在您{％渲染'product-card-gwp％}之前，请如果条件；

{% if condition is met %}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
       {% render 'product-card-gwp',
        product_card_product: product,
        media_size: section.settings.image_ratio,
        show_secondary_image: section.settings.show_secondary_image,
        add_image_padding: section.settings.add_image_padding,
        show_vendor: section.settings.show_vendor,
        show_image_outline: section.settings.show_image_outline,
        show_rating: section.settings.show_rating
      %}
    </li>
{% endif %}

另外，使用variant.Wewirt和variant.weight_unit而不是，这将为您提供更大的灵活性，因为重量是数字而不是字符串。

{% assign theweight = variant.weight%}
{%- if theweight == 9 and variant.inventory_quantity != 0 -%}

Answer 2

我收到了另一个论坛的建议，向主题中添加一些代码。在＆lt;/body＆gt;标签上方。

该解决方案可行，但正如海报所警告的那样，这不是最优雅的解决方案，可能会引起其他问题。但是，在此处发布，以防万一它可以帮助其他人遇到类似问题。

<style>

</style>
<script>
function removeEmptySpaces(){

    var $items = document.querySelectorAll(`#gwp-section .grid__item`);

for (var each of $items){
    var $child = each.querySelector(`form`);

    if (!$child){
        each.remove();
    }
}
}
removeEmptySpaces()
</script>