Responsive Horizontal Slider
Índice
Introdução
O Responsive Horizontal Slider é um dos novos desenvolvimentos responsivos da tfv.
Uma montra (ou showcase) tripoint tem vários tipos. Entre eles está o tipo Responsive Horizontal Slider 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 "Responsive HorizontalSlider" 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
Height: Altura que o Slider irá ter.
IconUrl: Endereço do ícone da montra que aparecerá junto do título.
ID: String única que identificará a montra e fará com que os controlos de paginação ou setas funcionem – sem isto não terão qualquer acção.
PagerType: Há três valores possíveis: 0, 1 e 2, sendo que 0 não mostra nenhum controlo, 1 mostra apenas setas para mudar a imagem do Slider, 2 apenas a paginação na parte inferior da imagem e 3 mostra ambos.
PauseOnHover: Se activado, quando o rato para em cima do Slider, ele parará também de passar as imagens.
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: [deprecated: columns não se encontra em uso neste tipo de montra]
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-slider-template">
<%
var showcaseHeight = !!model.get('height') ? ('height: ' + model.get('height')) : "height: 400px";
var iconUrl = model.get('iconUrl');
var title = model.get('title');
var pauseOnHover = !!model.get('pauseOnHover') ? 'data-pause="hover"' : '';
var elementId = model.get('elementId');
var showPagination = !!model.get('pagerType') && (model.get('pagerType') == 3 || model.get('pagerType') == 2);
var showArrows = !!model.get('pagerType') && (model.get('pagerType') == 3 || model.get('pagerType') == 1);
var interval = 5000;
if(!!model.get('timeout')){
interval = model.get('timeout');
}
%>
<div id="<%= elementId%>" class="carousel slide carousel-fade responsive-slider" data-ride="carousel" data-interval="<%= interval%>" <%= pauseOnHover%> style="<%= showcaseHeight%>;">
<% if(showPagination){ %>
<ol class="carousel-indicators"></ol>
<% } %>
<div class="carousel-inner total-height">
</div>
<% if(showArrows){ %>
<a class="carousel-control-prev" href="#<%= elementId%>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#<%= elementId%>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<% } %>
</div>
</script>
Customizar os itens
O código abaixo corresponde ao template base usado para um showcase item. Dentro deste template há acesso às variáveis 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-slider-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';
var activeClass = model.get('activeClass');
%>
<div class="carousel-item <%= activeClass%> image-cover total-height total-width" 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-slider-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';
var activeClass = model.get('activeClass');
%>
<!-- 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';
var activeClass = model.get('activeClass');
%>
Customizar aspecto
Depois de se customizar o HTML, as alterações poderão fazer com que o responsive horizontal slider 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.