제품 페이지에 이형 상품의 남은 재고 표시
제품 페이지 또는 추천 제품 섹션에 제품 이형의 재고가 부족할 때 보유하고 있는 품목 수를 표시하는 메시지를 추가할 수 있습니다. 이 메시지를 표시하려면 제품의 재고 추적을 활성화해야 합니다.
이 사용자 지정 단계는 테마에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 지침을 따릅니다.
Debut
Debut용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
theme.js.liquid
편집 또는 theme.js
이 파일에 적용해야 하는 변경 사항은 사용하는 Debut 버전에 따라 다릅니다.
버전 17.8.0 이하
-
theme.js.liquid
또는theme.js
를 엽니다. -
theme.Product = (function()
코드를 찾습니다.this.selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
_updateAddToCart: function(evt) {
을 찾습니다. 바로 아래에 다음 코드를 추가합니다.
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
-
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
버전 17.9.0 이상
-
theme.js.liquid
또는theme.js
를 엽니다. -
theme.Product = (function()
코드를 찾습니다.this.selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
_setProductState: function(evt) {
을 찾습니다. 바로 아래에 다음 코드를 추가합니다.
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
- 같은 기능에서
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
Brooklyn
Brooklyn용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
theme.js.liquid
편집 또는 theme.js
-
theme.js.liquid
또는theme.js
를 엽니다. -
theme.Product = (function()
코드를 찾습니다.this.selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
Simple
Simple용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
theme.js.liquid
편집 또는 theme.js
-
theme.js.liquid
또는theme.js
를 엽니다. -
theme.Product = (function()
코드를 찾습니다.this.selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
Minimal
Minimal용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
theme.js.liquid
편집 또는 theme.js
-
theme.js.liquid
또는theme.js
를 엽니다. -
theme.Product = (function()
코드를 찾습니다.this.selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
Boundless
Boundless용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
theme.js.liquid
편집 또는 theme.js
- 'theme.js.liquid' * 또는 *'theme.js'를 엽니다.
-
theme.Product = (function()
코드를 찾습니다.var selectors = {
아래에 다음 코드를 추가합니다.
inventoryHtml: '.inventoryWrapper',
- 같은 파일에서
$(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]}
를 포함해야 합니다..
- 저장을 클릭합니다.
Narrative
Narrative용 단계
편집 theme.liquid
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid
를 엽니다. - 코드에서 닫는
</head>
태그를 찾습니다. 닫는</head>
태그 위쪽 새 행에 다음 코드를 붙여넣습니다.
<script>
var variantStock = {};
</script>
- 저장을 클릭합니다.
product-template.liquid
편집 또는 featured-product.liquid
-
섹션 디렉토리에서
product-template.liquid
또는featured-product.liquid
를 엽니다.-
product-template.liquid
를 열어 이 기능을 제품 페이지에 추가합니다. -
featured-product.liquid
를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.
-
{% 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 }}
를 포함해야 합니다..
- 파일 맨 아래에 다음 코드를 추가합니다.
<script>
{% for variant in product.variants %}
variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
{% endfor %}
</script>
- 저장을 클릭합니다.
편집 custom.js
-
custom.js
을(를) 엽니다. - 파일 맨 아래에 다음 코드를 추가합니다.
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]}
를 포함해야 합니다..
- 저장을 클릭합니다.