Shopify의 색상 변형 표시 이름

Question

Shopify 프로젝트에서 색상 견본을 사용합니다. 선택한 색상 변형의 이름 만 표시하는 솔루션을 찾고 있습니다. 이것을 액체로 구현할 수 있습니까? 아니면 JavaScript 솔루션이 필요합니까?

은이 수행해야하는 위치를보세요 : printnil.com

{% for variant in product.variants %} 
<span>{{ variant.title }}</span> 
{% endfor %} 

Answer 1

당신이 사용자의 선택에 따라 표시되는 것을 변경하려면, 당신은 자바 스크립트를 사용해야합니다. 사용자가 자신의 선택을 변경할 때마다 호출되는 콜백을 만드는 방법에 대해 설명합니다 this tutorial in the Shopify docs를 살펴 보자 (이미 테마에서이있을 수 있습니다) :

var selectCallback = function(variant, selector) { 
    <your code goes here> 
} 

이 콜백 내에서 변형의 옵션에 액세스 할 수 있습니다. 예 : 색상이 첫 번째 옵션 인 경우 variant.option1을 사용하여 현재 선택한 색상을 가져옵니다.