So product price won't update when selecting variant on product page while on desktop!

Jose13
Shopify Partner
117 1 12

This product has two different variants with different price. When selecting the variant, price won't update on desktop, but it does update on mobile. This is an example product: Example product. I already checked the code, but can't figure out the issue. Maybe it is a js issue??

Here's the product template code (it is a customized template).

 

 

 

<div class="product-template__container page-width" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">

  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_image_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_image_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_image_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_zoom = false -%}
  {% endcase %}
  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
 

    <h1 class="desk_hide product-single__title_mob">Terrario <span class="font-ufo">UFO</span></h1></br>
<style>
  .font-ufo{
     font-family: "Alien" !important; 
     font-size: 1.5em;
     color: black;
  }
</style>

   <center><p class="desk_hide product-single__price product-single__price-{{ section.id }}">
              
            {% if current_variant.compare_at_price > current_variant.price %}

                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
                <span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                 <span id="ProductPrice-{{ section.id }}">
                    {{ current_variant.price | money }}
                  </span>
                  <span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
                </span>
            {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              
              <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
              <span class="product-price__price product-price__price-{{ section.id }}">
                <span id="ProductPrice-{{ section.id }}">
                  {{ current_variant.price | money }}
                </span>
                <span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
              </span>
            {% endif %}
     </p></center> </br>




    <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
      {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
      {% for image in product.images %}
        {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture img_class %}product-featured-img{% endcapture %}
        {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
        <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
          <div class="sale-icon-container" data-product-id="{{ product.id }}"></div>
          <div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}"{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

           

            <img id="{{ img_id }}"
                 class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                 src="{{ image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">

  
      
                {% for tag in product.tags %}
                {% if tag contains '_lanzamiento' %}
                    <div class="nuevo-lanzamiento">
                    <img src="{{ 'nuevo-lanzamiento-01.svg' | asset_url }}" alt="icono de nuevo" style="max-width: 50px; position:absolute; left: 70%;">
                    </div>
                {% endif %}
                {% endfor %}
 
                                  <!--  -->
  {% for tag in product.tags %}
  {% if tag contains '_flash25' %}
    <div class="nuevo-lanzamiento">
    <img class="icon-sale-product" src="{{ 'descuentos-bf2020-25.svg' | asset_url }}" alt="icono de descuento" style="max-width: 80px;
    position: absolute;
    top: 6px;">
    </div>
{% endif %}
{% if tag contains '_flash15' %}
    <div class="nuevo-lanzamiento">
    <img class="icon-sale-product" src="{{ 'descuentos-bf2020-15.svg' | asset_url }}" alt="icono de descuento" style="max-width: 80px;
    position: absolute;
    top: 6px;">
    </div>
{% endif %}
{% if tag contains '_flash20' %}
<div class="nuevo-lanzamiento">
<img class="icon-sale-product" src="{{ 'descuentos-bf2020-20.svg' | asset_url }}" alt="icono de descuento" style="max-width: 80px;
position: absolute;
top: 6px;">
</div>
{% endif %}
{% endfor %}
<style>
  .icon-sale-product {
    left: 80%;
  }
</style>

        
          </div>
          
        </div>
       
      {% endfor %}

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
      </noscript>


      {% if product.images.size > 1 %}
        {% if product.images.size > 3 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js no-clear">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}

    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">


      
        <h1 class="mob_hide product-single__title">Terrario <span class="font-ufo">UFO</span></h1></br>

      

        <div>
          
          <p class="mob_hide product-single__price product-single__price-{{ section.id }}">
              
            {% if current_variant.compare_at_price > current_variant.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
                <span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                  <span id="ProductPrice-{{ section.id }}">
                    {{ current_variant.price | money }}
                  </span>
                  <span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
                </span>
            {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
              <span class="product-price__price product-price__price-{{ section.id }}">
                <span id="ProductPrice-{{ section.id }}">
                  {{ current_variant.price | money }}
                </span>
                <span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
              </span>
            {% endif %}
            </p> 

<!--          AQUI SE AGREGA POR TAGS LOS TIEMPOS DE ENTREGA  -->
      
            {% for tag in product.tags %}
         	{% if tag contains '5a7' %}
        		<img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/Tiempo_de_entrega.png?v=1575420463" alt="Tiempo de entrega"> Envío de 1 a 7 días hábiles 
         	{% endif %}
       	    {% if tag contains '7a10' %}
        		<img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/Tiempo_de_entrega.png?v=1575420463" alt="Tiempo de entrega"> Envío de 5 a 10 días hábiles 
            {% endif %}

            {% if tag contains '10a15' %}
        		<img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/Tiempo_de_entrega.png?v=1575420463" alt="Tiempo de entrega"> Envío de 7 a 15 días hábiles 
            {% endif %}

  			{% if tag contains '15a20' %}
        		<img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/Tiempo_de_entrega.png?v=1575420463" alt="Tiempo de entrega"> Envío de 10 a 20 días hábiles 
        	{% endif %}
            {% endfor %} 
           
            
         
        </br>
        <a href="https://wa.me/5215571309979"><img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/WA.png?v=1575431857" alt="Whatsapp"> Si tienes dudas, escríbenos por <u>WhatsApp</u></a>
       
         
        {% if product.price < 60000 %}
        <p style="font-weight: 700;">Envío desde $49 MXN.</p>
        {% else %}
        <p style="font-weight: 700;">¡El envío es gratis!</p>
        {% endif %}
        
        

            <br>
        <div class="barra-de-info">
            
      {% for tag in product.tags %}
            {% if tag contains '_hecho _en _mexico' %}
                      <div class"icono-hecho-en-mex">{% include 'icon-hecho-en-mexico' %}</div> 
            {% endif %}
            {% if tag contains '_hecho _a _mano' %}
                      <div class"icono-hecho-a-mano">{% include 'icon-hecho-a-mano' %}</div> 
                      {% endif %}

      {% endfor %}
          {% if product.price >= 60000 %}
                  <div class"icono-envio-gratis">{% include 'icon-envio-gratis' %}</div> 
          {% endif %}
          </div>

          <div id="hulkapps_custom_options_{{ product.id }}"> </div>
    
        <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
        {% for tag in product.tags %}
        {% if tag contains '_ultimas _piezas' and current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
		{% if current_variant.inventory_quantity <= 5 and current_variant.inventory_quantity != 1 %}
        <strong>¡Últimas {{current_variant.inventory_quantity}} piezas!</strong>
          {% else %} 
          {% if current_variant.inventory_quantity == 1 %}
        <strong>¡Última pieza!</strong>
          {% endif %}
        {% endif %}
        {% endif %}
        {% endfor %}
        </div>
           
<!--         <br>
          -->
             {% if section.settings.show_vendor %}
          <p class="product-single__vendor">{{ product.vendor }}</p>
        {% endif %}
         


          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
          {%- endcapture %}

          {% capture the_snippet_fave %}{% include 'socialshopwave-widget-fave' %}{% endcapture %}
                {% unless the_snippet_fave contains 'Liquid error' %}
                {{ the_snippet_fave }}
                {% endunless %}
              
          <br>
          {% form 'product', product, class:form_classes %}
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper js product-form__item">
                  <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>
                  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                    {% for value in option.values %}
                      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                    {% endfor %}
                  </select>
                </div>
              {% endfor %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
            </select>

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
              </div>
            {% endif %}
          <div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
              {% endif %}
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
               
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
                </button>
            </div>
          {% endform %}
         
        </div>

        <div class="product-single__description rte">
          {{ product.description }}
         
        </div>



        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      
      
      
      </div>
   
    </div>

 
  </div>

  {% if product.handle == 'lillipot-terrario-cerrado'%}
  <br><br><br>
  {% include 'slider-ugc-lillipot'%}
  {% endif %}
<!-- AQUI PONGO LOS ICONOS DE SEGURIDAD Y CONFIANZA  -->
{% comment %}vdiv class="iconos-seguridad"><div class="mi-contenedor-de-iconos"> <div class="icono_pagos"> <img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/pagos_small-01.jpg?v=1561574721"> <p>Elige de forma segura el método de pago que mas te guste: tarjetas de crédito, debito, PayPal o depósitos en efectivo en Oxxo Pay.</p></div><div class="icono_servicio"> <img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/calidad_small-01.jpg?v=1561574787"> <p>Excelente servicio y atención al cliente en todo momento. Contáctanos a través de nuestro correo, por nuestras redes sociales o envíanos un WhatsApp.</p></div><div class="icono_envios"> <img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/envios_small-01.jpg?v=1561574906"> <p>Envíos a todo México. Tenemos ENVÍO GRATIS en pedidos superiores a $800 MXN ¡Que la distancia no te detenga!</p></div><div class="icono_seguridad"> <img src="https://cdn.shopify.com/s/files/1/0074/4256/3129/files/seguridad_small-01.jpg?v=1561575002"> <p>Tus datos están totalmente protegidos. Contamos con los mejores sistemas anti fraudes.</p></div></div></div><style>.mi-contenedor-de-iconos{display: grid; gap: 50px; grid-template-columns: repeat(auto-fill, 200px); text-align: center; font-size: 1rem;}</style> {% endcomment %}
<div  class="page-container" id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

{% if collection %} 
  <div class="text-center return-link-wrapper">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}
<!-- <a name="resena"></a> -->
<a class="anchor-resena" id="resena"></a>

 

 

 

0 Likes