Disappeared: Prices on product pages

Highlighted
New Member
2 0 1

We have several products with multiple price variations (eg: "Upfront & Subscription" and "Subscription Only"). On each product page there is a dropdown. You select the variant and the price should appear.

 

Recently, we closed our shop for a couple of months. Since reopening the shop, the function described above no longer works. You select the variant from the dropdown, but no price appears and the message asking you to select from the dropdown has also disappeared (when loading the page you can sometimes see it for a brief moment and then it disappears – it's got to be some kind of script issue I'm not seeing).

 

As far as I know, there have been no changes to the product page template code. What am I missing?

 

<!-- /templates/product.liquid -->
{% comment %}

  Rich snippets (itemscope, itemtype, etc.) for products are a theme requirement,
  and allow search engines to easily understand what the content is.

  For more information on these Scheme.org tags, visit:
    - http://schema.org/docs/gs.html

{% endcomment %}

{{ 'product.scss' | asset_url | stylesheet_tag }}

<div class="product-navigation">
  <div class="wrapper">
  	<a href="https://www.youralcove.com/collections">Back to shop</a>
  </div>
</div>

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}
  {% assign description = product.description | split: '---' %}
  {% assign faq = product.description | split: '===' | slice: 1 %}

  <div class="grid product-single">
    <div class="product-image">

      {% if product.images.size > 1 %}
      <div class="slider_container">
        <ul class="slider" id="ProductThumbs">

          {% for image in product.images %}
            <li class="slide">
              <a href="{{ image.src | img_url: 'master' }}" class="product-single__thumbnail">
                <img src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}" />
              </a>
            </li>
          {% endfor %}

        </ul>
      </div>
      {% endif %}

      <div class="product-single__photos {% if product.images.size == 1 or product.images.size < 1 %}only_one_available{% endif %}" id="ProductPhoto">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
        
        <img src="{% if product.featured_image %}{{ featured_image | img_url: 'master' }}{% else %}{{ 'product-no-image.gif' | asset_url }}{% endif %}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
        
      </div>
    </div>

    <div class="product-info">
      <div class="info-container">

        <div class="info">
          <h1 itemprop="name">{{ product.title }}</h1>

          <div class="product-description rte" itemprop="description">{{ description[0] }}</div> <!-- /product-description -->

          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">

            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

            <form action="/cart/add" data-productid="{{product.id}}"  method="post" enctype="multipart/form-data" id="AddToCartForm"> 

              {% if product.available %}{% include 'subscription-product' %}{% endif %} 
              
              <select name="id" data-productid="{{product.id}}" id="productSelect" class="product-single__variants">
                {% for variant in product.variants %}
                  <option {% unless variant.available %} disabled="disabled" {% endunless %} {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-title="{{ variant.title }}" data-value="{{ variant.metafields.subscriptions.discount_variant_id }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
                {% endfor %}
              </select>
                
              {% for collection in product.collections %}
                {% if collection.title == "packages" or collection.title == "Packages" %}
                  <div class="subscription_info">Please select a subscription type from above.</div>
                  {% else %}
                  <p class="h3">{{ product.price | money }}</p>
                {% endif %}
              {% endfor %}

              <button type="submit" name="add" id="AddToCart" class="btn">
                <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
            </form>
          </div> <!-- /offers -->
        </div>

      </div><!-- /info-container -->
    </div><!-- /product-info -->
  </div><!-- /product-single -->

  <div class="product-extra-info">
    <div class="wrapper">
      <div class="one-half description-container">
        <div class="description">
          <h3>Description</h3>
          <div class="description-content">{{ description[1] | split: "===" | slice: 0 }}</div>
        </div>
        <button class="read-more"><strong>Read more</strong></button>
      </div>
      <div class="one-half delivery">
        <h3>{{ pages.delivery.title }}</h3>
        <div class="delivery-content">
          {{ pages.delivery.content }}
        </div>
      </div>
    </div>
  </div>

  {% for collection in product.collections %}
    {% if collection.title == "packages" or collection.title == "Packages" %}
      <div class="faq">
        <div class="wrapper">
          <h2 class="h1">Frequently Asked Questions</h2>
          <div class="faq_items">{{ faq }}</div>
        </div>
      </div>
    {% endif %}
  {% endfor %}

</div><!-- /main itemscope -->

{% comment %}
  To take advantage of a callback on the select dropdown, add option_selection.js
  and customize the JS in timber.productPage as needed.

  Currently, timber.productPage does the following:
    - Hides your <select> tag from above
    - Breaks out the product variants into separate product options, if more than one exists
    - Generates a <select> tag for each product option
    - Enables/disables elements based on variant availability

  Callback notes:
    - Keep the callback available to the global scope (window.selectCallback) so that advanced
      addons can override it.
      * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

  {% for collection in product.collections %}
    {% if collection.title == "packages" or collection.title == "Packages" %}

      $("body").on("change", ".single-option-selector", function(){
        // track the menu change and make the according option of the hidden select tag
        // of the recharge plugin selected
        var thisTitle = $(".single-option-selector option:selected").val();
        var itemSelected = $("#productSelect option[data-title='"+thisTitle+"']").data("value");

        // disable the selected option
        $("#discount-select-{{ product.id }} option").attr("selected", false);
        // enable the newly selected option
        $("#discount-select-{{ product.id }} option[value='"+itemSelected+"']").attr("selected", true);

        // add info to the product description depending on the option selected
        {% for variant in product.variants %}
          {% if variant.title == "Up-front & Subscription" %}
            var price = "{{ variant.price | money }}";
            var upfront_monthly_price_no_currency = "{{ variant.compare_at_price | money_without_currency }}";
            var upfront_monthly_price = "{{ variant.compare_at_price | money }}";
            var description = "{{ pages.up-front-subscription-description.content | strip_html }}";
            description = description.replace("|price-upfront|", "<strong>"+price+"</strong>").replace("|price-monthly|", "<strong>"+upfront_monthly_price+"</strong>");
          {% elsif variant.title == "Subscription Only" %}
            var priceOnly = "{{ variant.price | money }}";
            var descriptionOnly = "{{ pages.subscription-only-description.content | strip_html }}";
            descriptionOnly = descriptionOnly.replace("|price-monthly|", "<strong>"+priceOnly+"</strong>");
          {% endif %}
        {% endfor %}
        if (thisTitle == "Up-front & Subscription"){
          $(".recurring_price_when_upfront_selected").html("<input type='hidden' name='properties[recurring_price]' value='"+upfront_monthly_price_no_currency+"' />"); // important not to have currency here
          $(".subscription_info").html("<p>"+description+"</p>");
        } else {
          $(".recurring_price_when_upfront_selected").html(" ");
          $(".subscription_info").html("<p>"+descriptionOnly+"</p>");
        }
      });
    {% endif %}
  {% endfor %}

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

{{ 'slick.js' | asset_url | script_tag }}
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'product.js' | asset_url | script_tag }}
0 Likes