매진된 이형 상품 숨기기
이 페이지는 Apr 26, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants에서 확인하십시오.
제품 페이지에서 해당 이형 상품을 제거하거나 비활성화하여 고객이 매진된 이형 상품을 선택하지 못하도록 할 수 있습니다.
이 페이지의 정보
제한 사항
이 페이지에 설명된 사용자 지정은 다음 경우에는 작동하지 않습니다.
- 제품에 두 가지 이상의 제품 옵션이 있는 경우
- Express 테마를 사용하며 오버레이에 제품을 표시하도록 제품 페이지가 설정된 경우
섹션 지원 및 섹션 미지원 테마
섹션 구분된 테마의 단계
테마 선택
이 사용자 지정 단계는 테마에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 다음 지침을 따릅니다.
Boundless
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Brooklyn
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.remove();
}
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const radioButtons = section.querySelector('.single-option-radio');
let variantOptions;
if (radioButtons) {
variantOptions = section.querySelectorAll('.single-option-radio input');
} else {
variantOptions = section.querySelectorAll('.single-option-selector__radio option');
}
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
if (radioButtons) {
option.nextElementSibling.option.setAttribute('disabled', 'disabled');
}
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Debut
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Express
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid을(를) 클릭합니다. -
</body>코드를 찾습니다. 아래의 코드를 해당 코드 위의 행에 붙여넣습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const currentJson = JSON.parse(current.text);
if (currentJson.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < currentJson.variants.length; j++) {
const variant = currentJson.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.form__input--select option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});
</script>- 저장을 클릭합니다.
Minimal
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Narrative
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
custom.js을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[data-product-json]');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const section = current.closest('[data-section-id]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Simple
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Supply
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
Venture
이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다.
매진된 이형 상품 숨기기
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.remove();
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
매진된 이형 상품 비활성화
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
자산 디렉토리에서
theme.js또는theme.js.liquid을(를) 클릭합니다. - 파일 맨 아래에 다음 코드를 붙여넣습니다.
document.addEventListener('DOMContentLoaded', function() {
const productJson = document.querySelectorAll('[id^=ProductJson-');
if (productJson.length > 0) {
for (let i = 0; i < productJson.length; i++) {
const current = productJson[i];
const sectionId = current.id.replace('ProductJson-', '');
const section = document.querySelector('[data-section-id="' + sectionId + '"]');
const product = JSON.parse(current.text);
if (product.options.length === 1) {
const unavailableVariants = [];
for (let j = 0; j < product.variants.length; j++) {
const variant = product.variants[j];
if (!variant.available) {
unavailableVariants.push(variant);
}
}
if (unavailableVariants.length > 0) {
const mutationCallback = function() {
const variantOptions = section.querySelectorAll('.single-option-selector option');
if (variantOptions.length > 0) {
for (let k = 0; k < unavailableVariants.length; k++) {
const unavailableVariant = unavailableVariants[k];
for (let l = 0; l < variantOptions.length; l++) {
const option = variantOptions[l];
if (unavailableVariant.title === option.value) {
option.setAttribute('disabled', 'disabled');
}
}
}
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
}
}
const observer = new MutationObserver(mutationCallback);
const addToCartForm = document.querySelector('form[action*="/cart/add"]');
mutationCallback();
if (window.MutationObserver && addToCartForm.length) {
const config = { childList: true, subtree: true };
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
observer.observe(addToCartForm, config);
}
}
}
}
}
});- 저장을 클릭합니다.
섹션 구분되지 않은 테마의 단계
매진된 이형 상품 숨기기
섹션 구분되지 않은 테마를 사용하는 경우 다음 단계를 수행하여 제품 페이지에서 매된진 이형 상품을 숨길 수 있습니다.
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
- 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
- 새로운 코드 조각 이름 지정
remove-sold-out:
- 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.remove();
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}- 저장을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid을(를) 클릭합니다. - 파일 끝부분 근처에서
</body>태그 바로 앞에 다음 코드를 붙여넣습니다.
{% render 'remove-sold-out' %}- 저장을 클릭합니다.
매진된 이형 상품 비활성화
섹션 구분되지 않은 테마를 사용하는 경우 다음 단계를 수행하여 매진된 이형 상품을 비활성화할 수 있습니다. 이형 상품은 여전히 제품 페이지에 표시되지만 선택할 수 없습니다.
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
- 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
- 새로운 코드 조각 이름 지정
disable-sold-out:
- 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.setAttribute('disabled', '');
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}- 저장을 클릭합니다.
-
레이아웃 디렉토리에서
theme.liquid을(를) 클릭합니다. - 파일 끝부분 근처에서
</body>태그 바로 앞에 다음 코드를 붙여넣습니다.
{% render 'disable-sold-out' %}- 저장을 클릭합니다.