How do I dynamically display text based off of variant ID

Highlighted
Tourist
11 0 1

How do I dynamically display text based off of variant ID? 

So I know enough code to compare variant.id or product.selected_variant vs whatever variant I want and then display the correct message, but the problem is that it won't update when someone selects a different variant. 

Now I know that I'm supposed to look for selectCallback but the problem is I'm not sure how to build off of what is already called. Code Attached Below

 
        
        
   
                      <form id="product-form-{{ product.id }}" action="/cart/add" method="post" class="add-item-form variants clearfix">
 
                          <!-- Begin product options -->
                          <div class="product-options {% if product.options.size == 0 %}border-top{% endif %} {% comment %}hidden{% endcomment %}">          
                            <div class="row select clearfix {% if hide_default_title %}hidden{% endif %}">
    
                              
    {% if product.options.size > 1 %}
      <div class="select hide">
        <select id="product-select-{{ product.id }}" name="id" class="multi_select">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 %}
      <div class="select hide">
        <h4 class='text-uppercase font-weight-bold tk-europa'>{{ product.options[0] }}</h4>
        <div class="color-label option-label tk-utopia-std col-xs-12"></div>
        <select id="product-select-{{ product.id }}" name="id">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <div class="select hide">
        <select id="product-select-{{ product.id }}" name="id">
          <option selected="selected" value="{{ product.variants.first.id }}" data-sku="{{ product.variants.first.sku }}">{{ product.variants.first.title }} - {{ product.variants.first.price | money }}</option>
        </select>
      </div>
    {% endif %}
 
    {% if product.variants.size > 1 or product.options[0] != "Title" %}
      <div class="swatch_options">
        {% for option in product.options %}
          {% include 'product-swatch' with option %}
        {% endfor %}
      </div>
    {% endif %}
                              
                              </div>
 
                              <div class="row">
                                <p class="error italic col-xs-12 col-sm-6 col-md-12 col-lg-12 fadeOut" id="sold-out" >
                                  Sold out online - Check with your <a href='/pages/locate-a-dealer'><u>local dealer</u></a> for availability
                                </p>
                                <p class="error italic absolute col-xs-12 col-sm-6 col-md-12 col-lg-12 fadeOut" id="unavailable">
                                  We're sorry, this option is not available
                                </p>
                                
                              </div>
 
                              
 
                              <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12">
                                  <div class="form-group">
                                  {% if true or product.available %}
<!--                                     Nhan add link here-->
                                 
<p>product-select-{{ product.id }}</p>
                                    <input type="submit" class="buy-now btn btn-inverse tk-europa" id="add-to-cart" name="add" value="PREORDER" />
                                    
                                    <span class="select-size-text font-italic tk-utopia-std"></span>
                                  {% endif %}
                                  </div>
                                </div>
 
                                <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12">
                                  
                                  {% if shop.domain == "www.changeatire.com" %}
                                    {% if product.type == "changeatire" %}
                                    <a href="#" class="tk-europa" data-toggle="modal" data-target="#shipping-modal">
                                      <b>Shipping & Assembly Options</b>
                                      <br><i>learn more</i>
                                    </a>
 
                                    <div class="modal fade" id="shipping-modal" tabindex="-1" role="dialog" aria-labelledby="shippingOptionsModalLabel">
                                      <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h2 class="modal-title" id="shippingOptionsModalLabel">Shipping Options</h2>
                                          </div>
                                          <div class="modal-body">
                                            <img src="{{ 'shipping-options.jpg' | file_url }}" />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    {% else %}
                                  <a href="https://www.changeatire.com/pages/online-ordering-faq"><b>Shipping & Assembly Options</b></a>
 
                                    {% endif %}
                                  {% endif %}
                                  
                                  
                                </div>
 
                              </div>
 
                          </div> 
                      </form>
                    
                    
  {% if true or product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('.product-{{ product.id }}');
          $product_json = {{ product | json }};
          new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: $product_json, onVariantSelected: selectCallback{% if template contains 'product' %}, enableHistoryState: true{% endif %} });
        });
      // ]]>
    </script>
0 Likes