title: How to include variant price in variant select dropdown while retaining option_selection.js
body: <p>I'm using shopify and would like to show the variant price in the variant selector dropdown. Shopify uses an asset named <code>option_selection.js</code> to implement variant selection features. This asset is necessary for proper operation of the site; however, this asset overwrites the select tag that is created in the <code>product.liquid</code> file.</p>
  
  <p>Without <code>option_selection.js</code> included, you can simply add the variant price to each option in the <code>product.liquid</code> file. Something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="variants-wrapper clearfix {% if product.variants.size == 1 %}visuallyhidden{% endif %}"&gt; 
      &lt;select id="product-select" name="id"&gt;
          {% for variant in product.variants %}
              &lt;option value="{{ variant.id }}"&gt;{{ variant.title | escape }} - {{ variant.price | money }}{% if variant.available == false %} - No Stock{% endif %}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, with <code>option_selection.js</code> enabled, this select dropdown is replaced with a different one containing only the variant title and no other information.</p>
  
  <p>After some trial and error I found that I could overwrite <code>Shopify.Product.prototype.optionValues</code> in a script tag placed directly after the <code>option_selection.js</code> script tag with the following snippet:</p>
  
  <pre class="lang-js prettyprint-override"><code>Shopify.Product.prototype.optionValues = function(o) {
    if (!Shopify.isDefined(this.variants)) return null;
    var t = Shopify.map(this.variants, function(t) {
      var e = "option" + (o + 1);
      if(t[e] == undefined) {
        return null
      } else {
        var value = t[e] + " - " + Shopify.formatMoney(t.price)
        if(!t.available) value += " - No Stock"
        return value
      }
    });
    return null == t[0] ? null : Shopify.uniq(t)
  }
  </code></pre>
  
  <p>That snippet overwrites the following snippet:</p>
  
  <pre class="lang-js prettyprint-override"><code>Shopify.Product.prototype.optionValues = function(o) {
      if (!Shopify.isDefined(this.variants)) return null;
      var t = Shopify.map(this.variants, function(t) {
          var e = "option" + (o + 1);
          return t[e] == undefined ? null : t[e]
      });
      return null == t[0] ? null : Shopify.uniq(t)
  }
  </code></pre>
  
  <p>However, this causes the rest of the features implemented in <code>option_selection.js</code> to stop working entirely. I don't understand why this change should affect the rest of the script, but it does.</p>
  
  <p>To test for this, you can create an item with two variants, one available and one unavailable. Selecting the available item should enable the "Add to cart" button, while selecting the unavailable option should disable the button. This is one of many features implemented by <code>option_selection.js</code> that fails once this attempted fix is implemented.</p>
  
  <p><strong>How can I go about including the variant price in the variant select dropdown while retaining option_selection.js and its features?</strong></p>
  
  <hr>
  
  <ul>
  <li>This question is related to but not a duplicate of: <a href="https://stackoverflow.com/questions/25613866/shopify-option-selection-js-how-to-modify">Shopify option_selection.js - how to modify?</a></li>
  <li>This question on the shopify forums is very similar to the question here with no resolution (or an inadequate resolution): <a href="https://community.shopify.com/c/Shopify-Design/Display-variant-pricing-in-dropdown-box/td-p/74708" rel="nofollow noreferrer">Display variant pricing in dropdown box</a></li>
  <li>This is another question on the shopify forums asking for the same thing with a massive code dump and no answers: <a href="https://community.shopify.com/c/Shopify-Design/Variant-Price-not-showing-in-drop-down/td-p/397106" rel="nofollow noreferrer">Variant Price not showing in drop down</a></li>
  <li>This is another question on the shopify forums asking for the same thing with an answer that isn't suggested here but is inadequate for a number of reasons: <a href="https://community.shopify.com/c/Shopify-Design/Show-variant-and-the-PRICE-on-the-drop-down-selector/td-p/335295" rel="nofollow noreferrer">Show variant and the PRICE on the drop down selector</a></li>
  <li>This is another question on the shopify forums asking for the same thing where the author did some preliminary digging into the <code>option_selection.js</code> file but never received an answer: <a href="https://community.shopify.com/c/Shopify-Design/Having-prices-next-to-variant-options-drop-down/td-p/391535" rel="nofollow noreferrer">Having prices next to variant options drop down</a></li>
  </ul>