Adding Size Chart in (VENTURE THEME)

JLbyone
Excursionist
187 17 41

Hi guys, i made that size chart popup, and its almost complete, but this is showing duplicated in selector.options inside product-template.liquid

i think its not colocated correctly inside product-template.liquid. Here is the part of file where is located my "size chart container"

  {% capture "form_class" %}product-form{% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}

        {% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}

        {% form 'product', product, class:form_class, id:form_id %}
          {% 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-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
          
                {% if product.options contains 'Talla' %}
                 <div class="size-chart_container">
                  <a class="size-chart-open-popup" href="#size-chart">
                   <div class="size-chart_title">Guia de Tallas</a></div>
                    <img src="{{ 'ruler.svg' | asset_url }}" id="size-chart_icon" width="75px"/>
                 </div>
               {% endif %}
                
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  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 %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <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 product-form__quantity">
          </div>
          <div class="product-form__item product-form__item--submit">

 

i show you with a picture, how i want to left it:

sizechartedit.jpg

 

0 Likes
JLbyone
Excursionist
187 17 41

anyone is able to guide me?

0 Likes
JLbyone
Excursionist
187 17 41

UPP!! another issue i saw, is to click that size chart, cursor didn't work on all container

0 Likes
Zworthkey
Shopify Partner
225 12 46

Share your URL so that i can help you.

Thank you

 

JLbyone
Excursionist
187 17 41

sizechartv2.jpg

 

im so close to get it, if its needed preview url or some code file, just tell me, thanks in advance!

Hi,

Please share store URL here !

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
JLbyone
Excursionist
187 17 41

Hi sir! thanks so much!! here is my url preview, that problem is in the product page sir

https://oxvbp3002u8u05zw-53196980409.shopifypreview.com

0 Likes
JLbyone
Excursionist
187 17 41

anyone know how to resolve that issue? 

0 Likes
JLbyone
Excursionist
187 17 41

up! still need resolve that issue community! thanks in advance

0 Likes