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

Transcrição

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

2 Passos Iniciais

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 Loja Virtual GEM OpenCode.

6 Iniciando um Tema - Administração

7 Iniciando um Tema - Administração

8 Iniciando um Tema - Administração

9 Iniciando um Tema - Administração

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 $ opencode new API_KEY PASSWORD 'PrimeiroTema'

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 opencode watch

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 O que é? layouts/ pages/

15 O que é? elements/ elements/snippets/

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 search.html -> página de busca

17 Codificação de Arquivos Verifique se os arquivos correspondem a codificação correta Tipo Codificação html ISO js UTF-8 css UTF-8

18 Getting Started

19 Dúvidas???

20 OpenCode - Objetos

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 categories que tem como informação todas as categorias da loja. {{ categories[0].name}} {% for product in products %} {{ product.name }} {% endfor %}

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: {{ banner.home }} {{ banner.bottom }} {{ banner.extra1 }}

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. <img src="{{ themepath }}img/my-image.png" alt=""> <script src="{{ themepath }}js/style.js?"></script> <link href="{{ themepath }}cdd/style.css?">

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. <link href="my.css?{{ utils.assets_version }}" rel="stylesheet"/>

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. {% element 'snippets/breadcrumb' %}

26 Objeto - category O Objeto category é 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 categories é 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 %} <img src="{{ payment.thumbnail.url }}" alt="{{ payment. display_name }}"> {% endfor %} <h5> A Prazo</h5> {% for payment in paymentmethods.credit %} <img src="{{ payment.thumbnail.url }}" alt="{{ payment. display_name }}"> {% endfor %}

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. {{ seals.hackersafe }} {{ seals.ebit }}

34 Objeto - search O Objeto search retorna informações relacionadas a busca de produtos. {% if search.available_options %} <h3> Exibir Por:</h3> <select name="disponibilidade_tag"> {% for option in search.available_options %} <option value="{{ option.value }}">{{ option.name }}</option> {% endfor %} </select> {% endif %}

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. {{ element('snippets/pagination') }}

37 Objeto - store O Objeto store retorna as informações básicas da loja. {{ store.id }} {{ store.name }} {{ store.url }} {{ store.chat }}

38 Objeto - tags O Objeto tags retorna uma lista com as palavras mais buscadas na loja. {% for tag in tags %} <a href="{{ tag.url }}" style="font-size: {{ tag. font_size }}%">{{ tag.word }}</a> {% endfor %}

39

40 Dúvidas???

41 Opencode - Funções

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. <img src="{{ asset('img/my-image.png') }}" alt=""> <script src="{{ asset('js/style.js') }}"></script> <link rel="stylesheet" href="{{ asset('css/style.css') }}">

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 %} </ul>

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 %} </ul>

46 Função - Image() A função Image() uma imagem cadastrada no Painel Administrativo. {{ Image('sign_in') }} {{ Image('logo') }} {{ Image('buy') }} {{ Image('unavailable_button') }}

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. {{ Translation('ag_telefone_1') }} {{ Translation('aviso_implantacao_topo') }} {{ Translation('ag_ _1') }}

49

50 Dúvidas???

51 Opencode - Data Attributes

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 Search

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: <span data-cart="amount"></span> Para exibir o valor total do carrinho utilize: <span data-cart="price"></span>

54 Data Attribute - Customer Para contornar o cache, utilize a marcação abaixo para exibir o nome do cliente logado. <span data-customer="name"></span>

55 Data Attribute - Logged User Verifica se o cliente está logado ou deslogado na loja. <!-- Cliente Logado--> <span class="tray-hide" data-logged-user="true"> <li> Olá<span data-customer="name"></span></li> <li><a href="{{ links.logout }}">sair</a></li> </span> <!-- Cliente Deslogado--> <span class="tray-hide" data-logged-user="false"> <li> <a href="{{ links.login }}">Login </a> <a href="{{ links.sign_in }}">Crie sua conta</a> <li> </span>

56 Data Attribute - Filter Com o data-attribute filter é possível filtrar os produtos exibidos e ordená-los. <form data-form="filter"> <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> </form>

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 <form data-search="suggestion"> <input data-input="suggestion" type="text"> </form>

59

60 Dúvidas???

61 Opencode - APIs REST Públicas

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 Variações de Produto

63 API de Busca Através da API de Busca é possível consultar os produtos contidos na loja virtual através de palavras-chave. <script type="text/javascript"> $.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. GET: Para consultar as informações do carrinho de compra.

65 API de Carrinho de Compra - GET Consultado dados do carrinho de compra. <script type="text/javascript"> var datasession = $("html").attr("data-session"); $.ajax({ method: "GET", url: "/web_api/cart/"+datasession }).done(function( response, textstatus, jqxhr ) { console.log(response); }).fail(function( jqxhr, status, errorthrown ){ var response = $.parsejson( jqxhr.responsetext ); console.log(response); }); </script>

66 API de Carrinho de Compra - POST Incluindo produto no carrinho de compra. <script type="text/javascript"> 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"}}' }).done(function( response, textstatus, jqxhr ) { console.log(response); }).fail(function( jqxhr, status, errorthrown ){ var response = $.parsejson( jqxhr.responsetext ); console.log(response); }); </script>

67 API de Categorias Através da API de Categorias é possível consultar as categorias contidas na loja virtual. <script type="text/javascript"> var categoryid = "3"; $.ajax({ method: "GET", url: "/web_api/categories/tree/"+categoryid }).done(function( response, textstatus, jqxhr ) { console.log(response); }).fail(function( jqxhr, status, errorthrown ){ var response = $.parsejson( jqxhr.responsetext ); 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. <script type="text/javascript"> var productid = "84"; $.ajax({ method: "GET", url: "/web_api/products/"+productid }).done(function( response, textstatus, jqxhr ) { console.log(response); }).fail(function( jqxhr, status, errorthrown ){ var response = $.parsejson( jqxhr.responsetext ); console.log(response); }); </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. <script type="text/javascript"> var variantid = "5"; $.ajax({ method: "GET", url: "/web_api/variants/" + variantid }).done(function( response, textstatus, jqxhr ) { console.log(response); }).fail(function( jqxhr, status, errorthrown ){ var response = $.parsejson( jqxhr.responsetext ); console.log(response); }); </script>

70

71 Dúvidas???

72 Suporte a desenvolvedores Material de apoio manual OpenCode Canais de atendimento: [email protected]