Neste artigo vamos adicionar botões para mostrar as cores e os tamanhos:
Esta funcionalidade suporta cores básicas como "azul, verde, vermelho, etc". Caso o produto tenha cores mais personalizadas, como "salmão", em vez de exibir o botão com o fundo dessa cor, o texto com o nome da cor será exibido.
HTML
1. Dentro da pasta snipplets crie outra pasta com o nome product, dentro adicionamos um novo snipplet chamado product-variants.tpl (se você já tem esse snipplet basta substituí-lo) com o seguinte código:
<div class="js-product-variants form-row"> {# Color and size variants buttons #} {% for variation in product.variations if variation.name in ['Color', 'Cor', 'Talle', 'Tamanho', 'Size'] %} <div class="col-12"> <div data-variant="{{ variation.name }}" class="js-btn-variation-container mb-2 text-center text-sm-left"> <label for="variation_{{loop.index}}" class="form-label mb-3">{{variation.name}}: <strong class="js-insta-variation-label">{{ product.default_options[variation.id] }}</strong> </label> <div class="row justify-content-center justify-content-sm-start no-gutters"> {% for option in variation.options if option.custom_data %} <div class="col-auto"> <a data-option="{{ option.id }}" class="js-btn-variation btn btn-square mr-2 mb-3 {{ variation.name }} {% if product.default_options[variation.id] == option.id %} selected {% endif %}" style="background: {{ option.custom_data }}" data-name="{{ option.name }}"> </a> </div> {% endfor %} {% for option in variation.options if not option.custom_data %} <div class="col-auto"> <a data-option="{{ option.id }}" class="js-btn-variation btn btn-square mr-2 mb-3 {{ variation.name }} {% if product.default_options[variation.id] == option.id %} selected {% endif %}" data-name="{{ option.name }}"> {{ option.name }} </a> </div> {% endfor %} </div> </div> </div> {% endfor %} {# Variants selects (for color and sizes the select is still working but hidden) #} {% for variation in product.variations %} <div class="{% if loop.length == 3 %} col-12 col-sm-4 {% elseif loop.length == 2 %} col-6 {% else %} col col-sm-6{% endif %}" {% if variation.name in ['Color', 'Cor', 'Talle', 'Tamanho', 'Size']%}style="display: none"{% endif %}> {% embed "snipplets/forms/form-select.tpl" with{select_label: true, select_label_name: '' ~ variation.name ~ '', select_for: 'variation_' ~ loop.index , select_id: 'variation_' ~ loop.index, select_name: 'variation' ~ '[' ~ variation.id ~ ']', select_custom_class: 'js-variation-option js-refresh-installment-data'} %} {% block select_options %} {% for option in variation.options %} <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option> {% endfor %} {% endblock select_options%} {% endembed %} </div> {% endfor %} </div>
2. Temos que criar uma nova pasta com o nome forms, localizados na pasta snipplets. Dentro adicionamos o snipplet com o nome form-select.tpl, que usaremos para todos os componentes “select” dentro do layout (no layout Base ele já está adicionado).
{# /*============================================================================ #Form select ==============================================================================*/ #Properties #Group //select_group_custom_class for custom CSS classes #Label // select_label_name for name // select_label_id for ID // select_for for label for // select_label_custom_class for custom CSS classes #Select // select_id for id // select_name for name // select_custom_class for custom CSS classes // input_rows for textarea rows // select_options to insert select options // select_aria_label for aria-label attribute #} <div class="form-group {{ select_group_custom_class }}"> {% if select_label %} <label {% if select_label_id%}id="{{ select_label_id }}"{% endif %} class="form-label {{ select_label_custom_class }}" {% if select_for %}for="{{ select_for }}"{% endif %}>{{ select_label_name }}</label> {% endif %} <select {% if select_id %}id="{{ select_id }}"{% endif %} class="form-select {{ select_custom_class }} {% if select_inline %}form-control-inline{% endif %}" {% if select_name %}name="{{ select_name }}"{% endif %} {% if select_aria_label %}aria-label="{{ select_aria_label }}"{% endif %}> {% block select_options %} {% endblock select_options %} </select> <div class="form-select-icon"> {% include "snipplets/svg/chevron-down.tpl" with {svg_custom_class: "icon-inline icon-w-14 icon-lg svg-icon-text"} %} </div> </div>
3. Para a parte do HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar o SVG que usamos para a seta dentro das variantes selecionadas com o nome chevron-down.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/></svg>
CSS
Requisito:
Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).
1. Adicione os estilos no arquivo static/style-colors.scss.tpl
Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou no stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu design:
@mixin prefix($property, $value, $prefixes: ()) { @each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } #{$property}: $value; } {# /* // Buttons */ #} .btn{ text-decoration: none; text-align: center; border: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-transform: uppercase; background: none; @include prefix(transition, all 0.4s ease, webkit ms moz o); &:hover, &:focus{ outline: 0; opacity: 0.8; } &[disabled], &[disabled]:hover{ opacity: 0.5; cursor: not-allowed; outline: 0; } &-square{ display: block; min-width: 25px; min-height: 25px; padding: 4px 10px; border: 1px solid $main-background; outline: 1px solid rgba($main-foreground, .2); &:hover{ outline: 1px solid rgba($main-foreground, .2); } &.selected{ outline: 2px solid rgba($primary-color, .5); } } } {# /* // Forms */ #} input, textarea { font-family: $body-font; } .form-control { display: block; padding: 10px 8px; width: 100%; border: 0; border-bottom: 1px solid rgba($main-foreground, .5); -webkit-appearance: none; -moz-appearance: none; appearance: none; color: $main-foreground; background-color: $main-background; &:focus{ outline: 0; } &-inline{ display: inline; } } .form-control::-webkit-input-placeholder { color: $main-foreground; } .form-control:-moz-placeholder { color: $main-foreground; } .form-control::-moz-placeholder { color: $main-foreground; } .form-control:-ms-input-placeholder { color: $main-foreground; } .form-select{ display: block; padding: 10px 0; width: 100%; border: 0; border-bottom: 1px solid rgba($main-foreground, .5); border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: $main-foreground; background-color: $main-background; &-icon{ background: $main-background; } }
2. Adicione os estilos no arquivo static/style-critical.tpl
Se em seu layout você usa um stylesheet para o CSS crítico, precisaremos adicionar o código abaixo nele, mas se não for o caso, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.
{# /* // Forms */ #} .form-group { position: relative; width: 100%; } .form-group .form-select-icon{ position: absolute; bottom: 12px; right: 0; pointer-events: none; } .form-row { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; clear: both; } .form-row > .col, .form-row > [class*=col-]{ padding-right: 5px; padding-left: 5px; } .form-label { display: block; font-size: 10px; text-transform: uppercase; }
3. Adicione os estilos no arquivo static/style-async.tpl
Se em seu layout você usar um stylesheet de CSS assíncrono, precisaremos adicionar o seguinte código abaixo, mas se esse não for o caso, você poderá unificar o CSS dos passos 3 e 4 em um único arquivo.
{# /* // Forms */ #} .form-group{ .form-label{ float: left; width: 100%; margin-bottom: 10px; } .alert{ margin: 10px 0 0 0; } }
JS
1. O JavaScript precisa ser adicionado no arquivo store.js.tpl (ou onde você tem suas funções JS). Adicionamos o seguinte código:
{# /* // Color and size variations */ #} $(document).on("click", ".js-btn-variation", function (e) { e.preventDefault(); $this = $(this); $variation_container = $this.closest(".js-btn-variation-container"); $variation_container.find(".js-btn-variation").removeClass("selected"); $this.addClass("selected"); var option_id = $this.data('option'); $selected_option = $this.closest('.js-product-variants').find('.js-variation-option option').filter(function () { return this.value == option_id; }); $selected_option.prop('selected', true).trigger('change'); $variation_container.find('.js-insta-variation-label').html(option_id); });
Traduções
Por fim, adicionamos os textos para as traduções no arquivo config/translations.txt
es "Talle" pt "Tamanho" en "Size" es_mx "Talla" es "S" pt "P" en "S" es_mx "S" es "M" pt "M" en "M" es_mx "M" es "L" pt "G" en "L" es_mx "L" es "XL" pt "GG" en "XL" es_mx "XL" es "Color" pt "Cor" en "Color" es_mx "Color" es "Azul" pt "Azul" en "Blue" es_mx "Azul" es "Blanco" pt "Branco" en "White" es_mx "Blanco" es "Rojo" pt "Vermelha" en "Red" es_mx "Rojo" es "Material" pt "Material" en "Material" es_mx "Material" es "Algodón" pt "Algodão" en "Cotton" es_mx "Algodón" es "Denim" pt "Denim" en "Denim" es_mx "Denim"
Pronto, você já tem em seu layout a funcionalidade aplicada.