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，但不使用它。我认为你应该在某处使用它来渲染一个售罄的层......

编辑HTML / CSS主题似乎无法使其显示已售出

1 个答案: