Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Colores y talles en variantes

Esta mejora permite mostrar los colores y talles dentro del detalle de producto para generar una mejor interacción y no ocultar todas las opciones dentro de un select.


 

1. Ingresar a layout.tpl y agregar la siguiente función que se ejecuta cada vez que un cambio en una variante es detectado. Te recomendamos adicionarlo.

// Color variations - Used to select variants from colors/sizes squares 
$(document).on("click", ".js-insta-variations", function(e) {
    e.preventDefault();
    $this = $(this);
    $this.siblings().removeClass("selected");
    $this.addClass("selected");

    var option_id = $this.data('option');
    $selected_option = $this.closest('.product').find('.js-variation-option option').filter(function() {
        return this.value == option_id;
    });
    $selected_option.prop('selected', true).trigger('change');

    $this.closest("[class^='variation']").find('.variation-label strong').html(option_id);
});

2. Agregar el nuevo snipplet con el feature dentro de la carpeta snipplets llamado variants.tpl:

snipplets/variants.tpl

<div class="fancyContainer product js-product-variations-container">
  <div class="row-fluid">

  <!-- Color and size variants -->
  {% for variation in product.variations if variation.name in ['Color', 'Cor', 'Talle', 'Tamanho', 'Size'] %}
        <div data-variant="{{ variation.name }}" class="variation_{{loop.index}} row-fluid insta-variation-container {% if quickshop %}attributeLineQuickshop m-half-bottom{% else %}attributeLine{% endif %} {% if not quickshop %}m-half-top m-half-bottom{% endif %}">
          <label class="variation-label m-quarter-top text-left-xs {% if quickshop %}pull-left {% endif %}" for="variation_{{loop.index}}">
            {% if quickshop %}
              <div class="number">{{ loop.index }}</div>
              <span>{{variation.name}}:</span>
            {% else %}
              <span>{{variation.name}}: </span>
            {% endif %}
            <strong>{{ product.default_options[variation.id] }}</strong>
          </label>
          <div class="insta-variations_btn-container {% if quickshop %}insta-variations_btn-container-quickshop{% else %}insta-variations_btn-container-product{% endif %} full-width-xs pull-left-xs d-inline-block-xs">
            {% for option in variation.options if option.custom_data %}
                <a data-option="{{ option.id }}" class="js-insta-variations insta-variations_btn {{ variation.name }} {% if product.default_options[variation.id] == option.id %}selected{% endif %} {% if quickshop %}pull-left{% endif %} pull-left-xs">
                  <span class="d-inline-block" style="background: {{ option.custom_data }}" data-name="{{ option.name }}"></span>
                </a>
            {% endfor %}
            {% for option in variation.options if not option.custom_data %}
                <a data-option="{{ option.id }}" class="js-insta-variations insta-variations_btn {{ variation.name }} {% if product.default_options[variation.id] == option.id %}selected{% endif %} {% if quickshop %}pull-left{% endif %} pull-left-xs">
                    <span class="insta-variations_btn-custom d-inline-block" data-name="{{ option.name }}">{{ option.name }}</span>
                  </a>
            {% endfor %}
          </div>
        </div>
    {% endfor %}

    <!-- custom variants -->
    {% for variation in product.variations %}
      <div class="js-mobile-variations-container">
          <div class="desktop-product-variation m-half-top" {% if variation.name in ['Color', 'Cor', 'Talle', 'Tamanho', 'Size']%}style="display: none"{% endif %}>
              <div class="{% if quickshop %}attributeLineQuickshop{% else %}attributeLine{% endif %}">
                  <label class="variation-label" for="variation_{{loop.index}}">
                    {% if quickshop %}
                      <div class="number">{{ loop.index }}</div>
                      <span>{{ "Elegir" | translate }} </span>
                      <span>{{variation.name}}:</span>
                    {% else %}
                      <span>{{variation.name}}: </span>
                    {% endif %}
                  </label>
                  <select class="js-variation-option variation-option" name="variation[{{ variation.id }}]"
                  {% if quickshop %}
                      onchange="LS.changeVariant(changeVariant, '#quick{{ product.id }} .productContainer');">
                  {% else %}
                      onchange="LS.changeVariant(changeVariant, '#prod-page')">
                  {% endif %}
                  {% for option in variation.options %}
                      <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option>
                  {% endfor %}
                  </select>
              </div>
          </div>
      </div>
    {% endfor %}
  </div>
</div>

3. Luego, en templates/product.tpl reemplazar el código actual por el nuevo snniplet dentro del if:

 {% if product.variations  %}
     {% include "snipplets/variants.tpl" with {'quickshop': false} %}
 {% endif %}

4. Si el layout cuenta con el snipplet quick-shop, también es necesario reemplazarlo por:

{% if product.variations  %}
     {% include "snipplets/variants.tpl" with {'quickshop': true} %}
 {% endif %}

5. Ajustar el .css, en este caso el ejemplo es del layout Luxury:

/* Insta variations */
.insta-variations_btn{
    width: auto;
    padding: 1px;
    margin: 5px 10px 10px 0;
    height: 30px;
}
.insta-variations_btn-custom{
    width: auto;
    padding: 1px 8px;
}
.insta-variations_btn span{
    cursor: pointer;
    height: 24px;
    width: 24px;
    opacity: 0.7;
}
.insta-variations_btn .insta-variations_btn-custom{
    width: auto;
}
.insta-variations_btn.selected span {
    opacity: 1;
}

6. Usar los colores del theme para los rectángulos, este ejemplo es del main-color.scss.tpl de Luxury:

/* Insta variations */
.insta-variations_btn { 
    border: 2px solid rgba($txt, 0.6); 
} 
.insta-variations_btn.selected { 
    border: 2px solid $primary;
}
.insta-variations_btn-custom{
    color:$txt;
}
.insta-variations_btn.selected  .insta-variations_btn-custom{
    color:$primary;
}

Listo! La funcionalidad ya está disponible para ser utilizada en tu tienda :)

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.