Product prices disappeared

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 ).

 

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 }}

 

 

1 Like
Highlighted
Tourist
3 0 1

I have the same problem, I am so sorry I am the first person to reply to this and still not have an answer, but at least I can say when it happened!

 

So I did all my changes and turning on my store right, all the pages, dropdowns, collections, even added a few products and I even added a few apps, nothing relevant to this topic im sure.

 

Now comes when it happened... After all that I just said, I was editing my checkout page, changing the style, the Typography, colors, etc... and I clicked Save. It was then I realized all my products were doing the same as yours, I have absolutely no idea how to work my way around this.

 

I even followed a tutorial on Shopify to my theme, that only messed up my dropdowns now I can't even see my store straight. And I'm sure I followed it through perfectly. I'll even leave the tutorial here.

 

https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-dr...

 

0 Likes
Highlighted
Excursionist
66 0 0

Hi, dear Shopify hide price app is wonderful for hiding the product prices and add to cart function for customer tags and products.  It enables you to create custom rules for customer’s products, replace add to cart button with contact form and customize its button label, font color, form label, and fields. 

 

99b567d7538ae0925e3c78480380c000

0 Likes