os detalhes do produto

os detalhes do produto são a janela que abre sobre o catálogo quando alguém clica num produto, e reúnem as fotos, os preços por tamanho, a grade onde a quantidade é digitada, a descrição e os produtos relacionados.

​

a janela e as quatro seções

os detalhes abrem sobre o catálogo, sem tirar a pessoa da navegação, e ocupam a tela inteira em largura pequena. a coluna das fotos fica parada, com zoom em tela cheia para imagem, e só a coluna de informações rola. o cabeçalho traz o nome do produto, o código e, quando existir, a referência entre parênteses. abaixo vêm as classificações de produto marcadas como tag, o código e o nome da cor aberta, o seletor de cores, e o preço, com o preço sugerido e o markup ao lado. logo acima da grade fica o pedido em que a digitação entra, identificado pelo código e pelo cliente, com o total do pedido à direita. sem pedido escolhido, a linha mostra nenhum pedido selecionado. escolher outra cor no seletor troca a cor da janela inteira: as fotos, o preço e a grade passam a ser os daquela cor. quando mais de uma cor tem foto, a galeria ganha um seletor próprio sobre a imagem. quando os tamanhos de um produto têm preços diferentes, o preço aparece como faixa, do menor ao maior, e o sugerido acompanha. o conteúdo vem em quatro seções, nesta ordem: grades, descrição, detalhes e relacionados. cada uma abre e fecha, e o título dela fica fixo no topo enquanto a leitura avança. ao rolar, o cabeçalho encolhe numa barra fixa com o nome e o código. a mesma janela também abre a partir da tabela de preço e da promoção. o endereço guarda o produto aberto, então o link reabre a janela nele; a tecla esc fecha.

​

a seção descrição e a seção detalhes

a seção descrição traz os campos descrição e detalhes do cadastro do produto, com a formatação aplicada neles, e sem nada preenchido mostra sem informações. a seção detalhes lista as classificações de produto da cor que não estão marcadas como tag. as marcadas como tag aparecem no cabeçalho, ao lado do nome.

​

o que a tela puxa do cadastro

cada parte da tela sai de uma aba do cadastro do produto. os preços listados são só os dos tamanhos que a grade tem disponíveis; sem grade, todos aparecem. em pedido finalizado, o preço não é exibido.

​

a grade

a grade é onde a quantidade é digitada, tamanho a tamanho. cada linha é uma combinação de cor com uma entrega, e traz um selo com a abreviação da disponibilidade, pv para pré-venda, pe para pronta-entrega, ef para estoque-futuro e mp para matéria-prima, seguida do nome da janela de entrega. o selo mostra o período da janela ao passar o cursor, e a combinação ainda sem janela aparece como a definir. as linhas são agrupadas por pedido. cada grupo abre com o código do pedido, o cliente, e o resumo do que já está nele em itens, peças e valor. o pedido que ainda não tem cliente aparece como pedido sem cliente. quatro filtros mudam o que a lista traz, aplicados por filtrar. todas as cores, todos os pedidos e todas as entregas restringem as linhas ao que foi escolhido. produtos relacionados faz o contrário: acrescenta à mesma lista a grade de cada produto relacionado, cada uma com a foto e o nome do produto, para preencher tudo sem sair da janela. o de pedidos só aparece com mais de um pedido aberto, e não aparece no celular nem em pedido finalizado. a escolha de filtro é lembrada durante a sessão e volta aplicada na abertura seguinte. quando os tamanhos não cabem na largura, a faixa rola na horizontal pelas setas nas pontas. o valor ao lado de cada linha é a quantidade digitada multiplicada pelo preço unitário, não o total da linha. a linha pode trazer ainda dois selos: o de peças sugeridas, com a quantidade que a sugestão propõe para aquela combinação, e o de sell-out, com o quanto a loja já vendeu no período de referência. a combinação sem grade para a disponibilidade escolhida mostra grade indisponível, e o produto sem nenhuma mostra não há grades disponíveis. com a configuração de grade fechada ligada, em configurar cada cor do produto, a grade daquela cor não aceita alteração. preencher a grade funciona aqui como no pedido. o menu grade de cada linha, o cadeado que libera quantidades acima do limite e o copiar e colar entre grades estão descritos em adicionar itens ao pedido. o cadeado não aparece em pedido finalizado, no celular nem em catálogo compartilhado. ao copiar uma grade, o cabeçalho dá lugar a uma barra de seleção, com o contador do que está marcado e a ação de colar em todas. adicionar ao pedido exige um pedido escolhido, e em pré-venda também uma janela de entrega: sem ela, a tela responde selecione uma janela de entrega. pronta-entrega e estoque-futuro não pedem janela. sem nenhum pedido escolhido, o clique fecha os detalhes e abre o talão guardando o produto. pedido sem cliente não impede nada: é como a tela nomeia, no cabeçalho, o pedido que ainda não tem cliente. quando a combinação não está disponível para o cliente e ainda não há item dela no pedido, o botão fica desabilitado. com o item já no pedido, o botão vira uma marca de confirmação com seta e abre o menu com remover do pedido, sem opção de adicionar de novo.

​

relacionados

a seção relacionados traz outros produtos, carregados de 12 em 12 conforme a rolagem avança. o título dela é montado com os nomes das classificações de produto sugeridas, e por isso muda de produto para produto. sem classificação de produto sugerida, a seção não é exibida. cada produto relacionado traz a foto, o nome, o código e o seletor de cores, com um contador para as que não couberam, e um botão de adicionar, sem exibir preço. clicar no produto abre os detalhes dele, e escolher uma cor abre já naquela cor. kit tem preço único em vez da régua por tamanho, e não tem cor nem relacionados.

​

em catálogo compartilhado

o catálogo compartilhado por link abre os detalhes sem login. clicar para adicionar leva à tela de entrada, e o comando que libera a digitação acima do limite também não aparece. o que fica visível nesse acesso, os detalhes e cada faixa de preço, segue o que foi marcado na geração do link.