WL_Food_Ordering_1280x720.mp4

00:00:00

En este tutorial, repasaremos el widget de pedidos de comida.

00:00:04

Esto se puede utilizar para colocar elementos del menú y comida directamente en el sitio web que permitirá a los clientes comprar y luego puede configurar el envío o la cena y la entrega en muchas otras configuraciones también.

00:00:19

Y vamos a repasar todo eso.

00:00:21

Como puedes ver, tengo una plantilla que ya está preparada aquí con los alimentos.

00:00:27

Esta es una hamburguesería

00:00:28

Solo vamos a usar esto por simplicidad, pero te mostraré cómo crear todo esto.

00:00:33

Puede establecer su título aquí en su introducción y estos elementos de la lista, estos son todos sus elementos que realmente se enumerarán en la aplicación de pedidos de comida.

00:00:44

Simplemente harías clic en agregar un nuevo elemento de lista y crearían uno nuevo.

00:00:49

Y cuando hagas eso, simplemente abramos esta hamburguesa para que puedas verla como ejemplo.

00:00:53

Tienes todos tus diferentes menús aquí

00:00:54

Puedes fijar tu precio

00:00:56

Allí mismo establecerías la cantidad máxima, cuántos podrían agregar al carrito de compras.

00:01:02

Estas son las opciones y aderezos disponibles e incluidos.

00:01:06

Estas mostrarán las opciones que están seleccionadas como activadas y están disponibles de forma predeterminada.

00:01:12

Si bien estas opciones no estarán disponibles, tendrán que elegir si desean agregarlas o no.

00:01:18

Si deseas agregarles un precio extra, simplemente sigue las instrucciones aquí

00:01:21

Crearías este símbolo, seguido de un más y un uno y está justo encima de Enter.

00:01:26

Entonces, si mantienes presionada la tecla Shift y luego la tecla barra justo encima de la tecla Enter, creará ese símbolo y agregarás un signo más.

00:01:33

Puedes hacer, digamos por ejemplo, más 0 50

00:01:35

para el queso y luego dejaremos el más uno para las cebollas y cuando lo guardemos y hagamos clic en él, verá que ahora aquí está la cantidad y el ketchup y la mayonesa se seleccionan automáticamente como en

00:01:51

porque están disponibles y luego estos no están incluidos y puedes ver el precio extra, el dólar extra por las cebollas, los 50 centavos extra por el queso

00:02:00

Puede agregar diferentes opciones, como tamaño, color o sabor, y luego agregaría los diferentes, ya sabe, pequeño, mediano, grande o los diferentes sabores, los diferentes colores disponibles para cada artículo.

00:02:19

Puedes agregar tu texto principal y tu título y toda la información aquí mismo.

00:02:26

El resumen es lo que se mostrará allí, mientras que el texto principal será lo que realmente estará dentro.

00:02:33

Puedes cargar tus imágenes y videos aquí mismo y así es como se alinean con el texto, ya sea que estén arriba o debajo del texto o en el escritorio a la izquierda o a la derecha.

00:02:49

Correcto, y si tienes varias imágenes, puedes configurar un control deslizante y esto determinará la frecuencia con la que se desliza entre las imágenes y también puedes agregar botones, y eso se explica en los botones.

00:03:06

tutorial

00:03:07

Ahora bien, este SEO, Open Graph y URL, esto es para la optimización de motores de búsqueda, que también se analiza en un tutorial aparte, y esto es también para sitios de Facebook y redes sociales.

00:03:20

Una vez que tenga todos sus elementos configurados, todos sus ingredientes y todas sus imágenes cargadas y todo guardado, simplemente regresará al widget principal al que se puede acceder.

00:03:37

ya sea desde el botón inferior aquí abajo o el botón superior aquí mismo

00:03:42

Simplemente puede hacer clic en el widget de pedido de comida y eso lo llevará de regreso al menú principal y luego aquí puede agregar otro elemento o puede configurar los diferentes detalles y opciones.

00:03:55

Aquí abajo es donde configurarías la entrega y la recogida y los diferentes tipos de pedidos para que puedas mantener presionado el control y seleccionar cuáles quieres que estén disponibles y esto determinará si es así.

00:04:09

pregunta el tipo de orden

00:04:11

Puede determinar un costo de envío, esto se agregará automáticamente al precio y al pedido mínimo para la entrega, por lo que no perderá su tiempo entregando al igual que un dólar de valor en alimentos, puede tener un

00:04:22

mínimo

00:04:23

Estas son las diferentes ubicaciones disponibles, esto va a preguntar junto con el tipo de pedido, va a pedir las diferentes ubicaciones.

00:04:33

Simplemente los separarías con la coma, también puedes preguntar por la hora del pedido y luego puedes establecer tus horas y horarios disponibles y preguntar si quieres permitir propinas y

00:04:52

Calculará automáticamente el porcentaje de ese

00:04:56

Esto de aquí, esto es más bien para una organización.

00:04:59

Si tienes varias páginas, esto ayuda porque puedes agregar un formulario de búsqueda que creará una pequeña barra de búsqueda en la parte superior. Puedes ver que se creó automáticamente una barra de búsqueda y

00:05:14

Aquí abajo, si tienes varias páginas, puedes elegir cómo quieres organizarlas aquí mismo, así como también diferentes pestañas que se abrirán dentro de cada elemento de la lista para que puedas tenerlo.

00:05:26

Abre tal vez con algo como un mapa o un calendario.

00:05:29

La gestión de RSS está aquí, esto es para que, si lo subieras o cambiaras tu menú con más frecuencia, puedas subirlo desde un RSS.

00:05:39

Este estilo y diseño de lista determinará cómo se verá si lo desea en un dispositivo móvil, determinará las columnas porque el dispositivo móvil es una pantalla pequeña, es posible que solo

00:05:51

quiero hacer una columna pero si quieres hacer dos columnas por ejemplo ahora ha creado estas dos una al lado de la otra y luego esa tercera está ahí abajo sola y tu

00:06:02

Puede determinar si se ve diferente en la computadora de escritorio o en el móvil, lo cual es realmente genial, y luego puede determinar si la imagen está sobre el texto o cómo se relaciona en la computadora de escritorio y en el móvil por separado.

00:06:19

Es realmente ordenado y, además, si la imagen tiene forma de círculo o si tiene esquinas redondas o cuadradas y luego si se abre en un modal, ¿qué es eso?

00:06:29

es si se abre como ves aquí y luego te permite cerrarlo o si se abre en una nueva página, así que si guardaras eso, esto se abriría.

00:06:41

en una nueva página, por lo que una vez que hagan clic, se abrirá una nueva página y el usuario tendrá que hacer clic en el botón Atrás para volver y luego eso los llevará directamente.

00:06:49

Regresa al menú principal y muéstranos un acordeón, es bonito, es un poco diferente, así que lo activamos, lo organizará un poco diferente y lo mostrará.

00:07:05

un tipo de allí y puedes tenerlos colapsados o desplegados, los estilos adicionales te permiten requerir que estés conectado en un dispositivo móvil o de escritorio y luego puedes determinar si es visible o no

00:07:24

solo en dispositivos móviles o computadoras de escritorio y para estilos adicionales para el widget es prácticamente lo mismo que todos los demás, le permite determinar el espacio en el escritorio, cuánto espacio ocupa y también

00:07:36

un fondo y diferentes estilos de animación, así que ahora puedes ver una vez que realmente vemos el sitio y vamos a pantalla completa, podemos hacer clic en un elemento del menú y se abrirá aquí, estos dos son

00:07:55

Se incluyen automáticamente y puedes desmarcarlos si no los quieres y estos dos no están incluidos y estos dos cuestan extra, así que si quieres agregarlos, se agregarán automáticamente esos $50.

00:08:05

en el precio, entonces cuando agregas al carrito y ves tu carrito, aparecerán todas las opciones que configuramos anteriormente, el tipo de pedido y estas son las opciones que tenemos.

00:08:14

conjunto disponible, por lo que si desea realizar la entrega y estas son las diferentes ubicaciones, así que digamos que si estuvieran cenando en el lugar, usted podría seleccionar a qué ubicación desea ir y esto

00:08:29

Son los consejos que ves, calcula automáticamente los porcentajes, así que si quieres agregar solo el 20 %, solo agregará $2 adicionales y podrás ver que se agregaron automáticamente los $50 allí.

00:08:44

porque esto solo costaba $10 y ahí están las propinas si tuvieras un cargo de envío que también aparecería aquí y cuando realices el pago, esto te llevaría a las opciones de pago ahora ves

00:08:56

Esto no funciona porque aún no tenemos configurado el comercio electrónico. Es una cuestión muy simple de activar el comercio electrónico y lo explicaré en otro tutorial.