javascript - 编辑 HTML/CSS 主题但似乎无法使其显示已售罄

Question

所以我正在编辑一个类似这样的 Shopify 主题:https://fashe-theme.myshopify.com/collections/all

对于这个主题，它应该禁用产品并有一个已售罄的覆盖层，禁止用户进入产品页面。

这是 product.liquid:

<!--  -->
      <div class="p-t-33 p-b-60">
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="form_buy">
          <div class="form-group p-b-10"  {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}style="display:none"{% endif %}>
            <select name="id" id="productSelect" class="form-control">
              {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
              {% else %}
              <option disbled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
              {% endif %}
              {% endfor %}
            </select>
            {% if product.available and product.variants.size > 1 %}
            
            {% for option in product.options %}
            {% include 'swatch' with option %}
            {% endfor %}
            {% endif %}
          </div>
          <div class="form-group">
            {% if settings.product_quantity_enable %}
            <div class="flex-r-m flex-w p-t-12">
              <div class="w-size160 flex-m flex-w">
                <div class="flex-w bo5 of-hidden m-r-22 m-t-10 m-b-10">
                  <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                  </button>
                  <input class="size8 m-text18 t-center num-product" type="number" id="Quantity" name="num-product" value="1">
                  <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="btn-addcart-product-detail size9 trans-0-4 m-t-10 m-b-10">
                  <!-- Button -->
                  <button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4" type="button" id="button-cart" data-loading-text="{{ 'products.product.loading' | t }}">
                    {{ 'products.product.add_to_cart' | t }}
                  </button>
                </div>
              </div>
            </div>
            {% endif %}
            {% if settings.product_quantity_message %}
            <span id="variantQuantity" class="variant-quantity"></span>
            {% endif %}
          </div>
        </form>
      </div>

这是显示产品缩略图的 product-grid-item.liquid 代码:

{% unless current_collection %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
{% assign sold_out = false %}
{% endif %}
{% assign img_size = settings.img_size_grid %}
<!-- Block2 -->
<div class="block2">
  {% assign product_created_at = product.created_at | date: '%s' %}
  {% assign time_ago = 'now' | date: '%s' | minus: product_created_at | divided_by: 86400 %}
  {% assign product_new_time = settings.product_new_time | times: 1 %}
  <div class="block2-img wrap-pic-w of-hidden pos-relative {% if time_ago < product_new_time %}block2-labelnew{% endif %} {% if on_sale %} block2-labelsale{% endif %}">
    <a href="{{ product.url | within: collection }}">
      <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
    <div class="block2-overlay trans-0-4" onclick="location.href= '{{ product.url }}'" >
      <a href="{{ product.url }}" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="{{ 'products.product.loading' | t }}" onclick="cart.add('{{ product.variants.first.id }}', '{{ product.title }}');">
          {{ 'products.product.add_to_cart' | t }}
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="{{ product.url | within: collection }}" class="block2-name dis-block s-text3 p-b-5">
      {{ product.title }}
    </a>
    {% if product.compare_at_price > product.price %}
    <span class="block2-oldprice m-text7 p-r-5">
      {{ product.compare_at_price_max | money }}
    </span>
    <span class="block2-newprice m-text8 p-r-5">
      {{ product.price | money }}
    </span>
    {% else %}
    <span class="block2-price m-text6 p-r-5">
      {{ product.price | money }}
    </span>
    {% endif %}
  </div>
</div>

Answer 1

如果没有现场演示，很难回答这个问题，在现场演示中可以使用 Web 浏览器的调试工具调查问题。

我建议您使用 Firefox 调试工具来查看 DOM 是如何在呈现的页面上构建的，以及您希望看到的图层所在的位置。也许它在另一层后面。或者它可能不存在。你必须自己做，也许有一些关于如何使用调试器的教程:https://www.youtube.com/watch?v=yueecwKDZxQ

否则，您将不得不共享呈现的 HTML 和页面的所有 CSS。

在第一个代码片段中，您只显示了一个用于禁用的选择选项。在第二个代码片段中，您只定义了变量 sold_out 但没有使用它。我认为您应该在某处使用它来渲染售罄层...