title: Need to change the html of button name based on selected variant
body: <p>I have created a condition to disable the add to cart button if there is inventory available in Shopify. I have the button working, but the i want to change the message to 'sold out' rathert than 'add to cart/ and disabled.</p>
  <p>Here is the code i have put togther so far, the selectedVariant function which is being passed into the validate function is not shown here, but is working at getting the active variant.</p>
  <pre><code>let addToCartFormSelector = '#add-to-cart-form'
  
  let productForm = {
  validate: function(event, selectedVariant) {
  
  let
    $form = $(this),
    hasVariant = selectedVariant !== null,
    canAddToCart = hasVariant &amp;&amp; selectedVariant.inventory_quantity &gt; 0,
  
          // Select a valid variant if available
          if (canAddToCart) {
            // Available, enable the submit button, change text, show quantity elements
            $id.val(selectedVariant.id);
            $(&quot;#spanid&quot;).html(&quot;Add to cart&quot;);
            $addToCartButton.prop('disabled', false)
          }
          else {
            // Sold out, disable the submit button, change text, hide quantity elements
            $id.val('');
            $(&quot;#spanid&quot;).html(&quot;Sold out&quot;);
            $addToCartButton.prop('disabled', true)
          }
        }
      }
  
  init: function() {
    $(document).on('form:change', addToCartFormSelector, productForm.validate);
  }
  </code></pre>
  <p>here is the html markup</p>
  <pre><code>{% form 'product', id: &quot;add-to-cart-form&quot; %}
  
          &lt;button
            id=&quot;add-to-cart-button&quot;
            type=&quot;submit&quot;
            name=&quot;add&quot;
            class=&quot;btn btn-main mx-auto w-100 js-cart-link&quot;
            {% if can_add_to_cart != true %}disabled{% endif %}&gt;
            &lt;span id=&quot;spanid&quot;&gt;
                {{ 'products.product.add_to_cart' | t }}
            &lt;/span&gt;
          &lt;/button&gt;
  
  {% endform %}
  
  </code></pre>