Opções personalizadas de data e hora

Em algumas ocasiões pode ser interessante ou mesmo importante exibir um campo de data e hora no produto que você está vendendo.

Seja para obter uma data de nascimento que será relacionada ao produto, ou mesmo um agendamento de entrega, ou ainda a data de partida de viagem.

Enfim, é uma necessidade que pode surgir e é bom saber que podemos contar com algumas configurações nativas do Magento para customizar essa apresentação, vejamos abaixo.

O campo data/hora

Antes que eu mostre as modificações que podem ser realizadas, precisamos ver como é o padrão do sistema. Para isso acesse um produto do seu catálogo e vá na opção de menu à esquerda “Opções Personalizadas“.

Vamos inserir um campo do tipo “Data & Hora“. Neste exemplo com o título “Data de Partida“, assumindo que este produto é um pacote de viagens.

campo data e hora

Não é preciso configurar nada mais que isso neste exemplo. Salve e visualize o produto em frontend.

campo data hora frontend

Este deve ser o resultado padrão do Magento. Como podemos observar, nada elegante e pouco produtivo.

Personalizando data e hora

Agora sim podemos ver como alterar a exibição padrão do sistema, para isso acesse seu backend o menu:

Sistema > Configuração > CATÁLOGO > Catálogo [Opções Personalizadas de Data & Hora]

Os 4 (quatro) campos apresentados nesta configuração podem atuar juntos ou de forma independente.

configurando data hora

Isso significa que você não precisa utilizar calendário em javascript para poder alterar a ordem dos campos data, ou mesmo o formato da hora e limite de anos. Uma única alteração já afeta de imediato sua apresentação em frontend.

Por isso faça seus ajustes, salve, e veja o resultado:

campo data com calendario

Esteticamente não é nenhuma obra de arte, isso ainda pode melhorar MUITO, mas já é mais amigável do que aquela sequência de combobox do sistema padrão. E é interessante para ajustar o formato de datas DD/MM/YYYY, horário em 12 ou 24, e impor um limite de anos disponíveis para seleção.

Sucesso!