Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Módulos de imagem e texto na página inicial

Neste tutorial, você aprenderá como incluir até dois módulos de imagem e texto na página inicial da sua loja. Cada módulo exibirá uma imagem e um texto ao lado quando visualizado em computadores, e abaixo quando visto por celulares. É possível gerenciá-lo na seção "Layout > Personalizar layout" dentro do painel de administração.

1. Adicione o seguinte código em settings.txt:

Inicio | Módulos de imagen y texto
    meta
        icon = columns
        advanced = true
    description
        description = Cada módulo mostrará una imagen y un texto al lado de la misma en computadoras y debajo de ella en celulares
    title
        title = MÓDULO 1
    checkbox
        name = module_01_show
        description = Mostrar módulo
    title
        title = Imagen
    image
        original = module_01.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 400
    dropdown
        name = module_01_align
        description = Alineación de la imagen
        values
            left = Izquierda
            right = Derecha
    i18n_input
        name = module_01_title
        description = Título
    textarea
        name = module_01_text
        description = Descripción
    i18n_input
        name = module_01_button
        description = Texto del botón
    i18n_input
        name = module_01_url
        description = Link
    title
        title = MÓDULO 2
    checkbox
        name = module_02_show
        description = Mostrar módulo
    title
        title = Imagen
    image
        original = module_02.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 400
    dropdown
        name = module_02_align
        description = Alineación de la imagen
        values
            left = Izquierda
            right = Derecha
    i18n_input
        name = module_02_title
        description = Título
    textarea
        name = module_02_text
        description = Descripción
    i18n_input
        name = module_02_button
        description = Texto del botón
    i18n_input
        name = module_02_url
        description = Link

2. Coloque os valores padrão em defaults.txt:

module_01_align = left
module_02_align = right

3. Dentro da pasta snipplets, crie o arquivo home-modules.tpl com o seguinte código (dependendo do layout ou layout personalizado que estiver utilizando). Para o caso em que o BS2 é usado, deve-se adicionar o seguinte:

{% set num_modules = 0 %}
{% for module in ['module_01', 'module_02'] %}
    {% set module_show = attribute(settings,"#{module}_show") %}
    {% set module_image = "#{module}.jpg" | has_custom_image %}
    {% set module_title = attribute(settings,"#{module}_title") %}
    {% set module_text = attribute(settings,"#{module}_text") %}
    {% set module_button_text = attribute(settings,"#{module}_button") %}
    {% set has_module =  module_show and (module_title or module_text or module_image) %}
    {% if has_module %}
        {% set num_modules = num_modules + 1 %}
    {% endif %}
{% endfor %}


{% for module in ['module_01', 'module_02'] %}
    {% set module_show = attribute(settings,"#{module}_show") %}
    {% set module_image = "#{module}.jpg" | has_custom_image %}
    {% set module_title = attribute(settings,"#{module}_title") %}
    {% set module_text = attribute(settings,"#{module}_text") %}
    {% set module_button_text = attribute(settings,"#{module}_button") %}
    {% set module_url = attribute(settings,"#{module}_url") %}
    {% set module_align = attribute(settings,"#{module}_align") %}
    {% set has_module =  module_show and (module_title or module_text or module_image) %}
    {% set has_module_text =  module_title or (module_url and module_button_text) %}
    {% if has_module %}
    <div class="row-fluid module-wrapper m-section p-relative">
        <div class="span6{% if module_align == 'right' %} pull-right{% endif %}">
            <div class="module-image">
                {% if module_url %}
                    <a href="{{ module_url }}"{% if module_title %} alt="{{ module_title }}" title="{{ module_title }}"{% endif %}>
                {% endif %}
                {% if module_image %}
                    <img src="{{ "#{module}.jpg" | static_url }}" />
                {% else %}
                    <div class="placeholder">
                        <i class="fas fa-4x fa-image module-icon"></i>
                    </div>
                {% endif %}
                {% if module_url %}
                    </a>
                {% endif %}
            </div>
        </div>
        <div class="span6{% if module_align == 'right' %} m-left-none{% endif %}">
            <div class="module-text">
                <div class="text-container">
                    {% if module_title %}
                        <div class="module-text-title m-bottom">{{ module_title }}</div>
                    {% endif %}
                    {% if module_text %}
                        <div class="module-text-paragraph m-bottom p-bottom">{{ module_text }}</div>
                    {% endif %}
                    {% if module_url and module_button_text %}
                        <a href="{{ module_url }}"{% if module_title %} alt="{{ module_title }}" title="{{ module_title }}"{% endif %}>
                            <div class="btn btn-primary btn-small">{{ module_button_text }}</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}

4. Inclua o snipplet criado em home.tpl

{#  **** Modules with images and text ****  #}
{% include 'snipplets/home-modules.tpl' %}

5. Adicionar os estilos CSS (dependendo do layout ou layout personalizado que estiver utlizando). Deve-se adicionar o seguinte:

Dentro de styles.scss.tpl:

{# /* Modules with image and text */ #}


.module-wrapper {
  min-height: 300px;
}


.module-image {
  img {
    display: block;
    margin: 0 auto;
    max-height: 450px;
  }
  .placeholder{
    position: relative;
    padding-top: 70%;
    text-align: center;
    background: #eee;
    .module-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -28px;
      margin-top: -28px;
      opacity: 0.2;
    }
  }
}


.module-text {
  position: absolute;
  width: 50%;
  height: 100%;
  .text-container {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 9;
    padding: 30px 0;
    transform: translate(-0%, -50%);
    .module-text-title {
      margin-bottom: 10px;
      display: -webkit-box;
      font-size: 30px;
      font-weight: 700;
      line-height: 32px;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .module-text-paragraph {
      margin-bottom: 20px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
  }
}


@media (max-width: 769px) {


  .module-text {
    position: relative;
    float: left;
    width: 100%;
    .text-container {
      position: relative;
      padding: 20px 15px 40px 15px;
      transform: none;
      .module-text-paragraph {
        -webkit-line-clamp: 6;
      }
    }
  }  




}

Dentro de custom.scss.tpl (As variáveis SAAS podem variar de acordo com o layout):

{# /* Modules with image and text */ #}


.module-text-title {
    font-family: $font-headings;
}

6. Adicione as traduções em translations.txt:

es "Inicio | Módulos de imagen y texto"
pt "Início | Módulos de imagem e texto"
en "Home | Modules with image and text"


es "Cada módulo mostrará una imagen y un texto al lado de la misma en computadoras y debajo de ella en celulares"
pt "Cada módulo exibirá uma imagem e texto ao lado quando visto em computadores e abaixo quando visto em celulares"
en "Each module will display an image and text next to it on computers and below it on cell phones"


es "MÓDULO 1"
pt "MÓDULO 1"
en "MODULE 1"


es "MÓDULO 2"
pt "MÓDULO 2"
en "MODULE 2"


es "Mostrar módulo"
pt "Exibir módulo"
en "Show module"


es "Imagen"
pt "Imagem"
en "Image"


es "Cargar imagen (JPG, GIF, PNG)"
pt "Carregar imagem (JPG, GIF, PNG)"
en "Upload image (JPG, GIF, PNG)"


es "Alineación de la imagen"
pt "Alinhamento da imagem"
en "Image alignment"


es "Izquierda"
pt "Esquerda"
en "Left"


es "Derecha"
pt "Direita"
en "Right"


es "Título"
pt "Título"
en "Title"


es "Descripción"
pt "Descrição"
en "Description"


es "Texto del botón"
pt "Texto do botão"
en "Button text"


es "Link"
pt "Link"
en "Link"