사용자가 별도로 옵션을 클릭하지 않아도 첫 번째 유효한 옵션이 자동 선택되게 하기

품절된 옵션은 선택할 수 없게 자동 비활성화(disabled 처리) 하기

 

템플릿 파일: shop/view.skin.php (또는 사용 중인 테마 위치)

옵션 처리 JS 파일: js/shop.js 또는 테마에 따라 별도 item.option.js 파일

 

1단계 품절 옵션은 비활성화 처리

document.querySelectorAll('.sit_option option').forEach(option => {
  if (option.text.includes('[품절]')) {
    option.disabled = true;
  }
});
 

[품절]이라는 단어가 옵션명에 포함돼 있다면 자동으로 선택 불가 처리

영카트는 기본적으로 품절 옵션에 [품절]을 붙이는 구조이므로 이 방식이 안정적입니다

 

2단계 유효한 옵션 자동 선택

document.querySelectorAll('.sit_option select').forEach(select => {
  const validOption = Array.from(select.options).find(
    o => !o.disabled && o.value !== ''
  );
  if (validOption) {
    select.value = validOption.value;
  }
});
옵션 중에 value가 있고 disabled가 아닌 첫 번째 항목을 찾아 자동 선택합니다

이렇게 하면 옵션 1개일 때 자동 선택되고, 사용자가 별도로 클릭하지 않아도 됩니다

 

사용 시 주의사항

옵션 변경 이벤트(change)를 수동으로 트리거해야 할 수 있습니다

const event = new Event('change');
select.dispatchEvent(event);
 

여러 옵션 조합(옵션 2~3개 조합형 상품)의 경우, 옵션 선택 순서에 따라 로직 분기 필요