Responsive Grid
A Responsive Grid está estável a partir da versão 3.10.103.
Índice
Introdução
A Responsive Grid é um dos novos desenvolvimentos responsivos da tfv.
Uma montra (ou showcase) tripoint tem vários tipos. Entre eles está o tipo Responsive Grid que tem como propósito a disposição e apresentação de pacotes ou outros conteúdos responsivamente.
Criação da montra
Configuração > Site > Montras
Botão Criar ou Alt+C
Preencher o Nome do showcase e o tipo como "ResponsiveGrid" e clicar no botão Aceitar ou Alt-A (Nota: este nome não é o título da montra a ser apresentado no site, é apenas para gestão interna.)
Após estes 3 passos, mesmo que não seja preenchida mais informação o showcase fica criado e é-lhe atribuído um Cód. (Código) (a verde na imagem). Este código é o id do showcase.
Configuração da montra
DisplayFocus [deprecated: display-focus já não se encontra em uso]
IconUrl: Endereço do ícone da montra.
ItemsPerPage: Número de itens apresentados na página. Caso seja inferior ao número total de itens, alguns vão ser escondidos. No caso da imagem abaixo, ItemsPerPage é 3.
ShowHidden: Caso o número ItemsPerPage seja menor que o número total de itens, vai aparecer um botão abaixo dos itens do showcase. Este botão tem dois funcionamentos:
"Show More (x)": apresenta apenas mais o número de itens correspondente a ItemsPerPage. Ou seja se houver 7 itens e ItemsPerPage for 3, inicialmente vão ser mostrados 3 itens. Quando se carrega no Show More, ele vai mostrar mais 3 apenas e deixar 1 escondido.
"Show All (x)": apresenta todos os itens que estão escondidos. Ou seja se houver 7 itens e ItemsPerPage for 3, inicialmente vão ser mostrados 3 itens. Quando se carrega no Show All, ele vai mostrar todos, independentemente do número de ItemsPerPage.
Title: Title é o Título do showcase apresentado acima dos itens.
Criação de Itens
Criar uma nova linha: Cada nova linha vai ser um item do showcase.
Prencher o Nome e o Tipo do Item: Mais uma vez, este nome não corresponde ao título do item na página. É apenas um identificativo interno. O tipo do Item deve ser sempre Url.
Prencher a descrição.
Prencher os parâmetros:
Columns: Ha 3 valores possíveis para columns (1, 2, 3); [Nota: Devido a um bug, caso este valor seja deixado a vazio o comportamento default é cada item ocupar 50% do espaço.] Desta forma é possível fazer um mosaico com combinações diferentes de tamanho que criam interesse visual.
Currency: A moeda em que o item está a ser vendido. Caso seja deixado a branco não aparece.
CurrencyPosition: Posição da moeda. Pode ser"left" (esquerda) ou "right" (direita) do preço do item.
Duration: Duração da estadia. Ocupa o canto inferior esquerdo. [Nota: Pode ser preenchida com qualquer texto, nao é necessário ser uma duração. Caso não seja preenchido, não aparece.
ImageUrl: Url para a Imagem de fundo. Este url pode ser obtido nos conteúdos multimédia, quer sob a forma de um url quer usando scimm:[Cód.].
- Ir até à janela de conteúdos multimédia;
- Procurar a imagem desejada utilizando os filtros
- Associar a imagem ao showcase item ou voltar atrás na página e escrever "scimm:[Cód.]" em que [Cód.] é o Código da imagem.
- Ir até à janela de conteúdos multimédia;
Price: Preço do item. Posicionado à direita. Pode ter qualquer formato.
PriceDescription: Descrição do preço, aparece à direita acima do preço. Pode ter qualquer valor.
Tag: Aparece no topo superior esquerdo abaixo do título num rectângulo amarelo. Pode ter qualquer valor.
Target: Onde é aberto o url quando se clica no item. "_self" para o próprio separador, "_blank" para um novo separador e "_new" para abrir numa nova janela.
Title: Título. Encontra-se no canto superior esquerdo acima da Tag.
Url: url que é aberto quando se clica no item.
Inserção no HTML
Para o showcase aparecer no site é preciso ser incluída no HTML do tripoint.
- Para isso vai-se à pagina inicial do tripoint a Configurações > Site > Sites.
Da lista de sites escolhe-se o pretendido e clica-se em Editar ou Alt+E. Isto abre a página de Estrutura do Site.
Para inserir um novo showcase numa das páginas deve-se escolher uma das páginas. Abaixo aparecem as páginas web todas dessa página.
Deve-se escolher uma delas e clicar no botão Editar.
Caso não exista uma página previamente criada deve-se criar a página no botão Criar:
Deve-se então dar um nome à página, tal como uma Pasta e um Tipo. Para o efeito podem ser (modelo) e (não definido).
- Incluir o showcase utilizando o código abaixo. O atributo "data-showcase-id" deve ser igual ao Cód. do showcase que se quer incluir.
<div data-showcase-id="1"></div>
Customização do template
Ha duas formas de customizar o template das grids responsivas: pode-se customizar a grelha em geral (título, posição dos elementos, botão de mais, ordem dos elementos) ou o template dos itens.
Customizar a grelha
O código abaixo corresponde ao template base usado para um showcase. Dentro deste template ha acesso às variáveis height, iconUrl, showHidden e title que foram apresentadas anteriormente. Dentro de <% %> está código javascript.
<script type="text/template" data-mvc-template="responsive-grid-template">
<%
var height = model.get('height');
var iconUrl = model.get('iconUrl');
var showHidden = model.get('showHidden');
var title = model.get('title');
%>
<div class="responsive-grid-title">
<div class="responsive-grid-title-image">
<% if (iconUrl) { %>
<img src="<%=iconUrl %>" title="<%=title%>" draggable="false" />
<% } %>
</div>
<div class="showcase-title responsive-grid-title"><%=title%></div>
</div>
<div class="responsive-grid-items">
<div class="show-hidden">
<button class="btn btn-outline-secondary <%=iconUrl%>">
<% if (showHidden === 'show-all') { %>
@Html.TranslatedMessage("Results_Flight_Show_HiddenResults")
<% } else { %>
@Html.TranslatedMessage("Homepage_Show_More_Results")
<% } %>
<span class="hidden-items-count"></span>
</button>
</div>
</div>
</script>
Para criar um novo template alterado, deve-se inserir este código alterado dentro da div criada na secção "Inserção no HTML" como abaixo:
<div data-showcase-id="1">
<script type="text/template" data-mvc-template="responsive-grid-template">
<%
var height = model.get('height');
var iconUrl = model.get('iconUrl');
var showHidden = model.get('showHidden');
var title = model.get('title');
%>
<!-- Código customizado -->
<div class="responsive-grid-items">
<!-- Código customizado -->
</div>
<!-- Código customizado -->
</script>
</div>
Assim pode-se adicionar novo código ou trocar o código antigo de ordem.
Nota: Deve-se manter este bloco de código no início da div para ter acesso às variáveis apenas pelo nome simple. Caso contrário tem de se usar a forma <% model.get("property") %> em vez de só usar <% property %>.
<%
var height = model.get('height');
var iconUrl = model.get('iconUrl');
var showHidden = model.get('showHidden');
var title = model.get('title');
%>
Nota: Deve-se também manter este bloco de código no início da div. É a div onde mais tarde são inseridos os vários itens e se for removida, os itens não vao aparecer.
<div class="responsive-grid-items">
<!-- Código customizado -->
</div>
Nota: O botão "show-hidden" pode ser colocado em qualquer ponto dentro da .responsive-grid e continuará a funcionar.
<div class="show-hidden">
<button class="btn btn-outline-secondary <%=iconUrl%>">
<% if (showHidden === 'show-all') { %>
@Html.TranslatedMessage("Results_Flight_Show_HiddenResults")
<% } else { %>
@Html.TranslatedMessage("Homepage_Show_More_Results")
<% } %>
<span class="hidden-items-count"></span>
</button>
</div>
Customizar os itens
Para cada item criado no tripoint, vai ser adicionado uma div à div .responsive-grid-items. Cada um desses ícones pode ser customizado utilizando as regras abaixo.
O código abaixo corresponde ao template base usado para um showcase item. Dentro deste template ha acesso às variáveis title, imageUrl, tag, price, description, durations, currency, label e currencyPosition que foram apresentadas anteriormente. Dentro de <% %> está código javascript. Para usar uma das variáveis é preciso apenas usar o nome dela dentro de <% %>;
<script type="text/template" data-mvc-template="responsive-grid-item-template">
<%
var title = model.get('title');
var imageUrl = model.get('imageUrl');
var tag = model.get('tag');
var price = model.get('price');
var description = model.get('description');
var duration = model.get('duration');
var currency = model.get('currency');
var label = model.get('priceDescription');
var currencyPosition = model.get('currencyPosition') ? model.get('currencyPosition') : 'right';
%>
<div class="wrapper" style="background-image: url('<%= imageUrl%>')">
<div class="responsive-dark-overlay">
<div class="grid-item-header">
<div class="title"><%=title%></div>
<div class="tag"><%=tag%></div>
</div>
<% if (description) { %>
<div class="grid-item-body">
<span class="description"><%=description%></span>
<div class="description-overlay">
@Html.TranslatedMessage("Showcase_Read_More")
</div>
</div>
<% } %>
<div class="grid-item-footer">
<div class="duration"><%=duration%></div>
<div class="price">
<div class="price-label"><%=label%></div>
<div class="price-value" data-currency-<%=currencyPosition%>="<%=currency%>"><%=price%></div>
</div>
</div>
</div>
</div>
</script>
Para criar um novo template alterado, deve-se inserir este código alterado dentro da div criada na secção "Inserção no HTML" como abaixo:
<div data-showcase-id="1">
<script type="text/template" data-mvc-template="responsive-grid-item-template">
<%
var title = model.get('title');
var imageUrl = model.get('imageUrl');
var tag = model.get('tag');
var price = model.get('price');
var description = model.get('description');
var duration = model.get('duration');
var currency = model.get('currency');
var label = model.get('priceDescription');
var currencyPosition = model.get('currencyPosition') ? model.get('currencyPosition') : 'right';
%>
<!-- Código customizado -->
</script>
</div>
Nota: Deve-se manter este bloco de código no início da div para ter acesso às variáveis apenas pelo nome simple. Caso contrário tem de se usar a forma <% model.get("property") %> em vez de só usar <% property %>.
<%
var title = model.get('title');
var imageUrl = model.get('imageUrl');
var tag = model.get('tag');
var price = model.get('price');
var description = model.get('description');
var duration = model.get('duration');
var currency = model.get('currency');
var label = model.get('priceDescription');
var currencyPosition = model.get('currencyPosition') ? model.get('currencyPosition') : 'right';
%>
Customizar a grelha e os itens
Para criar um novo template com alterações tanto na grelha como nos itens deve-se fazer como abaixo.
<div data-showcase-id="1">
<script type="text/template" data-mvc-template="responsive-grid-template">
<%
var height = model.get('height');
var iconUrl = model.get('iconUrl');
var showHidden = model.get('showHidden');
var title = model.get('title');
%>
<!-- Código customizado -->
<div class="responsive-grid-items">
<!-- Código customizado -->
</div>
<!-- Código customizado -->
</script>
<script type="text/template" data-mvc-template="responsive-grid-item-template">
<%
var title = model.get('title');
var imageUrl = model.get('imageUrl');
var tag = model.get('tag');
var price = model.get('price');
var description = model.get('description');
var duration = model.get('duration');
var currency = model.get('currency');
var label = model.get('priceDescription');
var currencyPosition = model.get('currencyPosition') ? model.get('currencyPosition') : 'right';
%>
<!-- Código customizado -->
</script>
</div>
Customizar aspecto
Depois de se customizar o HTML, as alterações vão fazer com que a responsive grid fique desformatada. A criação de novas classes, etc, faz com que seja necessário fazer alterações no ficheiro de CSS do site de forma a que os novos elementos sejam formatados também.