Interface semelhante à Amazon para selecionar o tamanho e a cor do produto (por exemplo, clicar em uma pequena checkbox vermelha para selecionar um produto vermelho, etc.)

Na minha loja online, quero implementar uma interface como a da Amazon para selecionar o tamanho e a cor do produto. Ou seja, em vez de botões de rádio para os diferentes tamanhos / colors, o usuário deve ver um monte de pequenas checkboxs, cada uma contendo uma amostra de cor ou o nome de um tamanho. Quando o usuário clica em uma checkbox, a borda deve mudar para indicar que está selecionada.

Eu já estou usando o jQuery, então pensei que o widget selecionável do jQuery seria uma maneira natural de implementar isso. Infelizmente, ele não parece dar a você o controle sobre o número máximo de itens que o usuário pode selecionar e, portanto, não posso limitar os usuários a selecionar on-line uma cor / tamanho na interface do usuário.

Qual é a melhor maneira de implementar essa funcionalidade de uma maneira amigável ao jQuery (se possível)?

Aqui está como fazer isso corretamente usando o encanto progressivo . A ideia é simples: transformar um formulário HTML decentemente marcado em botões de amostra de cor e tamanho mais agradáveis ​​para usuários que possuam JavaScript.

Os benefícios desse método são muitos, você pode facilmente alternar ou remover componentes (JS / CSS) e ter o formulário ainda funcionando. Ele funcionará para usuários que não possuem javascript e, se tivermos cuidado, será acessível por meio de leitores de teclado e canvas. Também não requer nenhum código extra no envio e será muito mais fácil de usar com um validador de formulário.

A maior parte do trabalho é feita com CSS com apenas um mínimo de JavaScript para adicionar os toques finais.

Um exemplo completo de exemplo de trabalho pode ser encontrado no jsbin . Inclui seleções de cor e tamanho. Eu incluí apenas as colors aqui, pois há apenas uma pequena diferença no CSS entre elas.

O HTML

Primeiro, marque os componentes do formulário. Aqui está o básico, você pode, obviamente, querer adicionar coisas, como um wrapper em torno de todo o widget, ou usar outros nomes de classs.

 

Isso pode parecer muito para “básico”, mas há várias coisas acontecendo aqui. Todo o contêiner UL é sinalizado como “radio”, então tudo dentro dele pode ser direcionado apropriadamente com CSS ( "ul.radio label" ).

Além disso, adiciono uma class correspondente ao nome da input e uma class em cada LI ecoando o valor para permitir que o CSS adicione estilos apropriados ( "ul.color li.red" ). O resto é praticamente a sua marcação de formulário padrão.

O JavaScript

O JavaScript é muito simples. Tudo o que fazemos é detectar qual input de rádio está selecionada no momento e sinalizar o container LI com uma class “selecionada”, permitindo que o CSS o destaque adequadamente.

 jQuery(function($){ // notify CSS that JS is present $( 'body' ).addClass( 'js-active' ); // for every radio control... $( 'ul.radio' ) // redo every change .bind('click', function () { // refresh "current classs" $( 'li', this ).removeClass( 'selected' ) .filter( ':has(:checked)' ).addClass( 'selected' ); }) // trigger initial run .trigger( 'click' ); }); 

Por favor, note: Este “truque” de triggersr clique para forçar a execução inicial pode ser inseguro se você tiver manipuladores de clique superiores (normalmente document.body ), eu uso esse método para fins de brevidade.

O CSS

Aqui é onde a verdadeira mágica acontece. A ideia é que podemos deixar os controles de input fora de vista e estilizar os labels como botões coloridos. Contanto que os atributos para nos labels apontem corretamente para id nas inputs, clicar nos labels será suficiente para selecionar o controle corretamente.

Precisamos direcionar as coisas apenas dentro de ".js-active" para que os usuários que não tenham JavaScript, mas ainda tiverem CSS, vejam os elementos de input de rádio. Algum tipo de class “.radio-js” poderia alternativamente ser adicionada no wrapper UL para fazer a mesma coisa.

Em primeiro lugar, flutue os botões e dê a eles uma aparência mais semelhante a um botão:

 /* attributes are lined up horizontally */ ul.color li, ul.size li { border : 1px solid #aaa; margin : 0 4px 0 0; padding : 2px; float : left; overflow : hidden; position : relative; } 

Colocamos position:relative e overflow:hidden em cada LI, para que possamos desviar o elemento de input para fora da vista. Isso vai mantê-lo acessível, mas não precisamos mais analisar:

 /* if JS: remove inputs from sight */ .js-active ul.color input, .js-active ul.size input { position : absolute; left : -999em; } 

O próximo passo é transformar os labels em botões:

 /* if JS: turn color labels into buttons */ .js-active ul.color label { cursor : pointer; display : block; height : 18px; width : 18px; text-indent : -999em; /* hide text */ } /* color buttons in color -- allowed even if no JS */ ul.color li.red label { background : red; } ul.color li.green label { background : green; } ul.color li.blue label { background : blue; } 

Finalmente, defina alguns estilos para o nosso item selecionado / destacado.

 /* if JS: current selected highlight */ .js-active ul.color .selected, .js-active ul.size .selected { border : 2px solid #000; padding : 1px; } 

Para completar: obter os valores de seleção se você quiser adicionar mais efeitos é demonstrado em outro lugar no SO.

É possível ter seleção selecionável para evitar jQuery, embora infelizmente não seja muito intuitivo:

 $('#selectable').selectable({ selected: function(event, ui) { var total = $(ui.selected).siblings('li.ui-selected').length + 1; if(total > 1) { $(ui.selected).removeClass('ui-selected'); } } }); 

Isso impedirá que qualquer coisa após uma seleção seja feita em um widget selecionável.

O resto é apenas personalizá-lo para suas necessidades específicas.

EDIT : Eu fiquei um pouco entediado, então eu implementei um pouco mais para que você pudesse ter uma idéia.

Confira uma demonstração de trabalho . Há muita repetição para as coisas feitas em tamanhos e colors que você provavelmente pode se livrar, mas eu queria mantê-los separados, porque eu imagino que as coisas podem mudar entre os dois. De qualquer forma, isso deve lhe dar um bom começo.

Se o seu objective é permitir que apenas um item seja selecionado, isso será feito:

 $(function() { $("#selectable").selectable({ // this will prevent selecting a second item (for dragging\clicking) selecting: function(event,ui) { if ($(ui.selecting).siblings("li.ui-selecting").length > 0) $(ui.selecting).removeClass("ui-selecting"); }, // this will prevent selecting a second item (for CTRL+Click) selected: function(event,ui) { if ($(ui.selected).siblings("li.ui-selected").length > 0) $(ui.selected).removeClass("ui-selected"); }, // this will prevent un-selecting items (one item must be selected) unselected: function(event,ui) { if ($(ui.unselected).siblings("li.ui-selecting").length == 0) $(ui.unselected).addClass("ui-selected"); } }) }); 

Esse código permitirá que um único item seja selecionado e impedirá a seleção de outro item, seja arrastando o mouse ou usando CTRL + clique. Também impedirá a desmarcação de itens. Tem um comportamento muito semelhante ao que a Amazon tem.

Você pode usar o evento de stop para realizar alterações na página após a seleção de um item (semelhante aos exemplos que acompanham a IU do JQuery).

Cara, essa interface da Amazon é feia. Eu ficaria tentado a tentar algo mais ao longo das linhas de:

  • Simple Color Picker (naturalmente, você não usaria a representação hexagonal da cor no selecionador)
  • Color Picker (embora este seja provavelmente um pouco mais de controle do que seria necessário sobre a cor)
  • Seletor de colors planas (quase tão feio quanto o da Amazon)

Tamanhos devem ser bastante fáceis. Eu provavelmente faria pequenas fotos de camisas de diferentes tamanhos, tipo, como aqui:

  • Zazzle

(Esse é o melhor exemplo de escolher o tamanho da camisa que eu encontrei, a maioria dos lugares é bem ruim)

    Intereting Posts