编辑Shopify主题时无法启用商品售罄状态显示功能

Let's tackle this issue step by step. Looking at your current product-grid-item.liquid code, you already have the sold_out variable defined, but you're not using it to render the overlay or disable product links. Here's how to implement the feature properly:

1. Update product-grid-item.liquid Code #

Replace your existing product-grid-item.liquid code with the modified version below. I've added the sold-out overlay, disabled links for sold-out products, and hidden the add-to-cart button when items are out of stock:

{% 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 %}">
    <!-- Sold-out overlay -->
    {% if sold_out %}
    <div class="block2-soldout-overlay"></div>
    {% endif %}

    <!-- Product image link (disabled if sold out) -->
    <a {% if sold_out %}href="javascript:void(0)" onclick="return false;"{% else %}href="{{ product.url | within: collection }}"{% endif %}>
      <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
    </a>

    <!-- Overlay actions (disabled if sold out) -->
    <div class="block2-overlay trans-0-4" {% unless sold_out %}onclick="location.href= '{{ product.url }}'"{% endunless %} >
      <a {% if sold_out %}href="javascript:void(0)" onclick="return false;"{% else %}href="{{ product.url }}"{% endif %} 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>

      <!-- Add to cart button (hidden if sold out) -->
      {% unless sold_out %}
      <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>
      {% endunless %}
    </div>
  </div>

  <div class="block2-txt p-t-20">
    <!-- Product title link (disabled if sold out) -->
    <a {% if sold_out %}href="javascript:void(0)" onclick="return false;"{% else %}href="{{ product.url | within: collection }}"{% endif %} class="block2-name dis-block s-text3 p-b-5">
      {{ product.title }}
    </a>
    <!-- Rest of your existing block2-txt content (if any) -->
  </div>
</div>

2. Add CSS for Sold-Out Overlay #

Add this CSS to your theme's stylesheet (usually theme.css or styles.scss.liquid) to style the sold-out overlay:

.block2-soldout-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.block2-soldout-overlay::after {
  content: "{{ 'products.product.sold_out' | t }}";
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 2px solid #ffffff;
  border-radius: 4px;
}

Key Changes Explained #

• Sold-out overlay: Renders a semi-transparent overlay with a localized "Sold Out" message when sold_out is true.
• Disabled links: All product links (image, title, overlay click) are set to non-functional and prevent default click behavior for sold-out items.
• Hidden add-to-cart button: The add-to-cart button is completely hidden for sold-out products instead of being visible but non-functional.

Optional: Secure Product Page Access #

To prevent users from manually navigating to sold-out product pages, add this check at the top of product.liquid:

{% if product.available == false %}
<div class="sold-out-page-overlay">
  <h2>{{ 'products.product.sold_out' | t }}</h2>
  <p>This item is no longer available for purchase.</p>
  <a href="{{ collections.all.url }}" class="btn">Browse Other Products</a>
</div>
<style>
.sold-out-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  text-align: center;
}
</style>
{% endif %}

This will show a full-page message instead of the product details when the item is sold out.

内容的提问来源于stack exchange，提问作者John Henderson