markdown 将库存指示器按钮添加到产品页面

Posted 2021-05-05

**Theme:** Debut

**Version(s) successfully tested on:** 12.0.0

**Recommended design time:** 10 min

-----

# What you want
![screenshot](https://screenshot.click/2019-06-14_15-14-01.jpg)
# What you have
![screenshot](https://screenshot.click/2019-06-14_15-15-11.jpg)
----

# How you get it 
This tutorial adds a little button and text label above the Add to Cart button that indicates whether or not an item is in stock. This has been tested with the latest version of Debut.

**Step 1:** Navigate to the product-template.liquid. Paste the following code underneath the quantity selector element

```
{% if section.settings.display_stock_indicator %}
 
  <div id="inStockIndicator">
    <div class="in-stock-indicator-icon {% if current_variant.available %} in-stock-color {% else %} out-of-stock-color {% endif %}"></div>
    <span class="in-stock-indicator-text">{% if current_variant.available %}{{ 'products.product.in_stock' | t }}{% else %}{{ 'products.product.out_of_stock' | t }}{% endif %}</span>
  </div>

{% endif %}
  ```

**Step 2:** Add the following code to the bottom of the product-template.liquid

```
<script>
  const in_stock_language = "{{ 'products.product.in_stock' | t }}"; 
  const out_of_stock_language = "{{ 'products.product.out_of_stock' | t }}"; 
  var variant_inventory = [];
  {% for variant in product.variants %}
    variant_inventory[ {{ variant.id }} ] = {{ variant.inventory_quantity }};
  {% endfor %}
</script>

<style>
  .in-stock-indicator-icon.in-stock-color {
   background-color: {{ section.settings.in_stock_color }}
  }
  .in-stock-indicator-icon.out-of-stock-color {
   background-color: {{ section.settings.out_of_stock_color }}
  }
</style>
```
**Step 3:** Add the following code to the bottom of the product-template.liquid schema
```
    {
       "type":      "header",
       "content":   "Stock Indicator"
    },
    {
       "type": "checkbox",
       "id": "display_stock_indicator",
       "default": true,
       "label": "Display stock indicator"
    },
    {
       "type": "color",
       "id": "in_stock_color",
       "label": "In stock color",
       "default": "#000000"
    },
    {
       "type": "color",
       "id": "out_of_stock_color",
       "label": "Out of stock color",
       "default": "#000000"
    }
```

**Step 4:** In your assets/theme.js file, find the _onSelectChange: function(). Add the following code somewhere after the last of the variant checks - this.currentVariant = variant;

```
if (variant_inventory[ variant.id] > 0) {
   $('#inStockIndicator').empty()
   $('#inStockIndicator').append(`<div class="in-stock-indicator-icon in-stock-color"></div><span class="in-stock-indicator-text in-stock">${in_stock_language}</span>`);
} else if (variant_inventory[ variant.id] == 0) {
  $('#inStockIndicator').empty()
   $('#inStockIndicator').append(`<div class="in-stock-indicator-icon out-of-stock-color"></div><span class="in-stock-indicator-text out-of-stock">${out_of_stock_language}</span>`);
}
```

**Step 5:** Add the following code to the bottom of the theme.scss file

```
#inStockIndicator {
  display: block; 
  position: relative;
  margin-bottom: 1em;
  width: 100%;
  padding: 0 5px;
  margin-bottom: 0;
}
 
.in-stock-indicator-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-right: 1em;
  position: absolute;
  top: 4px;
}
 
.in-stock-indicator-text {
  display: inline-block;
  margin-left: 2em;
}
```

**Step 6:** In your locale/language file, add the following in `Products > Product` underneath `"shipping_policy_html": "<a href=\"{{ link }}\">Shipping<\/a> calculated at checkout."`

```
"in_stock": "In stock",
"out_of_stock": "Out of stock"
```
---
**Additional notes:** Merchants can control the language in their language editor

**Alternative keywords:** quantity, button, in-stock, out-of-stock