FROM CACHE - en_header

Dropdown cannot click

kestin
New Member
2 0 0

Hi,
We recently face an issue that our variaty size dropdown cannot be clicked by customers. They have to click the size they want and "refresh the page" so that they can see the size changed, which is not straightforward. 

You can check product page of our store: https://biion.com.tw/products/biion-%E4%BC%91%E9%96%92%E7%99%BE%E6%90%ADtrainer%E9%9E%8B-%E5%A4%A7%E...

Screenshot_1.png

 Here's the product page's code. and I don't think there is anything wrong.

<select class="single-option-selector" id="SingleOptionSelector-{{ forloop.index0 }}">
{% for value in option.values %}
<option {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
{% endfor %}
</select>

Down below is the full code.

 

{% assign descriptionParts = product.description | split: "<!-- split -->" %}
{% if descriptionParts.size > 1%}
{% assign descriptionFirstPart = descriptionParts | first %}
{% assign descriptionSecondPart = descriptionParts | last %}
{% endif %}
{% include 'breadcrumb' breadcrumb_class:"page-header-breadcrumb" %}
<div class="container product-template__container page-width template-product {% if section.settings.description_background_color == "alternate" %} pb30 {% endif %}" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product-page" data-enable-history-state="true">
  <meta itemprop="name" content="{{ product.title | escape }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">
  {% comment %}
  Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_thumb_size = '160x160' -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}
  {%- assign product_image_width = 'col-sm-6' -%}
  {%- assign product_description_width = 'col-sm-12' -%}
  {%- assign product_images_length = product.images | size -%}

  {%- assign product_image_size = '720x720' -%}
  {%- assign product_image_class = 'large-img' -%}	

  {%- assign featured_img_src=current_variant.featured_image.src | default: product.featured_image.src -%}
  {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
  <div class="row row-col-norsp product-page-row" id="parent" data-gutter="none">
    <div class="product_images_length-{{product_images_length}} product-item-image-{{section.settings.description_background_color}} {{ product_image_width }} product-gallery-{{ section.id }}" id="product-gallery">
      <div class="zoomer ">
        <img src="#" alt="Zoom image"/>
      </div>
      <div class="product-item-wrap {{ product_image_class }} slider-{{ section.id }} equal-columns-{{section.id}}" id="slider">
        {% if section.settings.image_gallery_type == 'thumbnails_gallery_vertical' or section.settings.image_gallery_type == 'thumbnails_gallery_horizontal' %}
        {% include 'thumbnails-gallery' %}
        {% else %}
        {% include 'slider-gallery' %}
        {% endif %}
      </div><!-- <div class="product-item-wrap" id="slider"> -->
    </div><!-- <div class="col-md-7"> -->
    <div class="desktop-flex-wrapper">
      <div class="{{ product_description_width }} product-description-{{ section.id }}" id="product-description">
        <div class="product-item-caption-white product-item-caption-{{section.settings.description_background_color}} sidebar-{{ section.id }} equal-columns-{{section.id}}" id="sidebar">
          <header class="product-item-caption-header">
            <h1 class="product-item-caption-title">{{ product.title | escape }}</h1>
            <ul class="product-item-caption-price" 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 %}">
              {% if current_variant.compare_at_price > current_variant.price %}
              <li id="ComparePrice-{{ section.id }}" class="product-item-caption-price-list"><span class="money">{{ current_variant.compare_at_price | money }}</span></li>
              {% endif %}
              <li id="ProductPrice-{{ section.id }}" class="product-item-caption-price-current"><span class="money" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">{{ current_variant.price | money }}</span></li>
            </ul>
            {% if settings.product_reviews %}
            <div class="mt10 min_height_22"> 
              <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            </div> 
            {% endif %}
          </header>
          {% if descriptionSecondPart != blank%}
          <div class="product-item-caption-desc border-bottom description-first-part">
            {{ descriptionFirstPart }}
          </div>
          {% endif %}
          <!-- Galleria code -->
          {% form 'product', product %}
          {% if section.settings.show_variants_swatches %}

          <style>
            .product-select-block-{{ section.id }} {
              display: none;
            }
          </style>

          {% endif %}
          <div class="product-item-caption-select product-select-block-{{ section.id }}">
            {% unless product.options.size == 1 and product.variants[0].title contains 'Default' %}
            {% for option in product.options_with_values %}
            <div class="selector-wrapper main-product-select-{{product.id}}">
              <label {% if option.name == 'default' %}class="hidden" {% endif %} for="product-select-{{ option.name }}">
                {{ option.name }}
              </label>
              <select class="single-option-selector" id="SingleOptionSelector-{{ forloop.index0 }}">
                {% for value in option.values %}
                <option {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
                {% endfor %}
              </select>
              
                
               
              
            </div>  
            {% endfor %}
            {% endunless %}
            <select name="id" id="ProductSelect-{{ product.id }}" data-section="{{ section.id }}" class="product-form__variants hidden">
              {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if section.settings.show_product_quantity %} 
                      data-invertory_management="{{variant.inventory_management}}" 
                      data-inventory_policy="{{variant.inventory_policy}}"
                      data-inventory_quantity="{{variant.inventory_quantity}}"
                      {% endif %}  
                      {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title | escape }}</option>
              {% else %}
              <option disabled="disabled"
                      {% if section.settings.show_product_quantity %} 
                      data-invertory_management="{{variant.inventory_management}}" 
                      data-inventory_policy="{{variant.inventory_policy}}"
                      data-inventory_quantity="{{variant.inventory_quantity}}"
                      value="{{ variant.id }}"
                      {% endif %}  >{{ variant.title | escape }} - {{ 'products.product.sold_out' | t }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div><!-- <div class="product-item-caption-select"> -->
          {% if section.settings.show_variants_swatches %}
          {% unless product.options.size == 1 and product.variants[0].title contains 'Default' %}
          {% for option in product.options %}
          {% include 'swatch' with option %}
          {% endfor %}
          {% endunless %}
          {% endif %}
          <div class="row" data-gutter="{% if section.settings.show_quantity_selector %}10{% else %}30{% endif %}">
            {% if section.settings.show_quantity_selector %}
            {% include 'quantity-selector' %} 
            {% endif %}

            {% if section.settings.show_smart_checkout%}
            <div class="product-form__item product-form__item--submit product_payments_btns">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %} btn-primary btn-block btn-lg">
                <span id="AddToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
         
            
              {{ form | payment_button }}
            </div>
            
            {% else %}
           
            
            
            <div class="product-form__item product-form__item--submit">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %} btn-primary btn-lg">
                <span id="AddToCartText-{{ section.id }}">{{ 'products.product.sold_out' | t }}</span>
              </button>
            </div>
            
             <div class=describesentence>
            	<p>五倍超勸BUY,Biion折扣翻倍帶</p>
            	<p>折扣碼[2雙入手組] 訂單67折 折扣1,700 up</p>
            	<p>折扣碼[3雙划算買] 訂單65折 折扣2,700 up</p>
            	<p>折扣碼[4雙超狂組] 訂單64折 折扣3,700 up</p>
            </div>
        
            
            
            
            
            {% unless product.tags contains 'TimeIsLimited' %}
            <a class="klaviyo-bis-trigger btn" href="#">有貨時通知</a>
            {% endunless %}
            {% endif %}
          </div><!-- <div class="row" data-gutter="10"> -->
          {% endform %}
          
                      
          
          
          
          
          <!-- Galleria code -->
          <div class="product-item-caption-desc {% if settings.product_reviews or section.settings.show_share_buttons %}border-bottom{% endif %}">
            {% if descriptionSecondPart != blank%}
            <div class="product-rte-description main-product-description-{{ section.id }}" >	 
              {{ descriptionSecondPart }}
            </div>
            {% else %}
            <div class="product-rte-description main-product-description-{{ section.id }}" >	 
              {{ product.description }}
            </div>
            {% endif %} 

            {% if product.description contains '[TABS]' %}
            <div class="product-description-tabs-{{section.id}} product-description-tabs">

            </div>
            
            {% endif %}
            <!-- This will show Items is final sale -->
            {% for t in product.tags %}
                 {% if t contains 'TimeIsLimited' %}
            <div class="mt-1u bold"><span class="final-sale">This item is Final Sale. Discounts are not applicable on sale items.</span></div>
                 {% endif %}
              {% endfor %}
            <!-- This will show Items is final sale -->
             <div class="ryan-sale-wrap">
             <!-- <h5 class="bold m-1hu"> <mark style="background-color: yellow">ON SALE NOW:</mark></h5>
               <ul>
                  <li>Use code BUY1 for 25% off 1 pair </li>
                  <li>Use code BUY2 for 35% off 2 pairs</li>
                  <li>Use code BUY3 for 45% off 3 pairs</li>
                  <li>Use code BUY4 for 50% off 4+ pairs</li>
               </ul>
               <span class="block">Order by December 16th for delivery by December 25th. </span>
               <p class="m-1hu hide-if-i-say">Enjoy an extended holiday return period until January 31st 2021. </p>-->
               
               <!--{{ product.tags | join: ", " }} -->
       			<!--{% unless product.tags contains 'TimeIsLimited' %}
               <br>
               <div class="m-1hu"><span class="promo-bgcolor">Take 30% off with code <strong>3DAY30</strong></span></div> <br>
        		{% else %}
     			 {% endunless %}-->
               

               
                                           
{% if product.tags contains 'wonder woman' %}
  {{ 'jquery.js' | asset_url | script_tag }}                        
<script>
$(".hide-if-i-say").css('display','none');
</script>
{% endif %}
                        
            </div>

            {% if section.settings.show_product_sku or 
                  section.settings.show_product_vendor or 
            section.settings.show_product_quantity or
            section.settings.show_product_tags %}
            <ul class="product-extra-info">
              {% if section.settings.show_product_quantity %}
              <li id="inventory-product-row" class="inventory-product-row-{{section.id }}" style="display:none;">
                <span id="variant-inventory" class="variant-inventory-{{section.id }}"></span>
              </li>
              {% endif %}
              {% if section.settings.show_product_vendor %}
              <li>
                Vendor: {{ product.vendor | link_to_vendor }}
              </li>
              {% endif %}
              {% if section.settings.show_product_sku %}
              <li id="sku-table-row" class="sku-table-row-{{section.id }}" style="display:none;">
                SKU:
                <span id="variant-sku" class="variant-sku-{{section.id }}"></span>
              </li>
              {% endif %}
              {% assign tagsLength = 0 %}
              {% for tag in product.tags %}
              {% unless tag contains "_" %}
              {% assign tagsLength = 1 %}
              {% break %} 	
              {% endunless %}
              {% endfor %}

              {% if section.settings.show_product_tags and tagsLength > 0 %}
              <li class="tags">
                Tags:
                {% for tag in product.tags %}
                {% unless tag contains "_" %}
                <a class = "tag" href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>
                {% endunless %}
                {% endfor %}
              </li>
              {% endif %}
            </ul>
            {% endif %}
          </div>
          {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}   
          {% if settings.product_reviews %}
          <script>
            console.log({{ product.metafields.spr | json }});
          </script>

          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          {% endif %}

        </div><!-- <div class="product-item-caption-white" id="sidebar"> -->
      </div><!-- <div class="col-md-5"> -->
    </div><!-- <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> -->
  </div><!-- <div class="row row-col-norsp" id="parent" data-gutter="none"> -->
</div><!-- <div class="product-template__container page-width"> -->
{% unless product.empty? %}

<script type="application/json" id="ProductJson-{{ section.id }}">
      {{ product | json }}
</script>

<script type="application/json" id="ProductTemplate-{{ product.id }}">
  {
   "template": "product-page"
  }
</script>

{% endunless %}
{% comment %}
{% if section.settings.image_gallery_color or section.settings.product_description_color %}

<style>
  .sidebar-{{ section.id }}, .product-description-{{ section.id }} .nav-tabs > li > a {
    background-color: {{ section.settings.product_description_color }} !important; 
  }
  #sidebar, #product-description .nav-tabs > li > a{
    background-color: #eeeeee;
  }
</style>
{% endif %}
{% endcomment %}


{% style %}
  .promo-bgcolor
{
    background-color: #e6dd01;
    padding: 5px;
}
{% endstyle %}

 

 

Reply 1 (1)
kestin
New Member
2 0 0

solved