WL_Food_Ordering_1280x720.mp4

00:00:00

Neste tutorial, vou abordar o widget de pedidos de comida

00:00:04

Isso pode ser usado para colocar itens de menu e alimentos diretamente no site, o que permitirá que os clientes comprem e, então, você pode realmente configurar o envio ou jantar e entrega em muitas outras configurações também

00:00:19

E vamos repassar tudo isso

00:00:21

Como você pode ver, eu tenho um modelo que já está pré-fabricado aqui com os itens alimentares

00:00:27

Esta aqui é uma hamburgueria

00:00:28

Vamos usar isso apenas por uma questão de simplicidade, mas vou mostrar como criar tudo isso

00:00:33

Você pode definir seu título aqui na sua introdução e esses itens da lista, esses são todos os seus itens que realmente serão listados para o aplicativo de pedidos de comida

00:00:44

Você simplesmente clicaria em adicionar um novo item de lista e eles criariam um novo

00:00:49

E quando você fizer isso, vamos abrir esse hambúrguer para que você possa ver como um exemplo

00:00:53

Você tem todos os seus diferentes menus aqui

00:00:54

Você pode definir seu preço

00:00:56

Você definiria ali mesmo a quantidade máxima, quantos eles poderiam adicionar ao carrinho de compras

00:01:02

Estas são as opções e coberturas disponíveis e incluídas

00:01:06

Elas mostrarão as opções selecionadas como ativadas e disponíveis por padrão.

00:01:12

Embora essas opções não estejam disponíveis, eles terão que escolher se querem ou não adicioná-las

00:01:18

Se você quiser adicionar um preço extra a eles, basta seguir as instruções aqui

00:01:21

Você criaria este símbolo, seguido por um sinal de mais e um um, e isso fica logo acima do enter.

00:01:26

Então, se você segurar a tecla Shift e depois a tecla de barra logo acima da tecla Enter, esse símbolo será criado e você adicionará um sinal de mais.

00:01:33

Você pode fazer, digamos por exemplo, mais 0 50

00:01:35

para queijo e então deixaremos o mais um para cebolas e quando salvarmos isso e clicarmos nisso, você verá agora aqui está a quantidade e o ketchup e a maionese são selecionados automaticamente como em

00:01:51

porque eles estão disponíveis e então esses não estão incluídos e você pode ver o preço extra, o dólar extra para cebolas, os 50 centavos extras para queijo

00:02:00

Você pode adicionar diferentes opções, como tamanho, cor ou sabor, e então você adicionaria os diferentes, você sabe, pequeno, médio, grande ou os diferentes sabores, as diferentes cores disponíveis para cada item.

00:02:19

Você pode adicionar seu texto principal, seu título e todas as informações aqui

00:02:26

O resumo é o que vai aparecer ali, enquanto o texto principal vai ser o que realmente está dentro

00:02:33

Você pode carregar suas fotos e vídeos aqui mesmo e é assim que eles se alinham ao texto, seja acima ou abaixo do texto ou na área de trabalho à esquerda ou à esquerda.

00:02:49

certo e se você tiver várias imagens, você pode definir um controle deslizante e isso determinará a frequência com que ele desliza entre as imagens e você pode adicionar botões também e isso foi abordado nos botões

00:03:06

tutorial

00:03:07

Agora, este SEO, Open Graph e URL, isto é para otimização de mecanismos de busca, que também é abordado em um tutorial separado, e isto é para Facebook e sites de mídia social também.

00:03:20

Depois de ter todos os seus itens definidos, todas as suas coberturas e todas as suas fotos carregadas e a natureza salva, você simplesmente retornará ao widget principal que pode ser acessado

00:03:37

tanto do botão inferior aqui em baixo ou do botão superior aqui à direita

00:03:42

Você pode simplesmente clicar no widget de pedidos de comida e isso o levará de volta ao menu principal e então aqui você pode adicionar outro item ou pode definir os diferentes detalhes e opções

00:03:55

Aqui é onde você definiria a entrega, a retirada e os diferentes tipos de pedidos para que você possa manter o controle e selecionar aqueles que deseja que estejam disponíveis e isso determinará se ele ainda está disponível.

00:04:09

pergunta o tipo de pedido

00:04:11

Você pode determinar um custo de entrega, isso será adicionado automaticamente ao preço e ao pedido mínimo para entrega, para que você não perca seu tempo entregando apenas um dólar em comida, você pode ter um

00:04:22

mínimo

00:04:23

Estes são os diferentes locais disponíveis, isso vai perguntar junto com o tipo de pedido, vai perguntar os diferentes locais

00:04:33

Você simplesmente os separaria com uma vírgula, você pode perguntar o horário do pedido também e então você pode definir seus horários e horários disponíveis e perguntar se você quer permitir gorjetas e

00:04:52

ele calculará automaticamente a porcentagem disso

00:04:56

Isso aqui é mais para organização

00:04:59

Se você tiver várias páginas, isso ajuda porque você pode adicionar um formulário de pesquisa que criará uma pequena barra de pesquisa bem no topo, você pode ver que acabou de criar automaticamente uma barra de pesquisa e

00:05:14

aqui embaixo se você tiver várias páginas, você pode escolher como deseja organizá-las aqui, bem como diferentes guias que serão abertas em cada item da lista para que você possa tê-las

00:05:26

abra talvez com um mapa ou um calendário

00:05:29

O gerenciamento de RSS está aqui, isso é para talvez se você fosse fazer upload ou alterar seu menu com mais frequência, você pode fazer upload de um RSS

00:05:39

Este estilo de lista e layout com isso fará é determinar o tipo de aparência se você quiser no celular, ele determinará as colunas porque o celular é uma tela pequena, você pode apenas

00:05:51

quer fazer uma coluna, mas se você quiser fazer duas colunas, por exemplo, agora ele criou essas duas próximas uma da outra e então a terceira está lá embaixo sozinha e você

00:06:02

pode determinar se a aparência é diferente no desktop ou no celular, o que é muito legal, e então você pode determinar se a imagem está acima do texto ou como isso está relacionado no desktop e no celular separadamente, o que

00:06:19

é muito legal e então também se a imagem tem o formato de um círculo ou se tem cantos redondos ou quadrados e então é se ela abre em um modal o que é isso

00:06:29

é se ele abre como você vê aqui e então permite que você o feche ou se ele abre em uma nova página, então se você fosse salvar isso, isso abriria

00:06:41

em uma nova página, então, quando clicarem nela, uma nova página será aberta e o usuário terá que clicar no botão Voltar para voltar e isso o levará para a direita

00:06:49

volte para o menu principal e nos mostre um acordeão é bonito isso é apenas um tipo de aparência diferente então nós ligamos isso vai organizá-lo um pouco diferente e mostrar

00:07:05

um tipo de lá e você pode ter esses estilos recolhidos ou não recolhidos, os estilos adicionais permitem que você exija que, se você estiver conectado no celular ou no desktop, e então você pode determinar se está visível ou não

00:07:24

somente no celular ou desktop e para estilos adicionais para o widget é praticamente o mesmo que todos os outros permitem que você determine o espaço na área de trabalho quanto espaço ele ocupa, bem como

00:07:36

um fundo e diferentes estilos de animação, então agora você pode ver que quando realmente visualizamos o site e vamos para tela cheia, podemos clicar em um item de menu e ele abrirá aqui, esses dois são

00:07:55

incluídos automaticamente e você pode desmarcá-los se não quiser e esses dois não estão incluídos e esses dois têm um custo extra, então se você quiser adicioná-los, serão adicionados automaticamente US$ 50

00:08:05

no preço, então quando você adiciona ao carrinho e visualiza seu carrinho, ele vai aparecer com todas as opções que definimos anteriormente o tipo de pedido e essas são as opções que

00:08:14

definido disponível, então se você quiser fazer entrega e esses são os diferentes locais, então digamos que se eles estivessem jantando, você poderia selecionar para qual local deseja ir e isso

00:08:29

são as dicas que você vê, ele calcula automaticamente as porcentagens, então se você quiser adicionar apenas 20%, ele adicionará apenas $ 2 extras a isso e você pode ver que ele adicionou automaticamente os $ 50 a isso

00:08:44

porque isso custou apenas $ 10 e há as gorjetas se você tivesse uma taxa de entrega que apareceria aqui também e quando você finalizasse a compra, isso o levaria às opções de finalização da compra, agora você vê

00:08:56

isso não funciona porque ainda não temos o e-commerce definido, é uma questão muito simples de ativar o e-commerce e vou abordar isso em outro tutorial