2016-08-31 2 views
3

다음 옵션을 사용하여 재고가없는 변형으로 연결되는 경우 재고 부족으로 표시하기 위해 장바구니 추가 버튼을 업데이트하려고 시도합니다.이 코드가 장바구니에 추가 버튼의 동작을 업데이트하지 않는 이유는 무엇입니까?

드롭 다운 메뉴가 변경되면 코드가 실행됩니다. 가격은 원하는대로 업데이트되므로 잘 작동하는 것으로 알고 있습니다.

하지만 결국 'else'가 조합을 사용할 수없는 경우에도 왜 절대 발사되지 않는지 이해할 수 없습니다.

function letsDoThis() { 
     {% if product.options[0] %}var opt1 = document.getElementById('select-one').value;{% endif %} 
     {% if product.options[1] %}var opt2 = document.getElementById('select-two').value;{% endif %} 
     {% if product.options[2] %}var opt3 = document.getElementById('select-three').value;{% endif %} 
     var id = ''; 
     {% for v in product.variants %} 
     if(opt1=="{{ v.option1 }}"{% if product.options[1] %} && opt2=="{{ v.option2 }}"{% endif %}{% if product.options[2] %} && opt3=="{{ v.option3 }}"{% endif %}) { 
       var id = {{ v.id }}; 
       var price = "{{ v.price | money }}"; 
      } 
     {% endfor %} 
     if(id!='') { 
      document.getElementById('product-select').value = id; 
      document.getElementById('price').innerHTML = price; 
      document.getElementById('add').className += " enable-add"; 
     } else { 
      document.getElementById('product-select').value = ''; 
      document.getElementById('price').innerHTML = 'Unavailable'; 
      document.getElementById('add').className += " disable-add"; 
     } 

    } 

아래 이미지 위의 코드에 의존되는 부분을 나타낸다 : 이는 라인 var id = {{ v.id }}에서 코드 버그있다

Section of the page that this impacts...

+0

var id = "{{ v.id }}" 당신이 다음, 드롭 다운을 작성하거나 Shopify의 링크 옵션 선택기를 사용하거나 활용하는 selectCallback에 사용자 지정 코드를 추가 할 Shopify의 OptionSelectors를 사용할 수없는 어떤 이유가 있습니까 플랫폼 용으로 이미 작성된 것들? 이 코드의 문제를 해결하기 위해이 코드가 활성화 된 사이트를 공유 할 수 있으므로 코드를 단계별로 실행하여 어디에서 정보를 볼 수 있습니까? 맞춤법이 틀린 클래스 이름이나 ID가 어딘가에있을 수 있습니다. –

+0

답장을 보내 주셔서 감사합니다. 나는 Shopify의 OptionSelectors를 사용하여 결국 작동 시켰습니다. 내가 그것을 피하는 이유는 드롭 다운의 스타일을 사용자 정의하는 데 사용했던 플러그인 simpleselect.js와 충돌하기 때문입니다. 건배. – Ben

답변

0

를 제

견적이 누락되었을 수 있습니다. 그래서 지금은 읽을 것입니다 :

function letsDoThis() { 
    {% if product.options[0] %}var opt1 = document.getElementById('select-one').value;{% endif %} 
    {% if product.options[1] %}var opt2 = document.getElementById('select-two').value;{% endif %} 
    {% if product.options[2] %}var opt3 = document.getElementById('select-three').value;{% endif %} 
    var id = ''; 
    {% for v in product.variants %} 
    if(opt1=="{{ v.option1 }}"{% if product.options[1] %} && opt2=="{{ v.option2 }}"{% endif %}{% if product.options[2] %} && opt3=="{{ v.option3 }}"{% endif %}) { 
      var id = "{{ v.id }}"; 
      var price = "{{ v.price | money }}"; 
     } 
    {% endfor %} 
    if(id!='') { 
     document.getElementById('product-select').value = id; 
     document.getElementById('price').innerHTML = price; 
     document.getElementById('add').className += " enable-add"; 
    } else { 
     document.getElementById('product-select').value = ''; 
     document.getElementById('price').innerHTML = 'Unavailable'; 
     document.getElementById('add').className += " disable-add"; 
    } 

} 
관련 문제