Adding Size Chart in (VENTURE THEME)

JLbyone
Trailblazer
197 19 47

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
Trailblazer
197 19 47

anyone is able to guide me?

0 Likes
JLbyone
Trailblazer
197 19 47

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

0 Likes
Zworthkey
Shopify Partner
332 18 57

Share your URL so that i can help you.

Thank you

 

JLbyone
Trailblazer
197 19 47

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 !

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
JLbyone
Trailblazer
197 19 47

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
Trailblazer
197 19 47

anyone know how to resolve that issue? 

0 Likes
JLbyone
Trailblazer
197 19 47

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

0 Likes