제품 페이지에 이형 상품의 남은 재고 표시

제품 페이지 또는 추천 제품 섹션에 제품 이형의 재고가 부족할 때 보유하고 있는 품목 수를 표시하는 메시지를 추가할 수 있습니다. 이 메시지를 표시하려면 제품의 재고 추적을 활성화해야 합니다.

이 사용자 지정 단계는 테마에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 지침을 따릅니다.

Debut

Debut용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
  var variantStock = {};
</script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% form 'product'찾습니다. 이 태그 위에 다음 코드를 추가합니다.

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{ current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

이 파일에 적용해야 하는 변경 사항은 사용하는 Debut 버전에 따라 다릅니다.

버전 17.8.0 이하

  1. theme.js.liquid 또는 theme.js를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 _updateAddToCart: function(evt) {찾습니다. 바로 아래에 다음 코드를 추가합니다.
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. if (variant.available) {찾습니다. } else { 문 앞에 다음 코드를 추가합니다.
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.

버전 17.9.0 이상

  1. theme.js.liquid 또는 theme.js를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 _setProductState: function(evt) {찾습니다. 바로 아래에 다음 코드를 추가합니다.
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
  1. 같은 기능에서 if (!variant) {찾습니다. } 괄호를 닫은 후 다음 코드를 추가합니다.
else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
Brooklyn

Brooklyn용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
  var variantStock = {};
</script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% form 'product'찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

  1. theme.js.liquid 또는 theme.js를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 if (variant.available) {찾습니다. } else { 문 앞에 다음 코드를 추가합니다.
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
Simple

Simple용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
  var variantStock = {};
</script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% form 'product'찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

  1. theme.js.liquid 또는 theme.js를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 if (variant.available) {찾습니다. } else { 문 앞에 다음 코드를 추가합니다.
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
Minimal

Minimal용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
  var variantStock = {};
</script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% form 'product'찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

  1. theme.js.liquid 또는 theme.js를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 if (variant.available) {찾습니다. } else { 문 앞에 다음 코드를 추가합니다.
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
Boundless

Boundless용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
  var variantStock = {};
    </script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% form 'product'찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

  1. 'theme.js.liquid' * 또는 *'theme.js'를 엽니다.
  2. theme.Product = (function() 코드를 찾습니다. var selectors = { 아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
  1. 같은 파일에서 $(selectors.SKU, this.$container).html(variant.sku);찾습니다. 바로 아래에 다음 코드를 추가합니다.
if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
Narrative

Narrative용 단계

편집 theme.liquid

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
  3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
  4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
      var variantStock = {};
    </script>
  1. 저장을 클릭합니다.
  1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

    • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
    • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
  2. {% include 'product-form' %}찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

  1. 파일 맨 아래에 다음 코드를 추가합니다.
    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>
  1. 저장을 클릭합니다.

편집 custom.js

  1. custom.js을(를) 엽니다.
  2. 파일 맨 아래에 다음 코드를 추가합니다.
var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

  1. 저장을 클릭합니다.
적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.