Tray OpenCode. Desenvolvimento de temas da plataforma de e- commerce Tray

(1)

Tray OpenCode

Desenvolvimento de temas da plataforma de e-commerce Tray

(2)

(3)

OpenCode - Vamos Começar?

Possibilidade de criar layouts para loja de forma simples e rápida.

Com Tray OpenCode você pode fazer vários testes de layout.

Disponibiliza flexibilidade para a loja virtual em várias ocasiões que

envolvem datas comemorativas como Natal, Dia das Mães, Dia dos

Namorados, entre outras.

(4)

Template Engine - Twig

Para facilitar a manipulação dos objetos e funções disponíveis

é utilizado o Template Engine Twig.

Não são disponibilizados todos os recursos do Twig.

Para mais informações acesse:

(5)

Iniciando um Tema

É possível desenvolver um tema de duas maneiras:

Administração GEM OpenCode.

Loja Virtual

(6)

(7)

(8)

(9)

(10)

Iniciando um Tema - GEM Ruby

Criação e gerenciamento do tema através de linha de comando.

Facilidade e agilidade no desenvolvimento do tema.

Instalação GEM (Pré requisito - Ruby):

$ gem install opencode_theme $ opencode systeminfo

(11)

Iniciando um Tema - GEM Ruby

Criação do Primeiro Tema

$ mkdir primeiro-tema $ cd primeiro-tema

(12)

Iniciando um Tema - GEM Ruby

Comandos OpenCode - GEM:

opencode new API_KEY PASSWORD THEME_NAME THEME_BASE

opencode clean

opencode configure API_KEY PASSWORD THEME_ID

opencode download FILE

opencode help [COMMAND]

opencode list

opencode open

opencode remove FILE

opencode systeminfo

opencode upload FILE

(13)

Estrutura do Tema

Estrutura para melhor organização:

elements/ -> trechos de código e componentes reutilizáveis layouts/ -> estrutura do seu tema, código que será carregado em ...todas as páginas

pages/ -> conteúdo de cada página da sua loja

css/ -> você pode inserir suas folhas de estilo e webfonts js/ -> você pode inserir seus plugins js

img/ -> pasta de imagens

configs/ -> opções da sua loja virtual (ainda em ... desenvolvimento)

(14)

layouts/

pages/

O que é?

(15)

elements/

elements/snippets/

O que é?

(16)

Páginas Disponíveis

As seguintes páginas estão disponíveis para edição:

pages/

catalog.html -> página de categoria

home.html -> página inicial

map.html -> mapa do site

product.html -> página de produto

(17)

Verifique se os arquivos correspondem a codificação correta

Codificação de Arquivos

Tipo Codificação html ISO-8859-1 js UTF-8 css UTF-8

(18)

(19)

(20)

(21)

Objetos - O que são?

Objetos são estruturas de dados utilizadas para facilitar a manipulação

de determinadas informações.

Podemos citar por exemplo o objeto

product

que contém todos os

atributos de um produto,e também o objeto

que tem como

informação todas as categorias da loja.

{% for product in products %} {{ product.name }}

(22)

Objeto - banner

O objeto

banner

é responsável por trazer os banner cadastrados no

painel e mostrá-lo conforme características necessárias

Para imprimir um

banner

,você poderá utilizar o helper de banner, onde

exibem os banners em um bloco pré-moldado. Segue abaixo algumas

chamadas:

(23)

Objeto - themePath

O objeto

themePath

é utilizado para referenciar o caminho absoluto do

tema, com ele é possível incluir arquivos ao tema como

css

,

javascript

e

imagens

.

(24)

Objeto - utils

O objeto

utils

é um objeto de utilidade técnica e ele verifica o

ambiente da loja virtual, alem de adicionar um hash ao final dos assets

para que os arquivos não sejam carregados através do cache do

navegador.

(25)

Objeto - breadcrumb

O

breadcrumb

é responsável por exibir retornar um array com as

informações de localização das categorias relacionadas

Para imprimir um

breadcrumb,

você poderá utilizar o helper de

breadcrumb, onde exibem o breadcrumb em um bloco pré-moldado.

(26)

Objeto - category

O Objeto

é responsável por retornar a categoria atual do

tema, através dela é possível fazer validações relacionas a categoria

dos produtos

<div>

<h4>{{ category.id }}</h4> <h3>{{ category.name }}</h3> </div>

(27)

Objeto - categories

O Objeto

é responsável por retornar um vetor com as

categorias cadastradas no painel.

<ul>

{% for category in categories %} <li>

<a href="{{ category.link }}">{{ category.name }}</a> </li>

{% endfor %} </ul>

(28)

Objeto - links

O Objeto

links

é responsável por retornar o caminho das paginas e

todos os links utilizados no tema

<ul>

<li><a href="{{ links.info_buy }}">Como comprar</a></li> <li><a href="{{ links.send }}">Formas de envio</a></li> <li><a href="{{ links.warranty }}">Garantia</a></li> <li><a href="{{ links.security }}">Segurança</a></li> </ul>

(29)

Objeto - pages

O Objeto

pages

contém informações das páginas da loja, como por

exemplo a página atual e as paginas personalizadas..

{% if pages.current == 'home' %}

<h4>Você é na nossa página inicial!</h4> {% else %}

<h5>Esta não é a página inicial!</h5> {% endif %}

(30)

Objeto - paymentMethods

O Objeto

paymentMethods

trás todas as informações de formas de

pagamentos a vista e a prazo cadastradas no painel.

<h5>A Vista</h5>

{% for payment in paymentMethods.order %}

{% endfor %}

<h5> A Prazo</h5>

{% for payment in paymentMethods.credit %}

(31)

Objeto - product

O Objeto

product

contém as informações do produto quando está na

página de produto.

<div>

Codigo do produto: <span>{{ product.id }}</span> <h3>{{ product.name }}</h3>

<h3>{{ product.brand }}</h3> </div>

(32)

Objeto - products

O Objeto

products

está disponível de acordo com as regras de cada

página:

● Na home contém os produtos em destaque;

● Na catalog contém os produtos de uma categoria específica de

acordo com os filtros aplicados;

● Na search contém os produtos de acordo com os critérios da

busca e os filtros aplicados.

<h3>{{ products[0].name }}</h3> <h3>{{ products[0].brand }}</h3>

(33)

Objeto - seals

O Objeto

seals

retorna o código para os selos de Loja Protegida e

Ebit.

(34)

Objeto - search

O Objeto

search

retorna informações relacionadas a busca de

produtos.

{% if search.available_options %} <h3> Exibir Por:</h3>

{% for option in search.available_options %}

<option value="{{ option.value }}">{{ option.name }}</option>

{% endfor %} </select>

(35)

Objeto - filters

O Objeto

filters

retorna um array com filtros que da a possibilidade

de montar filtros inteligente.

Este recurso é necessário estar ativo para o cliente.

{% for myFilter in filters %}

{% if myFilter.items %} {{ myFilter.title }} {% elseif myFilter|length %} {% for var in myFilter %} {{ var.title }}</h3> {% endfor %}

{% endif %} {% endfor %}

(36)

Objeto - paginate

O Objeto

paginate

retorna um helper de paginação de produtos.

(37)

Objeto - store

O Objeto

store

retorna as informações básicas da loja.

(38)

Objeto - tags

O Objeto

retorna uma lista com as palavras mais buscadas na

loja.

{% for tag in tags %}

(39)

(40)

(41)

(42)

Funções - O que são?

Uma Função poderia ser definida como um conjunto de instruções que

permitem processar as variáveis para obter um resultado.

É através do uso destas funções que se torna possível manipular os

resultados exibidos em sua loja virtual

Você pode por exemplo: Ordenar seus resultados, exibir imagens, listar

produtos,

marcas

e

categorias

especificas

entre

diversas

funcionalidades

(43)

Função - asset()

A função

assets()

é utilizada para referenciar o caminho absoluto do

tema, com ele é possível incluir arquivos ao tema como

css

,

javascript

e

imagens

.

(44)

Função - Brands()

A função

Brands()

retorna as marcas cadastradas no Painel

Administrativo da loja.

<ul>

{% set brands = Brands() %}

{% for brand in brands %}

<li>{{ brand.name }}</li> {% endfor %}

(45)

Função - Categories()

A função

Categories()

retorna as categorias cadastradas no Painel

Administrativo da loja.

{% set myCategories = Categories({"order":{"name": "asc"}}) %}

<ul>

{% for category in myCategories %} <li>{{ category.name }}</li> {% endfor %}

(46)

Função - Image()

A função

Image()

uma imagem cadastrada no Painel Administrativo.

(47)

Função - Products()

A função

Products()

retorna os produtos cadastrados na loja.

{% set products = Products({ 'filter': 'featured', 'limit': 8,

'order': {'quantity_sold': 'desc'}, 'categories': [2, 3],

'brands': 'Tray' }) %}

(48)

Função - Translation()

A função

Translation()

exibe um texto de acordo com o cadastrado

na sua loja no Painel Administrativo.

Localizado os textos em Configurações > Textos / Lang.

(49)

(50)

(51)

(52)

O que são Data Attributes ?

Os Data Attributes , são Atributos de dados que fazem com que os

módulos disponíveis na plataforma funcionem sem a necessidade de

escrever linhas Javascript.

Veja a lista de módulos disponíveis:

● Cart

● Customer

● Logged User

● Filter

(53)

Data Attribute - Cart

Para contornar o cache, utilize as marcação abaixo para exibir os dados

do carrinho atualizados.

Para exibir a quantidade de itens no carrinho utilize:

Para exibir o valor total do carrinho utilize:

(54)

Data Attribute - Customer

Para contornar o cache, utilize a marcação abaixo para exibir o nome

do cliente logado.

(55)

Data Attribute - Logged User

Verifica se o cliente está logado ou deslogado na loja.

<a href="{{ links.login }}">Login </a> |

<a href="{{ links.sign_in }}">Crie sua conta</a> <li>

(56)

Data Attribute - Filter

Com o data-attribute filter é possível filtrar os produtos exibidos e

ordená-los.

<h5>Filtrar por Categorias:</h5> {% set categories = Categories() %} <select name="filtrar_categorias"> {% for categorie in categories %}

<option value="{{ categorie.name }}"> {{ categorie.name }}

</option> {% endfor %} </select>

(57)

Data Attribute - Compare

Para adicionar e remover produtos da comparação de produtos via

AJAX, utilize o seguinte snippet:

{% set compareCSS = 'compare-hidden' %} <a data-compare="remove"

href="{{ links.compare_delete ~ product.id }}" class="{{ not product.compare ? compareCSS }}"> {{ Translation("remover_comparar") }}

</a>

<a data-compare="add"

href="{{ links.compare_add ~ product.id }}" class="{{ product.compare ? compareCSS }}"> {{ Translation("comparar_produto") }} </a>

(58)

Data Attribute - Search

Esse data attribute é responsável por adicionar a sugestão de busca a

caixa de pesquisa

(59)

(60)

(61)

(62)

APIs REST Públicas

As APIs REST Públicas possibilita consultar algumas informações da

loja virtual através de um javascript, onde são retornadas as

informações através de um JSON.

As APIs traz mais versatilidade no desenvolvimento de temas.

Disponível 5 APIs REST Públicas:

● Busca

● Carrinho de Compra

● Categorias

● Produtos

(63)

API de Busca

Através da API de Busca é possível consultar os produtos contidos na

loja virtual através de palavras-chave.

$.ajax({

method: "GET",

url: "/web_api/search/", data: params

}).done(function( response, textStatus, jqXHR ) { console.log(response);

}).fail(function( jqXHR, status, errorThrown ){

var response = $.parseJSON( jqXHR.responseText ); console.log(response);

}); </script>

(64)

API de Carrinho de Compra

Através da API de Carrinho de compra é possível incluir produtos e

resgatar informações do carrinho de compra, retornando a URL deste

carrinho para exibição ao cliente.

É possível realizar a requisição via:

● POST: Para incluir produtos no carrinho de compra.

(65)

API de Carrinho de Compra - GET

Consultado dados do carrinho de compra.

var dataSession = $("html").attr("data-session");

$.ajax({

method: "GET",

url: "/web_api/cart/"+dataSession

}); </script>

(66)

API de Carrinho de Compra - POST

Incluindo produto no carrinho de compra.

var dataSession = $("html").attr("data-session"); $.ajax({

method: "POST",

url: "/web_api/cart/",

contentType: "application/json; charset=utf-8", data: '{"Cart":{"session_id":"'+dataSession+'"," product_id":"100","quantity":"2","variant_id":"0"}}'

}); </script>

(67)

API de Categorias

Através da API de Categorias é possível consultar as categorias

contidas na loja virtual.

$.ajax({

method: "GET",

url: "/web_api/categories/tree/"+categoryId }).done(function( response, textStatus, jqXHR ) {

console.log(response);

}); </script>

(68)

API de Produtos

Através da API de Produtos é possível consultar e listar os produtos

contidos na loja virtual.

$.ajax({

method: "GET",

url: "/web_api/products/"+productId

}); </script>

(69)

API de Variações de Produto

Através da API de Variações de Produtos é possível identificar todas as

variações contidas na loja virtual e identificar o produto relacionado à

variação.

$.ajax({

method: "GET",

url: "/web_api/variants/" + variantId

}); </script>

(70)

(71)

(72)