Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Cores e tamanhos das variações

Esta melhoria permite mostrar as cores e os tamanhos nos detalhes do produto, para gerar uma melhor interação e não ocultar todas as opções dentro de um select.

1. Acessar layout.tpl e adicionar a seguinte função que executa cada vez que uma alteração em uma variante é detectada. Recomendamos adicioná-lo.

// 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. Adicionar um novo snipplet com o feature dentro da pasta snipplets.

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. Em seguida, em templates/product.tpl substitua o código atual pelo novo snipplet dentro do if:

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

4. Se o layout conta com o snniplet quick-shop, também é necessário substitui-lo por:

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

5. Ajustar o .css, neste caso o exemplo é do 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 as cores do tema para os retângulos, este exemplo é do main-color.scss.tpl do 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;
}

Feito! :)