Js de nodo: crea tu sitio web de comercio electrónico

1. Introducción: Hola y bienvenidos a una nueva clase. En este, vamos a implementar el back end de nuestro proyecto que es crear un sitio web de comercio electrónico. Como podemos ver aquí, tenemos nuestras páginas de inicio que creamos anteriormente en la clase anterior. Si no has visto eso, te animo mucho a que lo hagas. No obstante, si ya conoces los conceptos básicos de CMLCSS y bootstrap, siempre puedes continuar con este curso para aprender el back end y cómo podemos trabajar con cosas como ir de una página a otra, obtener datos de la base de datos, y así sucesivamente y así sucesivamente Entonces vamos a discutir todos estos temas. Vamos a aprender sobre APR descansados, cómo podemos obtener y publicar en las funciones que tenemos Ahora te voy a dar un recorrido en este proyecto. Por ejemplo, aquí tenemos la página de inicio. Como podemos ver, tenemos las marcas, tenemos los más vendidos y las categorías. Por ejemplo, si voy a las marcas, voy a conseguir todas las marcas que están disponibles para nosotros en este momento, por ejemplo, tenemos a Johnson, presione en Explore, va a ser redirigido a la página del producto donde voy a tener todo el producto de Johnson como Baby Johnson , de Johnson, y así sucesivamente, junto con la categoría de marca de precio y tamaño. Por supuesto, si presiono sobre este artículo específico, voy a ser redirigido al Baby Johnson o a la página del producto donde pueda ver al bebé Johnson Aquí tenemos la imagen, sin embargo, no se muestra en estos momentos porque no está completamente cargada. Por supuesto, vamos a tener el precio tamaño de la marca, la cantidad. Supongamos que tengo cinco piezas. Si agregué a mi tarjeta, voy a ser redirigido a la página de inicio de sesión En este caso, necesito colocar mi ejemplo, por ejemplo, en este caso, creé esto. Por supuesto, si presiono en letrero, ya puedo comprar o agregar este artículo a la tarjeta. Como podemos ver, una vez que lo agregué, vamos a tener este aquí mismo indicando que tengo un artículo en mi tarjeta, y claro, cerrar sesión aquí en lugar de firmar porque ya iniciamos sesión. Ahora, si voy a mi tarjeta, puedo ver el artículo aquí mismo. También puedo quitarlo. Por supuesto, voy a necesitar agregar la dirección y el método de pago. Entonces claro, si tengo un artículo, también puedo hacer el pedido. Déjame volver a la marca, por ejemplo. Vamos a desplazarnos hacia abajo hasta Johnson, y vamos a elegir cualquiera de estos. Por supuesto, voy a elegir la cantidad que sea una. Voy a agregarlo a mi auto, todo se ve bien. Ahora lo tengo aquí mismo en mi orden. Por supuesto, si hago el pedido, voy a ser redirigido a esta página donde voy a ver mis compras Entonces tengo una compra hace tres días, y tengo una compra ahora mismo, y ambas están pendientes. Así que vamos a estar revisando todas las páginas 1 por una y actualizando todas y cada una de ellas hasta tener este proyecto completo. Espero que hayan disfrutado de esta clase, y con eso dicho, saltemos a la primera tarea. 2. Bases de datos 1: Hola y bienvenidos de nuevo. En esta parte, como dijimos, vamos a tratar con el back end de nuestro sitio web. Ya construimos todo el front end. Construimos la página de contacto de la categoría de marca de inicio, y esta es nuestra página de inicio. Como podemos ver, tenemos las fotos, tenemos las marcas, los más vendidos, y luego seguidos de las categorías. Y también tenemos este, que es el orden de lugar, y vamos a colocarlo en el archivo de orden de lugar más adelante. Por último, tenemos el pie de página y se ve así. Ahora, volvamos a nuestro código y comencemos con el back end. Entonces lo primero que vamos a hacer es que vamos a requerir algún módulo nuevo que nos ayude en Mongo a construir la base de datos que necesitamos Lo primero que vamos a requerir es definir o crear y esto lo requerirá Mongo, como decíamos, Mongo encuentra o crea, y estamos Solo necesitamos importarlo o instalarlo usando NPM. Aquí, volvamos y NPM buscar o crear. Tenemos que escribir Mongo justo antes. Entonces Mongo un fondo o crear y vamos a esperar un poco a que se instale, y mientras tanto, podemos volver atrás y continuar con nuestro código Esto es lo primero que vamos a hacer y ahora necesitamos conectarnos y configurar Mongoose Sigamos adelante y hagámoslo aquí mismo entre estos dos. Para conectar Mongoose, simplemente escribimos mangoose para conectarnos y vamos a elegir dónde la vamos a conectar Ya que lo vamos a almacenar localmente en la brújula Mongo dV aquí mismo Y vamos a escribir Mongo DB host local 27017, y luego seguido del nombre de nuestra base de Ya que vamos a crear tal vez este sitio web comercial. A lo mejor es nombrarlo datos comercial y seguido de DB. Luego después de eso, vamos a usar un nuevo transeúnte de URL y lo vamos a establecer como true Esto es principalmente para la conexión, y más adelante veremos cómo podemos visualizar la base de datos. Vamos a necesitar instalar la brújula Mongo DB, y lo voy a hacer en el siguiente video Pero por ahora, vamos a conectarlo y establecer M. Ya que usamos la conexión, vamos a necesitar configurarla también vamos a necesitar usar buscar y modificar Bien. En cuanto a Entonces también vamos a establecer el uso create index como true. Vamos a crear este índice, y vamos a hablar de ello en los próximos videos. Pero por ahora, vamos a configurarlo Mongo finalmente encuentra y modifica como falso No siempre que llamamos find, no necesitamos modificar nuestro trabajo. Esto es principalmente. Es así como podemos conectarnos y establecer mangosta y crear nuestra base Ahora, pensémoslo un segundo. Qué bases de datos necesitamos realmente. En primer lugar, estamos hablando de marcas y categorías, tiene sentido tener tanto bases de datos para marcas como categorías. También tenemos los ítems individuales y vamos a necesitar una base de datos especificada para los ítems individuales. Entonces también tenemos los correos electrónicos que vamos a extraer de aquí. Una vez que el usuario presiona sobre CU, vamos a tomar este correo electrónico y agregarlo a la base de datos. Por supuesto, vamos a necesitar una base de datos especificada para los usuarios. Cada usuario. Cada vez que un usuario se registra, vamos a tomar toda su información y almacenarla en una base de datos específica. También necesitamos la base de datos de best seller. Eso es para los artículos más vendidos. Como podemos ver aquí mismo, tenemos tres ítems por ahora, pero tal vez podríamos tener más después, tiene sentido tener una base de datos especificada para este tipo de cosas. Bien. Entonces esto es principalmente. Empecemos por codificar las bases de datos, crearlas, y luego tal vez agregarles algunos elementos o elementos. Lo primero que vamos a hacer es crear el esquema de marca. Así es como creamos una base de datos. Denle el nombre. Vamos a llamarlo esquema de marca, y vamos a crear use mango, esquema de mangosta, abrimos las llaves, y vamos a necesitar principalmente tres objetos El primero es la marca de la que estamos hablando. Tal vez agreguemos las categorías de esta marca especificada. Por ejemplo, si tenemos una marca específica como Johnson, vamos a necesitar qué categorías vende Johnson. Por ejemplo, tenemos el champú, la loción corporal, y etcétera Entonces tiene sentido tener una cadena de una matriz de cadenas que contenga todas las categorías que esta marca celdas. Tenemos el nombre de la marca y esta será una cadena. También tenemos las categorías de esta marca, y esta será una variedad de cadenas. A lo mejor agreguemos una imagen. Esto también será string para más adelante. Este es el primero, crea el segundo que es el esquema de categorías. Esquema de categoría igual al nuevo esquema de mangosta. Vamos a abrirlo como antes. La categoría será una cadena. Ahora, como puedes notar aquí, si tenemos una categoría específica como el champú, vamos a necesitar tener una lista de todas las marcas que venden champú. Por ejemplo, tenemos a Johnson, tenemos Hijos y así sucesivamente. Esta es la categoría que es el nombre, que será una cadena. También tenemos las marcas aquí mismo, y esto también será una variedad de cuerdas. Entonces tenemos la imagen. Ahora pasemos al esquema de correo electrónico, y este será un simple correo electrónico. Hay una cadena, así que nuevo esquema de Mongoose ábrelo aquí mismo Y luego tenemos el correo electrónico que es una cadena como decíamos. Pasemos al esquema del ítem, y vamos a construirlo aquí mismo. Tenemos el ítem en el esquema de pistas arriba en él, y veamos. Lo primero que vamos a agregar es el título o el nombre de este ítem, y será una cadena. También tenemos la descripción que vamos a agregar la cual también será una cadena, y tenemos la URL de la imagen. Cuerda. Básicamente, todos estos son aguijón. La marca también será una cadena, la categoría, y vamos a agregar un precio cantidad y tamaño. El tamaño será una cadena y el precio y la cantidad serán ambos números. Aquí tenemos el precio, y este será número finalmente tenemos la cantidad que también será un número. Esto es básicamente para el esquema del ítem. Pasemos al esquema de usuario, así que todavía tenemos dos esquemas para crear el usuario y el best seller Avanzando, esquema de usuario constante igual al esquema como de costumbre. Vamos a arriba en él. Tenemos el correo electrónico del usuario, la contraseña Y tal vez agreguemos el ID de Google si el usuario inicia sesión usando su cuenta de Google. Tenemos el número. Entonces este es el número de teléfono. Tenemos el nombre y también tenemos los pedidos y la dirección. Dentro de las órdenes, eso tal vez sea una matriz. Dentro de este orden, vamos a agregar algunas cosas. A ver. Tenemos el pedido, tenemos la fecha de pago Y tal vez agreguemos algo que se llame recibido para especificar si el usuario ha recibido este pedido o no, y vamos a agregar los artículos que esta persona ordenó. Vamos a necesitar la imagen, la cantidad del precio del título y el tamaño de estos artículos. También tenemos el total y la fecha que el usuario ordenó. Vamos primero, el recibido Esto será principalmente pero antes solo vamos a agregarlo como un objeto. Este es el primer objeto. Y dentro del cual vamos a agregar lo recibido, será de ban y el default será falso. Ahora, también tenemos el checkout, que también es de tipo y el predeterminado será falso. Entonces eso es todo para la caja. Pasemos a los artículos. Como dijimos, los artículos serán una variedad de artículos. Por lo que el usuario podría ordenar más de un artículo dentro del pedido único. Entonces dentro de los artículos, vamos a tener vamos a agregar la imagen, y este será un el título, que también será un precio de cadena, que es un número. La cantidad que el usuario haya pedido, y también será un número, y finalmente, el tamaño, que debe ser string. Esto es básicamente para los artículos. Y como podemos ver, solo necesitamos sumar el total, que será string, y la fecha que el usuario haya ordenado, que también será una cadena. Esto es principalmente para los pedidos. Ahora pasemos a la dirección. Entonces ya terminamos aquí. Agreguemos el coma y creemos la dirección, que básicamente contendrá sólo tres componentes, la dirección como cadena, la ciudad en la que vive el usuario y el número de teléfono. La dirección será algo así, fuerza de la ciudad de cadena, y finalmente, el número de teléfono, que será un número. Esto es principalmente. Esto es lo que vamos a hacer. Este es nuestro esquema de usuario. Sólo tenemos que añadir el esquema de best seller. Para ello, vamos a agregar un best seller constante igual al esquema b como de costumbre. Vamos a abrirla. Del artículo será tal vez agreguemos la referencia de este ítem, entonces será un ítem, y luego vamos a tener que agregar el nombre de este ítem, que es una cadena, y la imagen calzada también será una cadena Y eso es todo principalmente. Simplemente agregaré el tipo que vamos a extraer del esquema los tipos y el ID de objeto. Lo voy a explicar más tarde, pero por ahora, vamos a apegarnos a este esquema. Estos son principalmente nuestros esquemas. Justo ahora necesitamos crear el modelo y luego visualizarlos dentro de nuestra brújula Mongo y para ello, vamos a ir a descargar la brújula Mongo B desde aquí En cuanto se descargue, solo lo abres y te veré en el siguiente video. Bien. 3. Bases de datos 2: Ahora que terminamos con el esquema, podemos crear el modelo. Sigamos adelante y comencemos crear tal vez el modelo de marca o el modelo de artículo. Así que comencemos y es bastante sencillo. Solo necesitamos un ítem constante de tiempo. Este es el nombre del elemento, modelo Mongo, y vamos a modelar el elemento como el esquema de elemento que acabamos de crear antes Y vamos a hacer lo mismo por todos los demás. Tenemos el correo electrónico. Por lo que el correo electrónico se modelará como el esquema de correo electrónico. Por supuesto, no voy a escribirlas todas. Sólo voy a copiarlo unas cuantas veces más y añadir el resto. Entonces aquí tenemos al best seller. Y luego se modela como best seller aquí mismo y como el esquema de best seller Entonces también nos quedan los tres para trazar la marca, y se modelará como una marca como de costumbre y esquema de marca aquí Tenemos el esquema de usuario. Se modela como usuario y la constante sería nombrada usuario. Por último, tenemos la categoría categoría, y se modelará como la categoría Esto es básicamente. Vamos a comprobar tal vez si me perdí algo. Tenemos los más vendidos, así que tenemos seis, uno, dos, tres, cuatro, cinco y seis. Vamos por ahora, creamos las bases de datos para nuestros artículos, categorías, marcas y así sucesivamente. Ahora, ya que hemos terminado con esto, pasemos a tal vez agregar algunos de estos artículos, algunas de estas marcas o categorías a las bases de datos. Para ello, es bastante sencillo. Podemos ir justo aquí y comenzar con la creación de tal vez marcas. Yo lo nombro B uno, debería ser igual a comencemos con el best seller, por ejemplo, best seller, ábrelo, ya que dijimos aquí que el best seller contendrá el nombre y la imagen principalmente. Entonces, apegémonos a ello. Entonces tenemos tal vez Johnson y la imagen será vamos a agregar la P. Por ahora, voy a agregar aquí una carpeta de archivos llamada images dentro de esta carpeta, vamos a agregar algunas imágenes. Pero por ahora vamos a llamarlo Johnson PG y estamos bien. Esta es la primera. Vamos a crear otro, dos iguales a best seller Como de costumbre, vamos a necesitar el nombre, tal vez llamar ocho, y la imagen será como de costumbre, el camino de la imagen. Y como podemos ver, es una cuerda. Como decíamos, tenemos tres best sellers. El último será de nombre tal vez el der. Vamos a abrirla. Nombre oder Finalmente, la imagen contendrá la ruta exacta de esta imagen, y estará en la carpeta de imágenes, oder GPG. Eso es todo principalmente para los más vendidos. Pasemos a las siguientes bases de datos. Agreguemos categorías para marcas y luego agreguemos todas ellas a las bases de datos reales. Lo que estamos haciendo aquí es simplemente crear algunas constantes. Esto es constante B uno, indicando el best seller, el primer best seller, y tenemos el nombre de esta y la siguiente imagen. Y también tenemos el best seller número dos y tres. Pero realmente no los agregamos a la base de datos, y lo vamos a hacer más tarde una vez que terminemos las marcas y categorías. Para crear las marcas, llamémosle la marca una, y tal vez sea Johnson, ya que hemos hablado primero de Johnson. Aquí vamos. Johnson. Como dijimos, necesitamos fuera de las categorías que tiene Johnson. Vamos a subir y subir tal vez Shampoo tal vez Pica, y tal vez el como hemos hecho antes la imagen será la imagen exacta que hemos usado antes. Eso está listo para la marca uno, copiémoslo y peguémoslo aquí abajo. Y vamos a crear dos marcas más. Entonces esta es la marca dos, y esta es finalmente la marca tres. Entonces cámbialos un poco. Aquí tenemos tal vez ocho. Digamos que tal vez solo la categoría será solo dientes. Por lo que la imagen será dientes DGG. Los vamos a agregar más tarde. Por último, pasemos al último. Esto será basal, mejor las categorías serán quizá solo bodica Iremos con esto La imagen será BodyPG terminamos tanto los más vendidos como las marcas por ahora Vamos a agregar algunas categorías. Categoría uno será nueva categoría. Ábrelo y empieza aquí mismo. El nombre de la categoría será tal vez Johnson, Johnson tenemos. Johnson y tal vez hagámoslo, por ejemplo. Y finalmente, tenemos la imagen, que estaría en la carpeta imagenes. Y como dijimos, ya que estamos usando champú, tiene sentido agregar una imagen de Johnson de un champú como imagen principal. Vamos. Esta es la primera categoría. Agreguemos dos más Bien. Y eso es todo. El segundo será un cuidado corporal ya que ya hemos hablado de ello antes. Dentro del cuidado corporal, tal vez solo tenemos a Vasilin y nos iremos Por último, para cambiar esto. A lo mejor sólo escríbalo. A lo mejor vamos a mantenerlo como está por ahora, lo cambiaremos más tarde. Eso es todo para las categorías. Solo agreguemos una cosa más aquí. En lugar de champú, hagámoslo te Dentro T solo tenemos tal vez coate como marca Eso es principalmente. Así es como podemos crear las constantes que vamos a usar o vamos a agregar a la base Por supuesto, este no es el único método. En realidad hay un método más sencillo que simplemente puedes agregarlos todos a la vez o tal vez agregarlos usando la brújula y lo vamos a discutir más adelante en el siguiente video. Pero por ahora, los vamos a agregar manualmente solo para tener una idea de cómo podemos crearlos o cómo podemos agregarlos a la base de datos usando código. Entonces, eso es todo. Básicamente, vamos a seguir adelante y agregarlos ahora mismo. Entonces hablamos del esquema de categoría, y creamos el modelo que se llama categoría. Y para insertar en esta categoría, solo tecleamos categoría punto insertar muchos si vamos a insertar muchas categorías a la vez. Entonces abrimos la matriz uno, dos y la categoría tres. Entonces esto es principalmente. Solo necesitamos verificar posibles errores que sea bastante sencillo si ocurre un error simplemente impreso en la consola, lo contrario, solo imprime todas las categorías que acabamos de agregar. Entonces tenemos categoría uno categoría dos y categoría tres. Esto es para las categorías. Vamos a copiarlo y pegarlo para las marcas y tal vez los más vendidos después. Por ahora, trabajemos con marcas. Marca que inserta muchos, tenemos la marca uno, marca dos y la marca tres. Aquí vamos la marca dos. También vamos a verificar posibles errores, y si no, simplemente vamos a imprimir las tres marcas que acabamos de agregar. Marca dos y marca tres. Eso es todo principalmente todavía tenemos los más vendidos, pero creo que tenemos la idea de cómo crear estos y cómo insertarlos. Bien. Entonces eso es todo para este video en el siguiente video, vamos a discutir cómo podemos trabajar con la brújula MongoDB, cómo podemos visualizar los datos que acabamos de agregar y cómo también podemos editar o modificar o incluso agregar nuevos elementos o nuevas bases de datos desde la aplicación Entonces esto es para este video con eso dicho, nos vemos en el siguiente. 4. Crea la ruta: Hola y bienvenidos de nuevo. En este video, vamos a aprender cómo podemos enlazar entre las páginas web. Por ejemplo, aquí estamos en la página de inicio. A lo mejor queremos ir a la categoría de marca acerca de la página de conducta. Por ahora, no funcionan. Vamos a crear los formularios para estas páginas. Por supuesto, si queremos ver este producto específico, si presiono sobre los detalles de C, quiero ir a los detalles de C o a los detalles de este artículo específico. Eso también lo vamos a hacer. Pero por ahora, comencemos con la página web, la página de inicio, esta. Entonces vayamos a nuestro código de estudio visual. Y aquí dijimos que siempre que tengamos éste, el slash lo vamos a rendir a casa Pero tengámoslo en mente. Volvamos aquí y veamos. Dentro de nuestra casa, necesitamos algunas cosas de la base de datos Monge DB o de la base de datos que tenemos La primera son las categorías que tenemos por ejemplo aquí. Cuando mostramos las categorías, necesitamos tenerlas aquí, y luego podemos enumerarlas así en un auto. Pero por ahora, los necesitamos, así que tenemos que conseguirlos cada vez que rendamos a casa. También necesitamos a los más vendidos. Recuerda que aquí creamos un best seller. Creamos el esquema de best seller, y le agregamos algunas cosas. Estas son las dos cosas principales, y por supuesto, también necesitamos las marcas. Como dijimos, es lo mismo que las categorías, también lo necesitamos. Empecemos con eso. Volvamos a G slash en este caso, lo que voy a hacer es buscar entre todas las marcas que tenemos en el esquema de marcas o en la base de datos de marcas, y vamos a buscar de todo, así que dejamos esta vacía Y vamos a conseguir la función. Entonces tenemos el error y la marca desencontrada. En caso de error, no hagas nada. Si no hay error, busquemos los más vendidos, y luego las categorías. Best seller. No encuentra vamos a encontrar todos los artículos más vendidos que tenemos. Como es habitual, tenemos la función que contiene el error y la mejor encontrada. Entonces abramos. Si no tenemos ningún error en este caso, simplemente vamos a buscar el último, que son las categorías. Búsqueda de categoría y función con y categorías reencontradas. Ahora podemos renderizar a casa RESG render to home con los siguientes elementos o los siguientes componentes Tenemos las categorías nombre categorías dobles Y esto contendrá categorías def que encontramos anteriormente Tenemos la solicitud también. No lo olvidemos. Pasemos a las marcas, y esto contendrá la marca encontrada y la mejor que contendrá la mejor encontrada. Eso es principalmente. Nos prestamos a la página principal con las siguientes marcas mejores y toda la solicitud que recibimos de aquí. Esta es la primera. Pasemos a la segunda. Por supuesto, antes, permítanme hablar de lo que podemos hacer con esto aquí. Así que cada vez que vayamos a la página principal, vamos a tener las marcas, los más vendidos y las categorías con nosotros. Y si vamos aquí mismo a la casa, podemos cambiar esto. Lo que estamos haciendo aquí es que solo estamos mostrando una imagen, que es la imagen dos y el encabezado, que es mi subtítulo titulado primera imagen y todo el subtítulo. Entonces estos son estáticos. Podemos cambiarlos y hacerlos cambiar, por ejemplo, aquí, estamos mostrando las marcas. Podemos obtener todas las marcas que obtuvimos de esta lista, y podemos acceder a ellas aquí usando el Javascript incorporado dentro del SML aquí, y podemos mostrarlas aquí mismo en la página de inicio Y también podemos hacer esto para los más vendidos y las marcas y categorías, lo siento. Entonces esto es todo. Esto es lo que pretendemos hacer, pero por ahora, mantengámoslo simple. Volvamos a la aplicación a JS, y luego terminemos con todos los requisitos, y luego también podemos vincularlos aquí y podemos cambiar los títulos de los subtítulos y así sucesivamente Vamos a continuar. Volvamos aquí y veamos. Como podemos ver aquí, tenemos la estancia conectada. Este, mantente conectado donde el usuario ingresa su dirección de correo electrónico para recibir ofertas exclusivas. En este caso, vamos a tomar esto y agregarlo a nuestra base de datos. ¿Cómo podemos hacer eso? Volvamos y comencemos. Esta es una publicación. Entonces vamos a conseguir un puesto. Puesto de anuncio. Siempre que obtengamos algo de la página de permanecer conectado, que es un post, vamos a entrar tal vez en esta función, tan burda como de costumbre, y vamos a crear el correo electrónico Voy a nombrarlo simplemente un correo electrónico y esto contendrá un nuevo esquema o un nuevo componente que vamos a agregar al esquema. El correo electrónico con este será el correo electrónico del cuerpo de solicitud. Ahora, si vuelvo aquí mismo, perdón al pie de página, Y como podemos ver si nos desplazamos todo el camino hacia abajo, tenemos la entrada el correo electrónico con el nombre correo electrónico. Podemos acceder a este usando el nombre simplemente escribiendo solicitud. Esta es la solicitud que vamos a obtener que contiene todos los componentes dentro de este foo este formulario aquí mismo, y solicitar el cuerpo de correo electrónico Vamos a conseguir este correo electrónico y agregarlo aquí mismo. Entonces simplemente lo vamos a crear, correo electrónico crea este correo electrónico con la función, así que hay otro y tal vez solo impreso y vamos a imprimir que se agrega el correo electrónico. Eso es. Lo siento, me olvidé de las citas. Estamos bien. Por supuesto, después de terminar de esto, redirijamos a la página principal, tal vez. Creo que estamos bien. Redirigir a este justo aquí donde vamos a renderizar a casa. Eso es todo para la estancia conectada. Pasemos al segundo. Todo bien. Ahora, intentemos movernos entre estas páginas web. Entonces como dijimos, tenemos la categoría de marca casera acerca y contacto. Entonces lo que estoy dispuesto a hacer es que cada vez que presione sobre uno de ellos, me lleve automáticamente a la página web asociada. En este caso, todos estos botones no hacen nada por ahora, vamos a arreglarlo. Vamos a ir a cabecera. Este es nuestro encabezado y en que tenemos todos los botones aquí mismo. Pero claro, sin el vínculo de referencia a ellos. Arreglemos esto. Lo primero que vamos a hacer es eliminar este hashtag y colocarlo. Aquí tenemos la casa, nos vamos a ir a casa. En este caso, tenemos marca. Voy a ir a marcas y aquí tenemos la categoría. También tenemos el acerca y tal vez los comentarios. Vamos a llamarlo retroalimentación. Eso es principalmente, volvamos a la Apo S. Así que digamos, aquí tenemos el apt get para la página principal. Vamos a ir por eso. Pasemos a los demás. Entonces tenemos una G. Si obtenemos de la página Acerca de, vamos a recibir esta función y renderizar al JS junto con la solicitud que obtuvimos. Entonces déjame revisar esta . Así que vamos a refrescarnos. Y mientras tanto, hagamos el segundo. Pero creo que aquí podría haber un error. Estamos bien. Entonces, si volvemos a la página de contacto que le nombramos retroalimentación así que retroalimentación. Funciona como de costumbre, abre render y vamos a ir a feedback JS. O tal vez lo nombramos contacto, creo. Entonces sí, está justo aquí. Es contacto JS. Entonces vamos por ahora, volvamos a la app. Y eso es todo principalmente para las páginas. Simplemente volvamos a unirnos a la solicitud también. Volvamos. Y veamos el error aquí. Entonces ahora después de JS ejecutarlo y todo queda bien. Así que anfitrión local. Bien. Sí, estamos bien. Todavía tenemos las páginas de categoría y marcas. Entonces hagámoslos aquí mismo y los vamos a revisar todos juntos a la vez. Para obtener la categoría, simplemente vamos a agregar categoría aquí mismo y funcionar. Como es habitual, vamos a buscar a través de todas las categorías, encontrarlas todas, y luego funcionar con las categorías de error y defund Ábrete. Si no hay error, simplemente vamos a renderizar para rentar el render. Entonces aquí, re render a la categoría, JS, y junto a las categorías que tenemos, y por supuesto, la petición que obtuvimos. Esto es si hay un error, vamos a imprimirnos simplemente en la consola así, y obtuvimos la categoría. Pasemos a las marcas ahora mismo. En este caso, vamos a obtener las marcas como las categorías que tenemos la búsqueda abierta a través las marcas que tenemos encontrar todas ellas y llamar a esta función como de costumbre. Entonces aquí tenemos las marcas encontradas. Y si hay otra consola punto logarla, de lo contrario, simplemente voy a renderizar a la página apropiada, marcas DGS junto a las marcas que tenemos Esa es la marcas encontradas y las peticiones que también obtuvimos como de costumbre Entonces eso es todo, creamos el que tenemos ya tenemos la página de inicio. Creamos sobre la categoría de comentarios y marcas. Entonces eso es todo para este video y el siguiente video, vamos a checar todos estos. Y claro, vamos a seguir construyendo las páginas web enlazando entre ellas, y eso es todo. Nos vemos en el siguiente video. Bien. 5. Contacto y sobre la información: Hola, y bienvenidos de nuevo. En este video, vamos a configurar Mongo DB. Como decíamos, creamos todas estas quizá constantes, best sellers, marcas, calligories y los esquemas para todos y cada uno Por supuesto, vinculamos el Mongo con el Mongo DB, el anfitrión local 27017, y necesitamos que la base de datos sea DV comercial Sin embargo, realmente no tenemos un espacio o el software para usar para visualizar tal vez estos elementos, los datos dentro de nuestra base de datos. Para ello, vamos a ir directamente a Google, vamos a ir al Mongo DV y descargarnos Tenemos los servidores de la comunidad de software una base de datos de documentos libre y abierta, vamos a ir hasta el fondo y hacer clic en descargar. Entonces se descargará un archivo EXE y luego haces clic en él, pasas por el Asistente. Es muy sencillo procedimiento directo. Y una vez que hayas terminado, esto aparecerá en tu página. Como dijimos, vamos a ejecutar de nuevo este código. No obstante, ahora tenemos la base de datos, tenemos el host local al que vamos a correr. Y luego una vez que lo ejecutemos, vamos a conseguir esta base DV comercial dentro de nuestro local. Como podemos ver, creamos las marcas y categorías, y si las presionamos, podemos ver cuáles son las marcas o cuáles son las categorías. Esto es básicamente para el DV comercial. Ahora podemos volver a nuestra página web comercial. Que podamos ver trans creo que aquí tenemos un error. Vamos a comprobarlo. Como podemos ver en la parte de categorías, es bueno. El, funciona perfectamente bien. En el contacto, tenemos alguna modificación que necesitamos hacer tal vez en el CSS. Lo comprobaremos más tarde. Pero por ahora, echemos un vistazo a las marcas DGS, volvamos aquí Como podemos ver es la marca DGS. No son marcas. Vamos a desplazarnos hacia abajo y arreglarlo. Creo que ahora estamos bien si vamos a refrescar, podemos conseguir las marcas justo aquí como llegamos aquí, funciona perfectamente bien. Volvamos a casa y estamos bien por ahora. Veamos con qué debemos empezar primero. Como podemos ver dentro de las marcas y categorías, será un poco complicado mostrar las marcas y categorías reales, necesitamos tener un bucle for para mirar a través de todas las marcas y todas las categorías y mostrarlas en la pantalla. A lo mejor empezaremos con algo sencillo. Ese es el contacto. Tenemos el nombre, correo electrónico, número de teléfono y el mensaje. Por supuesto, el botón de enviar mensaje, y esto no va a hacer nada por ahora, pero vamos a hacer que funcione en un poco. Entonces, si quieres comenzar con este, tenemos el nombre de correo electrónico teléfono. Esto no se ve bien, vamos a arreglarlo. En lugar de éste, vamos a escribir botón con la clase BTN y luz, y tal vez enviar mensaje, si volvemos, se verá mejor. Wever, agreguemos tal vez MIS dos al clic refrescar. Como podemos ver, tenemos nuestro mensaje de envío aquí mismo y hagamos lo mismo con todos estos. En este caso, voy a añadir aquí Y uno. Y uno e Y uno. Y creo que iremos por ahora si volvemos, podemos ver que tenemos algunos espacios entre estos. Entonces, esto es todo. Básicamente, tenemos el nombre, el número de teléfono del correo electrónico y el área fiscal, y el patrón de envío de mensajes. Entonces vamos a ver. Como dijimos, tenemos la información de la persona y es mensaje apropiado. Y necesitamos diferenciar entre si el usuario está autenticado. Bien. En este caso, tenemos toda esta información dentro de la base de datos de usuarios. En este caso, solo necesitamos iniciar el mensaje, el nuevo mensaje que el usuario está enviando. Si el usuario es tal vez no está autenticado, no ha iniciado sesión, obtendremos su nombre, número de correo electrónico y mensaje En este caso, necesitamos iniciarlos en un nuevo usuario y luego guardarlo dentro de nuestra base de datos. Bien. Entonces, ¿cómo hacemos eso? Comencemos con la creación de la publicación de la aplicación. Y en este caso, tenemos la función contact, y vamos a comprobar si la solicitud está autenticada y esta es la forma de hacerlo Por cierto, en cuanto al inicio de sesión y registro, los vamos a hacer al final. Vamos a tal vez solo hablar de ellos ahora mismo mientras trabajamos con esto, por ejemplo, aquí en el contacto, vamos a usar la solicitud como autenticada En este caso, solo estamos comprobando si este usuario está iniciado sesión, y si es así, vamos a simplemente actualizar este usuario seleccionando su ID y este es. Entonces lo que estamos haciendo aquí es que estamos revisando la base de datos de usuarios, solo estamos comprobando por un usuario en el que el ID de este usuario sea igual al ID que vamos a obtener de la página de contacto. Como podemos ver aquí, si volvemos y vamos a conseguir el ID de usuario. Entonces como dijimos, aquí tenemos al usuario, y el método ID solo nos dará la D del usuario específico. Y si encontramos una coincidencia, entonces vamos a empezar por tomar este mensaje y agregarlo al cuadro de mensaje dentro de nuestro usuario. Como decíamos, tenemos esta base de datos, ese es el esquema del usuario. Tenemos la contraseña de correo electrónico número de identificación de Google, nombre dirección de pedidos, déjame consultar aquí. Todavía tenemos justo el mensaje. Vamos a agregar vamos a agregarlo ahora mismo en realidad. Aquí dentro, tal vez agregue un mensaje que sea una cadena, y estamos bien. Podemos trabajar con ello ahora mismo. Entonces eso es básicamente. Solo estamos comprobando si el usuario ha iniciado sesión. En este caso, vamos a recibir este mensaje y agregarlo al cuadro de mensaje dentro de nuestro usuario. Y claro, si pasa algo como un error, simplemente vamos a imprimir estos errores registrar este error. De lo contrario, vamos a conspirar log. Mensaje recibido. Eso es, básicamente, si el usuario está asignado en. Ahora bien, si este no es el caso, vamos a necesitar crear un nuevo usuario y agregarlo a la base de datos de usuarios. Un nuevo usuario igual a un nuevo usuario entre paréntesis igualmente latón vamos a agregar el nombre por nombre de texto de solicitud Bien. Vamos a necesitar agregar el correo electrónico, solicitar el texto del cuerpo del correo electrónico. Y si se preguntan de dónde los voy a sacar, si volvemos al contacto, tenemos aquí el nombre texto nombre. Estas son las entradas que vamos a obtener del usuario, y vamos a acceder a ellas como de costumbre, utilizando el método de buddy solicitado. En este caso, nos llegó el nombre correo electrónico, tal vez los números o solicitados por el teléfono Finalmente, el mensaje. Este es el mensaje real que nos interesa, y se accederá a éste solicitado por el mensaje de texto. Eso es. Todavía tenemos que salvarla. Nuevo usuario que guarda, y por supuesto, vamos a redirigir al usuario a esta ruta. Esta es la página de inicio, y me olvidé agregarla aquí mismo, así que simplemente voy a redirigir redirigir a la página principal. Eso es principalmente. Si vuelvo y me refresco. Vamos a escribir algunas cosas. Si envío un mensaje aquí, necesito agregar un correo electrónico, así que correo electrónico al correo electrónico T estamos bien. Todo bien. Esto no funcionará porque solo estamos preguntando si el usuario está autenticado y todavía no comenzamos con el proceso de autenticación Así que lo dejaremos por ahora y claro, vamos a volver a ello más tarde. Eso es todo para el formulario de contacto. Pasemos tal vez a otra cosa. Volvamos a esta y verifiquemos, tenemos categorías de marcas a domicilio. A medida que establecemos categorías y marcas, las haremos más adelante. Para la página a, realmente no necesitamos nada. A lo mejor vamos a agregar estos. Tenemos inicio marcas categorías contacto y ejemplos. Este es el correo electrónico. Quizá les agreguemos las referencias. Para el correo electrónico, ya tenemos ya lo vinculamos. Justo ahora tal vez haga esto. Volvamos ahora al pie de página. En este caso. Como hicimos antes en este eje, vamos a hacer exactamente lo mismo que hicimos aquí mismo. Entonces por ejemplo, en el hogar simplemente vamos a renderizar a este slash delantero y las marcas que vamos a renderizar a las marcas Déjame comprobarlo. Sí, eso es correcto. Marcas. Las categorías serán categoría. Creo que estamos bien. Todavía tenemos el contacto que es la revisión de comentarios. Sí, es la retroalimentación. Ahora, si vuelvo, choca los espacios en casa. Vamos a volver a las marcas de casa. Lo mismo. Vamos a ir a marcas, categorías, y eso es por fin comprobar el contacto con nosotros y estamos bien con estos. Entonces como podemos ver aquí, acabo de notar que nos encantaría escuchar tus comentarios deberían estar en medio de esto. Así que volvamos a la página de contacto. Como decíamos, tenemos éste y tal vez voy a añadir aquí un síntoma de texto Regresemos a ver cómo se ve ahora, y tal vez agreguemos algunas líneas. Todavía tenemos que agregar tal vez aquí dentro de esta nueva fila. Sí, creo que esto podría ser bueno. Volvamos a refrescar. Lo siento. Vamos a agregarlo también aquí mismo. Refrescar. Como podemos ver, lo conseguimos, pero simplemente no nos dimos cuenta de este. Vamos ahora. Bien. Como podemos ver, creo que estamos bien por ahora. Nos encantaría escuchar tus comentarios y él debería ingresar él o ella debe ingresar la siguiente información, y eso es todo. Creo que estamos bien por ahora para el pie de página, el encabezado, el ao y las páginas de conducta. En el siguiente video, vamos a comenzar con la página de la marca. Vamos a mostrar las marcas que tenemos aquí mismo, así como las categorías. Por supuesto, después de eso, necesitamos ingresar a cada marca. Por ejemplo, aquí, si tenemos a Johnson, vamos a explorarlo. Ahora bien, si presionamos en explorar, no va a pasar nada. Pero para más adelante, vamos a presionar en explorar y mostrar toda la marca tal vez, digamos, cualquier marca, por ejemplo, Johnson, en este caso, vamos a mostrar todos los artículos que Johnson tiene, claro, cada artículo será también podemos filtrar por las categorías. Por ejemplo, Para Johnson, tal vez tenemos el cuerpo, el champú y el gel de ducha. En este caso, vamos a mostrar todos estos elementos y el usuario también puede filtrar por categoría. Y vamos a hacer exactamente lo mismo para las categorías. Vamos a exhibir, por ejemplo, aquí, champú. Y si el usuario presiona sobre este botón explorador, sería redirigido a la página de champú donde puede filtrar por las marcas Por ejemplo, está Johnson, tal vez esté Sosk y así sucesivamente y así sucesivamente Eso es todo principalmente para este video si no entendiste exactamente el punto , no te preocupes por ello, vamos a discutirlo quizá en detalle en el siguiente par de videos. Nos vemos entonces. Bien. 6. Marcas y categorías: Todo bien. Hola, y bienvenidos de nuevo. En este video, vamos a mostrar las marcas y categorías que tenemos dentro de las páginas web de marcas y categorías. Si vamos a nuestra página web, esta es la de inicio, y si presionamos sobre la marca, realidad vamos a ir a la página de marcas. No obstante, estos son los mismos. Entonces tenemos nombre de marca y tal vez el mismo cuadro, cambiamos el panorama aquí, pero estos no son de la base de datos. Entonces tenemos nuestras marcas dentro de nuestra base de datos, y queremos echarles un vistazo o queremos mostrarlas aquí mismo. Si vamos a nuestra brújula Mongo DB, y esta es nuestra base de datos, DV comercial, presionemos sobre ella De hecho, guardamos marcas y categorías. Si presionas sobre marcas, podemos encontrar que cada marca tiene el nombre de la marca, la imagen y la D de esta marca. Volvamos a nuestras marcas, DGS. Como podemos ver, estamos exhibiendo múltiples marcas. Vamos a eliminar todos estos y crear una sola marca donde vamos a mirar a través de todas las marcas y mostrarlas todas a la vez. ¿Cómo lo hacemos? De hecho, eliminemos todos estos y comencemos con tal vez recreando o con tal vez recreando o mantengamos este y eliminemos todo el resto Entonces como podemos ver si borramos esto, veamos. Este es el último, y creo que estamos bien si eliminamos todos estos. Comprobemos que esto es para cero, columna seis y cero, así que estamos bien. Bien. Entonces eso es, básicamente, esto es lo único que necesitamos. Sin embargo, tenemos que mirar a través de todas las marcas que obtenemos. Entonces, si recuerdas correctamente, volvamos al Apt llegar a donde vamos a conseguir las marcas. Miramos a través de las marcas y encontramos todas las marcas y tal vez las enviamos usando las marcas. Entonces, si queremos acceder a todas las marcas que tenemos, simplemente podemos usar esta marca aquí mismo. Ahora, volvamos a la página de la marca. Como podemos ver aquí, en lugar del nombre de la marca, necesitamos mostrar la marca real. Para ello, simplemente voy a crear aquí. Este es nuestro corte, y aquí es donde vamos a trabajar. Vamos a hacer un espacio aquí mismo, algunas líneas. Comencemos con la creación un bucle cuatro para recorrer todas las marcas. Esta es nuestra todas las marcas pero para cada una, vamos a crear una nueva función que tome una marca y abramos los paréntesis aquí mismo Eso es básicamente ahora vamos a cerrar aquí. Y aquí. Así es como podemos implementar Java Script dentro del archivo EJS Y simplemente voy a cortar esto y pegarlo aquí mismo. Ahora tenemos nuestro bucle telefónico. Vamos a tomar todos los nombres de las marcas. Entonces llamaré a la marca marca, y creo que estamos bien. Esta marca representa esta. Este es el nombre de la marca. Por supuesto, entonces esta marca representará el nombre de la marca real. Yo la nombro aquí marca. Puedes nombrarlo como quieras siempre y cuando sea lo mismo dentro de la base de datos y la forma en que accedes a ella aquí mismo. Ahora, siempre que quieras tomar un nombre o algo de valor, necesitas colocarlo igual antes tal vez de llamar a la función o llamar al valor. Y siempre que quieras implementar una función o tal vez hacer un bucle for, no necesitas hacer nada para eso. Y creo que hay una lista de tal vez sugerencias o estas cosas que hay que usar cuando queremos implementar el script Java en EGS y lo veremos más adelante Pero por ahora, solo necesitamos estas dos cosas. Eso es. Acabamos de mostrar la marca. Ahora para la imagen, vamos a hacer exactamente lo mismo. Ahora aquí, es muy crítico seguir exactamente el mismo procedimiento. Entonces abrimos el porcentaje igual y luego las imágenes e imagen más la marca IMG como dijimos antes, y ahora estamos bien. Eso es principalmente. Así es como podemos exhibir nuestras marcas. Vamos a comprobar si todo funciona. Vamos a Tal vez. Eso es. Estas son todas las marcas que tenemos. Por supuesto, tenemos algunos problemas con las imágenes. Vamos a comprobarlo. Si volvemos a aquí, en realidad no tenemos la carpeta de imágenes o tenemos Sí, así que no la tenemos. Lo crearé ahora mismo y me pondré en contacto contigo en un minuto. Todo bien. Ir a través de los archivos, encontramos el archivo de imágenes aquí mismo. En realidad, el problema era que nombramos a las imágenes aquí Johnson PG y JPG, y claro, mal en realidad no las nombramos como aquí. Así que arreglemos esto en realidad. Nombremos por ejemplo, éste como Johnson. A lo mejor el segundo como bodic y el final como D. Así que aquí, no es capital, así que vamos arreglar esto y vamos por ahora Hagamos esto a lo mejor. En realidad, permítanme crear una nueva imagen. Copiemos esto y basémoslo aquí mismo. En esta, le vamos a nombrar dientes. Son lo mismo, pero los acabamos de cambiar por el bien de este ejemplo. Ahora bien, si volvemos y veamos el problema que enfrentamos es que cada vez que guardamos esto, la aplicación en realidad está agregando todos estos simplemente manteniendo esto sin comentar Tenemos insertar muchos, estamos insertando tres categorías y tres marcas, cada vez que guardamos esta. Ya que no solo toma esto cada vez que guardes, volverá a correr de nuevo. Entonces, una forma de arreglar esto es dejar caer toda la base de datos y luego ejecutar el código nuevamente, para soltarlo simplemente escriba el nombre de esta base de datos. Ahora bien, si vuelves aquí y volvamos a ejecutar nodo Man. NodeJS y si volvemos y presionamos actualizar aquí, vamos a obtener nuestra base de datos que contiene marcas y categorías Sin embargo, esta vez, solo tenemos una, dos, tres, cuatro y cinco marcas, y estas siguientes categorías. Eso es principalmente, pero antes de ejecutarlo. Nuevamente, tenemos que asegurarnos de que estos estén peinados. Bien. Entonces eso es básicamente ahora si volvemos a nuestra página web comercial. Como podemos ver, tenemos Johnson Colgate y Vaseline como queremos Esta es la primera parte de nuestro código. Así que solo revisamos todas las marcas que tenemos y las implementamos usando un bucle for simple. Como podemos ver, este código es muy pequeño. Solo un par de líneas y simplemente mostraremos el nombre de la marca y la imagen aquí mismo. Hagamos exactamente lo mismo para la categoría antes de pasar a la búsqueda y cómo podemos buscar a través de estas marcas y categorías. Eliminemos el encabezado de contacto adicional y el inicio. Ir a categoría, y vamos a hacer exactamente lo mismo que hicimos antes. Eliminemos todo esto. Comprobemos que esto terminaría aquí, borre todos ellos. Bien. Y eso es todo. Vamos a empezar desde aquí y vamos a revisar las categorías que tenemos. Pero primero, vamos a revisar toda la base de datos, ¿ qué tenemos? Volvamos a las categorías. Como podemos ver, tenemos la categoría y la imagen que es para la categoría específica. Bien. Ahora, volvamos y comprobemos en el AJ cómo estamos regresando o cómo estamos enviando las categorías desde el apto J. Si vamos y vamos a comprobar esta es nuestra categoría apt get. Vamos a buscar a través del esquema de categorías o la base de datos de categorías, y vamos a enviar todas las categorías que tenemos en forma de categorías con doble. Eso es lo que puede necesitar, volvamos. Tenemos toda la información que necesitamos para revisar esto. Vamos a empezar por conseguir las categorías y no para cada una. En este caso, vamos a crear la función que nos va a conseguir cada categoría una por una, luego abrir nk llaves, cerrar esta función aquí y allá Vamos a cortar esto y pegarlo aquí mismo. Ahora tenemos todas las categorías. Podemos mostrarlos simplemente accediendo al nombre como hicimos con la marca, llamamos a la categoría que creamos aquí mismo, y verificamos en la base de datos. ¿Cuál es el nombre de esto? Es una categoría también, categoría D. Y estamos bien. Así es como podemos acceder a él. En cuanto a las imágenes, vamos a hacer exactamente lo mismo. Así que igual a ahora abrir los paréntesis, abrir las citas dobles, lo siento Imágenes más la categoría IMG, como dijimos antes. Bien. Entonces eso es todo principalmente. Vamos a comprobar las imágenes. Entonces son lo mismo. No tenemos ningún problema. Así que volvamos y golpeemos refrescar aquí mismo. Y vamos a la categoría. Bien. En este caso, deberíamos tener una lista de todas las categorías. Sí, tenemos el champú, cuidado corporal y los dientes, y claro, seguido del botón explorador, y esto no hará nada por ahora. Tenemos que ajustarlo, así como la barra de búsqueda aquí mismo. Entonces comencemos con la barra de búsqueda aquí mismo. Si volvemos y comprobamos esta es nuestra barra de búsqueda. Todavía no tenemos la acción del formulario. Entonces, ¿qué hacemos con esto? Entonces, antes que nada, le nombraremos categoría y la acción o el método se publicarán como de costumbre. Así método igual a post. Y vamos a ir por ahora, tenemos el botón con el tipo de enviar. Y siempre que presionemos sobre esto, irá a la categoría aquí mismo. Así que volviendo a nuestra app, aquí vamos a publicar esta categoría, y vamos a buscar a través de todas las categorías disponibles que tenemos que coincidan con la que está buscando el usuario. Entonces para hacer eso, vamos a comenzar con la categoría de publicación de aplicaciones. Y en este caso, vamos a crear la función, que es tosca como de costumbre y empezar por conseguir la categoría que el usuario está buscando, y podemos acceder a ella usando request body Si volvemos a la categoría, podemos encontrar que ésta tiene un nombre, que es un nombre de marca. Cambiémoslo realmente a tal vez el nombre de categoría. Creo que va a ser lógico el nombre de la categoría aquí. Si volvemos, podemos acceder a esto simplemente accediendo al nombre de la categoría del cuerpo de la solicitud. Y entonces claro, si la categoría de longitud es mayor que uno, tal vez necesitamos hacerla mayúscula porque estamos iniciando las categorías en una mayúscula. Estado de champú con S, que es una mayúscula. Dientes, vamos a arreglar todos estos. Pero por ahora, supongamos que todas estas categorías tienen letra mayúscula o la primera letra es mayúscula En este caso, si la longitud es mayor que uno, vamos a modificarlo llamando la categoría el primer carácter en la categoría, para que podamos acceder a ella usando gráfico a cero. Y vamos a llegar a mayúsculas. Esta es la función que vamos a usar, y luego vamos a rebanar esta categoría, y vamos a tomar todo el resto de esta categoría. Por ejemplo, si tenemos shampoo, digamos, Tenemos shampoo así. Lo que vamos a hacer es eso o por ejemplo, con esto. Lo que vamos a hacer es que vamos a tomar esta S justo aquí, punto a cero. Será una S mayúscula más H PooHich hace shampoo con mayúscula S. Eso es todo principalmente para este video El siguiente, vamos a continuar con este método, y por supuesto, para la marca también. Nos vemos entonces. 7. Marcas y categorías 2: Hola, y bienvenidos de nuevo a un video completamente nuevo y este, vamos a seguir construyendo este método de publicación. Entonces vamos a hacer exactamente lo mismo para las marcas también. En primer lugar, vamos a eliminar D continuar como dijimos, aquí vamos a tal vez solo hacer mayúsculas para el primer carácter, y vamos a suponer que todos los caracteres son mayúsculas dentro de nuestra Lo que vamos a hacer ahora es buscar en nuestra base de datos simplemente encontrando todas las categorías. Tengo una categoría de error tipográfico y que coincide con esta por el nombre Como decíamos, tomamos el nombre del usuario, y si volvemos a las categorías, podemos encontrar que el nombre de la categoría se llama categoría también. Cómo lo encuentras, simplemente escribimos categoría y voy a buscar categoría. En este caso, lo vamos a encontrar. Y claro, si encontrado es igual a nulo, entonces no hemos encontrado nada. Así que simplemente vamos a crear simplemente renderizar a la página de inicio. Así que descansa para renderizar, en este caso, la página de inicio es la página de categoría con las categorías Como tal, no tenemos nada, y la solicitud es igual a solicitar como de costumbre. Si realmente encontramos algo, lo vamos a almacenar en algo llamado categorías, por ejemplo, vamos a consultar el registro solo para mostrarlo en la pantalla, y por supuesto, vamos a renderizar a la categoría con lo siguiente un parámetro. Categorías como dijimos, que será la categoría que acabamos encontrar y la solicitud como de costumbre. Y estamos bien por ahora. Esta es la función principal que vamos a utilizar. Solo estamos revisando las categorías que tenemos y buscamos las categorías que tenemos y buscamos algo o una categoría que coincida con esta, y aquí tenemos un error tipográfico también Y si encontramos algo, vamos a simplemente renderizar a la página de categoría junto a esta categoría que encontramos. Si no, vamos a renderizar a la página de categoría con una cadena vacía. Eso es todo, principalmente si volvemos y pulsamos refrescar, busquemos a través de las categorías. Primero probemos el champú. Entonces como podemos ver, encontramos a Champ, siempre nos olvidamos de eliminar este. Cada vez que estoy ahorrando, estoy insertando muchas categorías y muchas marcas. adelante y eliminemos y dejemos caer estos antes de continuar bajando esta colección, y la marca deja caer esta colección también, y en este caso, tal vez voy a correr esta una vez más. Ahora si vuelvo aquí, modifiquemos algo, por ejemplo, así. Como podemos ver, está lanzando de nuevo, y si voy a refrescar aquí, tenemos nuestras marcas y categorías. Regresemos ahora y solo cometamos estos. Como podemos ver ahora, si tuviera que refrescarme, y vamos a encontrar sólo una categoría que es el champú. Ahora bien, si vuelvo a la página principal, volvamos a las categorías. Tenemos shampoo alt y vamos a escribir algo que no esté en nuestra búsqueda de categorías, y no tendremos nada que mostrar en este caso. Quizá podamos hacer algo con esto más tarde, tal vez guardarlo para el proyecto que vas a hacer. En este caso, en lugar de mostrar un espacio vacío aquí mismo, tal vez diga algo como esta categoría no está disponible, prueba otra cosa o tal vez mostrar todas las categorías con un mensaje de que esta categoría específica no está disponible en este momento, o tienes un error tipográfico en tu nomenclatura de categoría Eso es todo para las categorías, pasemos a las marcas. Como podemos ver, también tenemos tres marcas, y queremos hacer este código como antes. Si buscamos alguna marca aquí mismo, debería aparecer como categoría. Volvamos. Bien. Como podemos ver, necesitamos crear la misma función exacta para la categoría. Pero post, vamos a conseguir marcas. Y en este caso, la función t berro, como de costumbre, se abre, y vamos a dejar que la marca sea igual a solicitar el nombre de la marca del cuerpo Voy a comprobarlo ahora. Entonces si vas a marca. Como podemos ver tenemos aquí el nombre de la marca. Vamos a acceder a él usando este. No obstante, el formulario aquí, vamos a necesitar marcas y el método siempre será post. Tenemos el tipo submit de este patrón, así que estamos bien Ahora, lo que vamos a hacer es que vamos a tomar esta marca y hacer exactamente lo mismo con el naming Vamos a cortar tal vez el corte salga del índice uno hasta el final y haciendo el primer elemento o el primer carácter como mayúsculas Vamos a comprobar si marca a la longitud es mayor que una. Simplemente vamos a modificarlo como antes, así que agrega cero y haz dos mayúsculas En este caso, vamos a agregar todo esto al final, vamos a buscar a través de las marcas, tenemos la base de datos de marcas. Vamos a encontrar todas las marcas que coincidan con el nombre de ésta, claro, tenemos la función que nos hacen el trabajo. No me pareció igual a nulo, vamos a mostrar estas marcas. Como dijimos, en este caso, si marca o no se encuentra igual. Tal, vamos a llevarlos y renderizar a las marcas de JS. Entonces hagámoslo. Vamos a llamarlo marcas iguales a fundadas. Y en este caso, voy a consola dot log estas marcas que encontramos antes de renderizar a la página de marcas. Así marcas puntean JS. En este caso, junto a las marcas que obtuvimos y la solicitud que también obtuvimos del usuario. En este caso y si algo más pasó, si hay un error o no encontramos nada, sólo vamos a renderizar a Brands dot JS junto a una y vacía. Así que eso es todo, quizá yo ahora, volvamos a volver a reflash aquí mismo Y vamos a comprobarlo. Entonces, por ejemplo, si sirve para Johnson aquí mismo. Búsqueda de Johnson. Entonces tenemos otra falla en buscar vistas marca DGS. Lo siento, vamos a comprobarlo aquí mismo. ¿Qué estamos haciendo en realidad? Nosotros tal vez. Para que hagamos el trabajo. Conjunto de marcas. Vamos a tipo de marca en lugar de marcas. Este es nombre profanado. Ahora si volvemos, digamos refrescar, comprobar si todo está funcionando aquí mismo, así que estamos bien. Vamos a escribir la búsqueda de Johnson. Como podemos ver, encontramos lo que buscamos. Este es el Johnson y si escribo algo. No vamos a conseguir nada. Este es un espacio vacío, diciendo que no tenemos ninguna marca que esté con este nombre. Eso es básicamente para este video. En este video, creamos el botón de búsqueda y la opción de visualización de estas marcas y categorías. Al siguiente, vamos a exhibir tal vez los artículos que tenemos dentro de este Johnson. Vamos a crear la ruta para el botón pler. Siempre que el usuario presione sobre esta exploración. También debería ver todos los artículos que están relacionados con este producto Johnson o esta marca Johnson. Por supuesto, vamos a hacer exactamente lo mismo para las categorías. Por ejemplo, si el usuario presiona sobre Shampoo, también debería ver tal vez todos los artículos que están relacionados con el champú de todas las diferentes marcas que tenemos. Eso es todo principalmente con eso dicho, este es el final de este video, nos vemos en el siguiente. 8. Productos: Hola, y volveremos en este video, vamos a hacer el botón Explorer. Y vamos a mostrar todas las marcas disponibles o todos los artículos disponibles dentro de esta categoría. Volvamos a las categorías aquí. Como podemos ver, tenemos aquí este botón con el tipo enviado. El formulario está vacío por ahora, vamos a arreglarlo. Lo nombro productos y método siempre se deben publicar este tipo de formularios. En este caso, vamos a ir a los abs y vamos a crear este método aquí mismo. Bien. Entonces comencemos con ello aquí. En este caso, vamos a empezar con productos, y por supuesto, la función, abrir esta función y empezar tomar la categoría que tenemos. Como podemos ver, la categoría será sacada de esta de aquí mismo. Tenemos el nombre. Y también podemos almacenar éste realmente dentro de una entrada para mantenerlo como categoría. En este caso, voy a guardarlo aquí mismo. Entonces la entrada será de tipo in, y voy a establecer el valor de este nombre de categoría aquí mismo. Solo tal vez hagamos el nombre, será categoría y el valor será lo exacto que vamos a mostrar aquí mismo. En este caso, será categoría categoría. Todo bien. Entonces eso es básicamente. Ahora si vuelvo a la app, puedo acceder al nombre de la categoría simplemente escribiendo request dot body category. En este caso, voy a tener la categoría chico categoría, y puedo buscar a través de las categorías que tenemos y encontrar la adecuada para mostrarla. Entonces en este caso, lo que vamos a hacer es que queremos mostrar todos los elementos que tenemos que coincidan con esta categoría específica. Entonces, ¿cómo haces eso? Vamos a simplemente intentar buscar. Entonces artículo, encuentra toda la categoría que coincida con esta. Y para estar seguros de esto, vamos a ir a la base de datos. Así se encontró la categoría. Todo bien. Entonces si volvemos a la base de datos, lamento el esquema. Y vamos a revisar dentro de estos artículos. Este es el esquema del ítem. Tenemos la descripción del título, y tenemos la categoría aquí mismo. Por supuesto, vamos a agregar algunos elementos, y los vamos a revisar ahora. Pero por ahora, terminemos esta categoría, y entonces tal vez vamos a hacerlo. Entonces, por ahora, vamos a abrir esta función aquí mismo. Y trabajemos con ello. Entonces, si encontramos algo, si no hay error, vamos a comprobar si se encuentran categorías. O tal vez los artículos encontrados es un poco más lógico, artículos, Bien. Y en este caso, los artículos encontrados no son iguales a nulos. Eso significa que encontramos algo y podemos renderizar a la página junto a estos elementos. Así renderizar, y vamos a renderizar a la página de productos que creamos anteriormente, y está justo aquí. Por supuesto, junto a los artículos que tenemos por lo que los artículos serían los artículos encontrados, y la solicitud será solo una simple solicitud como. Eso es principalmente, simplemente vamos a buscar a través de los artículos para esta categoría específica y devolver todos los artículos que coincidan con esta categoría. Eso es básicamente. Ahora vamos a crear algunos elementos y agregarlos a la base de datos para poder mostrarlos en los productos al archivo JS. Todo bien. Entonces, subamos. Y en este caso, vamos a crear algunos artículos. Entonces copiemos el esquema para tenerlo delante de nosotros aquí mismo. Creo que aquí es bueno. Y vamos a comentarlo. En este caso, voy a crear el ítem uno, que será nuevo y este será item. Y arriba y arriba los frenillos con el título serían, por ejemplo, tal vez bebé Johnson y descripción lo siento, necesito ponerlos en citas Entonces este es el bebé Johnson. Y claro, estos también serán en cationes. Ahora, en cuanto a la URL de la imagen, MR L también será una cadena. Este caso serán imágenes y Johnson JPG. Entonces tenemos la marca, y es obvio. Por ahora es Johnson. La categoría será quizá champú. Y talla tal vez 100 milli. Y precio, por ejemplo, son 8 dólares y cantidad profunda será, por ejemplo, tal vez 50 por ahora Encontré el error aquí. Necesito arreglarlo, así que vamos a desplazarnos hacia arriba. Y aquí tenemos uno. Entonces eso es básicamente este es nuestro primer ítem. Vamos a copiarlo y pegarlo un par de veces más y cambiar algunas cosas. Todo bien. Entonces creo que estamos bien. Tenemos el punto dos, y éste. A lo mejor vamos a tener algo como Sam. Y simplemente cambiemos éste a cuerpo. Y claro, la categoría anti rama debe ser paloma y champú también En este caso, el ítem tres, tal vez será cuerpo. Digamos que no sé. Johnson, por ejemplo, depende es por cuerpo Johnson, lo siento, y la categoría es body cap. Ahora, en este caso, tenemos un par de artículos más. Solo cambiemos estos. Y creo que estamos bien. Solo queremos insertarlos dentro de nuestra base de datos de artículos. Y para hacer eso, simplemente insertamos muchos vamos a insertar item, item two, item, item four, and item five. Dicho esto, simplemente queremos comprobar si hay un error. Si hay un error, vamos a imprimirlo. Si no, solo vamos a imprimir todos los artículos. Tema uno, ítem dos, ítem tres, ítem cuatro y ítem cinco. Creo que estamos bien. Ahora, cada vez que guardamos esto, en realidad lo guardamos, y estos son los elementos que creamos. Volvamos y comentemos esto y si volvemos y tuvimos actualización aquí mismo, vamos a encontrar esta base de datos de ítems que contiene cinco ítems por ahora. Por supuesto, ahora vamos a implementar esto dentro de nuestros productos a DGS Ahora tenemos la base de datos. Tenemos toda la información que necesitamos. Tenemos todos los artículos que queremos y podemos acceder a ellos a través de esta base de datos. Lo que en realidad estamos haciendo es que estamos obteniendo estos productos. Y enviándolos a la página de productos, que es esta de aquí. Lo que vamos a hacer ahora es ir a la página de productos, GS y modificarla para mostrar estas marcas o mostrar estos artículos de una marca específica. Entonces desplazándose hacia abajo, podemos ver que tenemos tal vez dos, entonces tenemos este productos Tenemos las imágenes, y también tenemos el ítem titulado. A lo mejor vamos a visualizarlo al principio. En lugar de enviar estos por ahora, eliminémoslos. I' voy a simplemente volver a ender a la página de productos por ahora. Entonces si presiono y exploro, voy a renderizar a esta página del producto donde tengo los artículos y son los mismos por ahora. Entonces lo que vamos a hacer es que vamos a este, borre los dos de estos. Como podemos ver, tenemos una columna. Eliminemos todos estos. Tenemos bastantes. Y vamos a checar aquí. Desde aquí, todo el camino hasta el segundo. Entonces vamos a dejar uno de ellos, y vamos a trabajar con ello. Esto es con lo que vamos a trabajar. Tenemos columnas, y vamos a modificar el precio, el nombre de la marca, el nombre de la categoría, el tamaño, imágenes, todas estas, y por supuesto, el título. Ahora, volvamos a las aplicaciones y llevemos estos artículos con nosotros. Para acceder a estos elementos, solo vamos a escribir artículos aquí. Entonces dentro de este después de crear los productos, vamos a revisar todos los artículos que tenemos. Elementos para cada uno va a crear esta función con el ítem y arriba, y de, los vamos a agregar para el script Java incrustado en ML o EJS Bien. Y claro, vamos a tomar todos estos artículos e imprimirlos. Entonces, ¿cómo haces eso? Simplemente voy a tomar este y pegarlo todo el camino hacia abajo después de este de aquí mismo. Ahora podemos acceder a este ítem. Por ejemplo, si quiero el título del ítem aquí, simplemente puedo escribir ítem ese título, y creo que estamos bien. Ahora si vuelvo aquí y pulso refrescar, voy a conseguir lo siento, no elegí ningún artículo por ahora, así que 5% categoría, más en explore ahora mismo. Veamos qué tenemos. Como podemos ver el título no se muestra, y creo que esto es porque aquí olvidamos el enter. Ahora si volvemos y nos refrescamos, vamos a conseguir al bebé Johnson, Campo, Baby Johnson, Baby Johnson. Estos son todos los artículos que pertenecen a esta categoría específica que es Champ. En este caso, vamos a cambiar el precio, el nombre de la marca, la categoría y el tamaño. Volvamos a nuestro código, y cambiemos aquí mismo. Al acceder al precio del artículo, y aquí la marca será como de costumbre, categoría de marca de artículo también. Entonces categoría de artículo, Por último este, que es el tamaño, artículo ese tamaño. Creo que estamos bien. Todavía tenemos la imagen y la haremos en un minuto. Ahora si vuelvo y está fresco, lo cambiamos todo. Tenemos el tamaño de categoría de marca, todos estos. Volvamos ahora. Por supuesto, cuanto a la URL de la imagen, nombramos IMR L. Simplemente accedemos a ella aquí mismo, como podemos ver, tenemos todo lo que queremos como queremos Eso es básicamente para las categorías, vamos a hacer exactamente lo mismo para las marcas en el siguiente video. Nos vemos entonces. Bien. 9. Marcas de casa: Hola, y bienvenidos de nuevo. En el último video, creamos el enlace entre la categoría y la página de productos. Por ejemplo, si el usuario presiona sobre éste, llevará a todos los productos o los artículos que se encuentran en esta categoría específica. Ahora, no tenemos ningún artículo en el ic. Pero para el champú, en realidad tenemos cuatro artículos como podemos ver aquí. Entonces tenemos estos cuatro y los mostramos usando four loop tomando todos los elementos de los ApTOS aquí mismo. Así que simplemente estamos tomando todos los artículos que coincidan la categoría específica y simplemente llevándolos con el render a la página del producto, y por supuesto, mostrándolos como dijimos anteriormente, usando un bucle de cuatro. Ahora, lo que vamos a hacer es que vamos a implementar el mismo procedimiento para la categoría DGS Lo siento por la marca G supongamos que estamos en la página de la marca DGS? Entonces está justo aquí. Y vamos a hacer lo mismo por esto, pero vamos a revisar las marcas. Vamos a renderizar a los productos, página web de DGS, sin embargo, con marcas en lugar de categorías Esto es lo que vamos a hacer. Lo que estoy pensando es tener como antes. Por ejemplo aquí, fuimos a checar. Sí. Por ejemplo, la categoría a D JS, esta forma nos llevó a los productos con el método de post. Lo que estoy pensando es crear un método separado para este tipo de post, por ejemplo, en vez de productos solamente, vamos a llamarlo productos tal vez marcas en este caso, y vamos a abrir una función, g. abrir. Ahora, lo que vamos a hacer es que vamos a tomar la marca del cuerpo de solicitud, marca, y vamos a registrarla en consola aquí mismo. Y claro, vamos a continuar con la búsqueda en los ítems. Entonces artículo encontrar va a encontrar la marca que es esta marca específica arriba y arriba error y artículos encontrados. En este caso, si no hay error, vamos a verificar los artículos encontrados que no sean iguales a nulos, luego encontramos algunos artículos de esta marca, y los vamos a imprimir antes de renderizarlos a la página del producto con los artículos que son artículos desfocados junto con la solicitud que tenemos Sí. Esto es. Básicamente, vamos a ir a la marca o DGS aquí dentro de este formulario, en realidad vamos a ir a productos, marcas, y el método debe ser post Eso es. Creo que estamos bien. Ahora si volvemos y eso es refrescar. Así que no te preocupes por esto no lo hará. Es solo porque aún no tenemos los productos. No tenemos los productos aquí ni los artículos para ir a esta página de productos. Ahora estamos bien estamos en la marca, y si presiono en explorar, vamos a ir a la página de productos. Sin embargo, no tenemos ningún artículo que caiga en la categoría o la marca Johnson. En este caso, abramos una compresa. Brújula Mongo DB y revisemos nuestra base de datos. Si hay un artículo que tenga Shampoo como marca. Lo siento, Johnson como marca. En este caso, si queremos conectarnos a la base de datos, vamos a desplazarnos hasta el final y tomarlo como un enlace y abrir nuestra base de datos. Y como podemos ver, tenemos los artículos aquí mismo. También tenemos el shampoo. Todo bien. Entonces no hay problema aquí. El problema es que lo que estamos obteniendo es indefinido y supongo que es porque nos olvidamos de introducir la marca Entonces tal vez vamos a agregarlo aquí mismo. Y esto va a ser de nombre. Marca y en este caso, vamos a tomar marca D marca. De esta manera, obtuvimos la entrada que se oculta con el nombre de la marca, para que podamos acceder a ella usando marca de cuerpo solicitada con el valor de la marca de esta marca aquí mismo. Creo que estamos bien por ahora si volvemos y refrescamos, revisemos por Johnson. Y vamos a esperar un poco, si no hay error. Y creo que estamos estamos bien. Como podemos ver, obtuvimos todos los artículos que tiene esta marca específica, que es Johnson. Entonces tenemos cuatro artículos de Johnson y tres shampoo y uno Bo estamos bien por ahora. Esto es lo que pretendemos hacer. Esto es lo que hicimos por las marcas también, así como por las categorías. Eso es básicamente para este paso, pasemos al siguiente. Entonces veamos si volvemos a casa, podemos encontrar que las marcas, los más vendidos y las categorías no funcionan bien, así que necesitamos obtenerlos de la base de datos que tenemos y mostrarlos dentro de nuestra página de inicio. Así que volviendo a la casa a D JS. Eso es. Podemos comenzar por las marcas aquí mismo. Estas son nuestras marcas, echa un vistazo a nuestras marcas y aquí. Necesitamos mostrar todas las marcas que tenemos o tal vez algunas de ellas. Y para hacer eso. Volvamos a aquí como podemos ver dentro del slash delantero, que nos hará llegar a la página de inicio De hecho, estamos tomando todas las marcas, los más vendidos y las categorías y presentándolos a la página principal. Aquí tenemos categorías, marcas, y lo mejor. En este caso, podemos acceder a ellos directamente en la página de inicio de GS. En este caso, voy a comenzar con creación tal vez justo aquí después de la función. Entonces lo que estoy pensando en hacer es en lugar de inminir todo este sa, estoy pensando en algo un poco más sencillo Empecemos por aquí mismo. En primer lugar, vamos a contener tal vez el contenedor, y dentro de este contenedor, vamos a tener la fila y columna media 12 con centro tributario al lado. Arriba y arriba este, y comencemos con el rumbo, entonces será H dos con la clase de sección de rumbo. B tres, y tal vez Pb cuatro. Creo que estamos bien. Vamos sin marcas y el párrafo será de plomo de clase B cinco. En este caso, vamos a escribir echa un vistazo a nuestras diversas marcas. Ahora si volvemos y nos dirigimos a fresco, podemos ver que tenemos marcas, echa un vistazo a nuestras diversas marcas. Ahora podemos crear nuestro carrusel real. En este caso, simplemente voy a crearlo aquí mismo con columna media 12. En este caso, se presentará Carrusel y carrusel viejo como antes Por supuesto, ahora podemos empezar por mostrar nuestras marcas, así que vamos a crear cuatro bucles. Dijimos que tenemos marcas y de las marcas. Vamos a tomar para cada uno y por supuesto, vamos a patear la función con brand up and up esta función Y claro, cerrándolo al final. Eso es, básicamente, ahora podemos comenzar con la creación de nuestro artículo. Este es el artículo de la clase. Vamos a crear una clase llamada trabajo. En este caso, lo que voy a hacer es crear un formulario con una acción de productos o algo así, lo vamos a discutir más adelante, y el método será post. En este caso, vamos a crear nuestro botón, que tiene un tipo De enviar, y por supuesto, la clase también debe ser PT N. Ahora, después de tantear este botón, vamos a crear la división que es la tarjeta Entonces vamos a tener el texto centrado en el medio. Y claro, tal vez vamos a añadir algo de estilo. Por ejemplo, el ancho, lo tomaré como 18 Rm. Ahora podemos tener nuestra imagen con el archivo fuente de la siguiente manera. Por ejemplo, aquí tenemos la imagen real que está en la carpeta de imágenes, además de la imagen de marca también. Y en este caso, vamos a tomar esta imagen, y vamos a agregar el cuerpo de la tarjeta. Por supuesto. Este cuerpo de la tarjeta sería el nombre real de la marca. Entonces en este caso, lo haré H six, así que este será texto de tarjeta. Y esto contendrá una marca de marca y por supuesto. Bien. Va a necesitar agregar esto para que sea legible. Creo que esto es básicamente. Esto es lo que deberíamos estar haciendo. Si vuelvo ahora y presiono refrescar, vamos a conseguir esta imagen. Vamos a buscar a Johnson, Cogate y Basin. Como podemos ver, los tenemos todos en la misma ubicación. Vamos a arreglarlo. Lo que estoy pensando está aquí dentro de esta. Lo voy a hacer es tomar todo esto y tal vez vamos a crear aquí. Una fila y copia todo esto en la fila. Por supuesto, vamos a crear una columna de cuatro tal vez o vamos a tenerla así. Aquí, columna de cuatro. En este caso, voy a copiar todo esto una vez más. Basarlo aquí y vamos a comprobarlo ahora mismo. Entonces, ¿qué tenemos aquí? Todo bien. Creo que me enteré de lo que es el dólar. Es que estamos creando cada vez una nueva fila, cada vez que estamos entrando en este bucle de cuatro. Ahora, creo que si vuelvo y le doy a refrescar. Sí, estamos bien por ahora. Todavía tenemos alguna modificación que hacer. Entonces, por ejemplo, podemos hacer que el tamaño de la imagen sea fijo. Entonces no tenemos algo así. Esto será mayor que las otras imágenes, y esto no será tan guapo también. Entonces con eso dicho, creo que este es el final de este video. Y el siguiente video, vamos a hacer exactamente lo mismo para tal vez para las categorías y los más vendidos, y por supuesto, vamos a agregar el enlace a este. Entonces por ejemplo, si el usuario presiona sobre esto, entonces aquí tenemos lo que tenemos aquí, tenemos a Johnson. Entonces, si presionamos sobre Johnson, deberías redirigirlo a los productos que están relacionados con Johnson y por supuesto, Colgate y Basin también También vamos a hacer exactamente lo mismo para las categorías reales. Entonces dicho eso, este es el final de este video, nos vemos en el siguiente. Bien. 10. Mejor vendedor en casa: Hola y bienvenidos de nuevo. En este video, vamos a continuar con nuestra página de inicio, y por supuesto, vamos a comenzar con el best seller. La última vez que terminamos tanto marcas como categorías. Todavía tenemos la página de best seller, y sigamos adelante y comencemos con ella. Aquí, creamos el primer contenedor que contiene las marcas y aquí tenemos las categorías. Voy a colocar a los más vendidos en medio de esto. Para ello, comencemos con la construcción del contenedor. Y voy a crear la primera clase. Ese es el lo siento, la primera división, donde vamos a tener el texto de fila silenciado y el centro de texto Y en este caso, voy a tener otra columna con margen de cuatro en todos los lugares de dimensiones. En este caso, comencemos por crear el encabezado. La clase será display o Mug y bottom four, y voy a llamarlo best sellers. Voy a seguir este por una nueva división. Y voy a oscurecer el subrayado y todas estas son clases de correas para botas, y puedes ir a revisarlas en la página web oficial Pero por ahora, los vamos a usar como aquí. Voy a crear un subrayado luego seguido de un párrafo con el líder de la clase, diciendo que echa un vistazo a algunos de nuestros artículos más vendidos Ahora si volvemos, vamos a sentarnos a refrescar. Bien. Y como podemos ver, conseguimos los más vendidos. Echa un vistazo a algunos de los artículos más vendidos. Eso es básicamente para el párrafo del encabezamiento. Ahora, volvamos y comencemos con otra fila, y en este caso, vamos a necesitar crear una fila con un texto de línea de elementos y Maxto Ahora podemos mirar a través de nuestros best sellers, y lo vamos a hacer simplemente creando un bucle completo. Lo mejor para cada función, vamos a llamarlo best seller. Por supuesto, vamos a abrir esto. Y ciérrala aquí mismo. Lo tomé como mejor. Vamos a las APOGs y verifiquemos, ¿qué estamos haciendo con la página principal Vamos a tomar las marcas, los más vendidos y las categorías y lo nombramos como mejor aquí mismo. Vamos a conseguir nuestros best sellers como este mejor. Podemos acceder a ellos simplemente creando este bucle de cuatro y acceder a ellos elemento por elemento. Eso es básicamente. Ahora solo necesitamos crear nuestras columnas. Columna grande cuatro y por supuesto, tal vez hacerla diez si el usuario está usando algo más pequeño que una pantalla de escritorio. En este caso, voy a agregar x auto, y creo que estamos bien. Podemos comenzar con la creación de la tarjeta. Voy a ponerle nombre a la tarjeta uno para después, tal vez para el CSS, y mis cuatro con x auto. Ahora, podemos comenzar por crear la imagen. El origen de esta imagen será tal y como dijimos, vamos a comprobarlo. Por ahora, no creamos ninguna imagen ni ningún best seller. Los vamos a agregar más tarde. Pero por ahora, asumiremos que siguen el mismo formato que el MMR L aquí mismo Vamos a tener imágenes dot dot slash el nombre del producto Entonces voy a acceder a él usando solo el best seller, y volviendo aquí. Veamos en nuestro esquema del best seller, ¿cuál es el nombre de éste? En el best seller, tenemos el nombre, tenemos la imagen, para que podamos acceder a ella usando la imagen. En este caso, lo que vamos a hacer es que vamos a crear la imagen de best seller, y creo que estamos bien. Ahora podemos continuar creando el encabezado en el cuerpo de la tarjeta. Vamos a tener el encabezado que está encabezando cinco con la clase de texto mayúscula. Tal vez hazlo negrita fuente blanco negrita, margen pum tres elemento de la lista de cartas Dentro de este, simplemente voy a mostrar el nombre. Entonces best seller, el nombre y para asegurarme voy a volver a ver, le pusimos ese nombre. Así es como podemos acceder al nombre. Ahora, todavía tenemos que crear el formulario para enviar nuestros botones, por ejemplo, si el usuario presiona sobre este best seller específico, debería redirigirlo a esta página específica. Para ello, sólo vamos a llegar aquí después del encabezado, voy a crear un formulario y este formulario será redirigido a algo específico. Lo voy a hacer más tarde. Pero por ahora, el método, como es habitual, será post. En este formulario, voy a crear un fondo con tipo submit class BTN, relleno de dos texto mayúsculas y peso frontal oro junto a algunos otros botones de tarjeta de precio Esto es para el CSS. La vamos a usar más tarde. Pero por ahora BTN advierte por hacer que el texto amarillo y luz de texto Entonces BTN advirtiendo, lo siento, por hacer que el botón sea amarillo y el texto se encienda por hacer que el texto se ilumine Y simplemente voy a escribir el detalle. Bien. Creo que estamos bien por ahora, tenemos nuestra forma, tenemos nuestro botón, y todo parece bueno. Si vuelvo y presiono refrescar. Sí, no me va a pasar nada ya que no tenemos el best seller aquí mismo. Lo que estamos tratando de hacer es que nos vamos a casa y estamos tratando de acceder a lo mejor que no está disponible porque no tenemos ningún best seller en nuestra base de datos. Arreglemos esto. De hecho creamos algunos best sellers aquí mismo, pero no tuvimos la oportunidad de agregarlos a nuestro esquema. Volvamos todo el camino hacia abajo. En este caso, lo que vamos a hacer es crear el mejor inserto Muchos recuerdo B uno, B dos, B tres. Por supuesto, vamos a crear la función con el error. Entonces, si hay un error, desconéctelo, lo contrario, solo registra los mejores conjuntos. Y ya llegamos, si vuelvo, podemos ver que creamos estos creamos nombre Johnson, hidrante Cgate, y el siguiente ID No obstante, creo que nos perdimos algunas cosas, por ejemplo, nos perdimos la imagen. Sí. Lo que hicimos aquí es que creamos el best seller con el nombre IMG en lugar de imagen Una forma de arreglar esto es simplemente eliminar este. Será IMG. Por supuesto, tenemos que volver a nuestra base de datos, actualizarla y dejar caer todo este best seller aquí mismo. Deja caer esta colección, ya que no las necesitamos sin sus imágenes. Ahora si volvemos y guardamos éste, vamos a refrescarnos. Sí. Todo bien. Así hacerlo. Si volvemos a aquí y se refiere, vamos a encontrar la base de datos de best seller. Entonces creo que deberíamos esperar un poco. Pero por ahora, podemos ver que lo conseguimos aquí mismo. Tenemos las marcas, las categorías y la imagen. Y en este caso. Si volvemos ahora, vamos Como podemos ver, conseguimos los más vendidos, echa un vistazo a algunos de los más vendidos. Tenemos el Johnson Colgate y el otro creo que tenemos un problema con el MatERL y esto es un Pero la idea general es que conseguimos todos nuestros productos, todos nuestros artículos y los más vendidos en las marcas y en las categorías. Eso es principalmente. Así es como podemos crear la página de best seller o la sección best seller. Y claro, lo que vamos a hacer ahora es que vamos a hacer este botón. Ahora bien, si presionamos sobre esto, nos llevará a una página de error, sin embargo, necesitamos llevarnos a nuestra página de producto real donde vamos a ver el producto específico. Este es un ítem que tiene detalles específicos, tiene asizes específicos y así sucesivamente Si el usuario quiere adquirir este artículo, también debería ver todos los detalles y puede hacerlo simplemente haciendo clic en CDs. Ahora, lo que vamos a hacer es hacer lo mismo por las marcas y categorías. Ahora bien, si presionas sobre marcas, nos llevará a todos los artículos que están en las marcas específicas. Como podemos ver si presionamos aquí, tenemos todos los artículos. Tenemos algunos detalles aquí, pero no tenemos la descripción, no tenemos la cantidad, y por supuesto, no podemos ordenar desde aquí. Lo que vamos a hacer también es que si presionamos sobre esto, también debería llevarnos a la página de descripción del producto. Y en este caso, ya creamos aquí mismo, tenemos productos y tenemos producto. Esta página debe mostrarse cada vez que presionemos sobre algo así. Es ya sea en las marcas o categorías o incluso los más vendidos, debe redirigirnos a esta página específica que es producto de JS y mostrar todos los detalles de este producto específico que el usuario quiera. Porque eso es básicamente para este video. Espero que te haya gustado. Y el siguiente, vamos a hacer lo que hablamos ahora y nos vemos entonces. Bien. 11. Página de productos: Hola, y volveremos en este video, vamos a continuar con la construcción de estos productos. Entonces aquí tenemos los productos, y como decíamos, queremos siempre que presionemos sobre algún producto específico, queremos que se renderizen a la página del producto, que es ésta principalmente. Como dijimos, también queremos hacer eso si estamos ya sea en marca o categoría. Si estamos aquí en categoría, presionamos sobre champú, y nos otorgaron a la página del producto. Tenemos aquí ahora algunos productos específicos. Quiero si hago clic en este producto específico, quiero ser renderizado a los detalles de estos de este producto específico y así como a la sección de best seller. Entonces si estoy aquí en el best seller y quiero ver los detalles de este producto, también debería ser renderizado a esta página específica, que es el producto de GS. Entonces, ¿cómo hacemos eso? Ahora, volviendo al Apo JS, podemos ver que en el esquema best seller, creamos algo que se llama el artículo, que principalmente es el tipo, y este es en realidad el ID de este artículo. Artículo de referencia, y por supuesto, tenemos aquí el ID. Si queremos acceder a este ítem, podemos acceder a él ya sea por ID o por nombre o por imagen, pero no tiene sentido acceder a él por imagen, y además no tiene sentido acceder a él por nombre, tal vez tengamos más que producto que tenga el mismo nombre, tal vez diferentes tamaños o diferentes cantidades y así sucesivamente y así sucesivamente. Dicho esto, podemos acceder a este ítem específico a través del ID de objeto. Esto es lo que vamos a hacer. Ahora volviendo a casa la DGS, y dije, dejo esta vacía por ahora Ahora es el momento de colocar algo aquí mismo, donde vamos a ir. Vamos a ir a los productos. Sin embargo, vamos a agregar algo, y esta es una costumbre que Javascript nos permite hacer y hacer eso. Simplemente vamos a escribir los productos. Vamos a renderizar dos productos. Sin embargo, no estamos renderizando solo productos, que estamos renderizando a productos más el artículo más vendido. Y este artículo nos permitirá tomar la identificación y colocarla aquí mismo. Entonces supongamos que tenemos esta D aquí. Ahora, cada vez que estamos renderizando, estamos renderizando cada vez a una acción específica o diferente. Entonces tal vez estamos renderizando al primer ítem, así que vamos a tener productos. Vamos a tener algo así. Productos. Suponiendo que el primer ID es uno. Entonces los productos que uno, la segunda vez, si estamos accediendo al segundo producto, tal vez los productos son dos, y así sucesivamente y así sucesivamente. Entonces la idea aquí es que no es no es lo mismo cada vez que estamos renderizando a un producto. En este caso, lo que vamos a hacer es que vamos a usar algo que se llama custom. Entonces con eso dicho, necesitamos ahora volver a los APGs y crear nuestra función aquí mismo. Entonces, ¿cómo lo haces? Simplemente, lo que vamos a hacer es crear la app get product, y por supuesto, en este caso, lo que vamos a conseguir productos más la D de este producto. Entonces, ¿cómo se hace eso? Volvamos a desplazarnos todo el camino hacia abajo. A lo mejor vamos a agregarlo aquí después del producto. Aquí tenemos los productos aquí mismo. A lo mejor vamos a agregarlo después de los productos parent también. Aquí. Lo que vamos a hacer es conseguir estos productos y también sabemos que esto es una costumbre. Lo que vamos a hacer es colocar una c y escribir custom. En este caso, vamos a crear la función. También. Lo que vamos a hacer es crear la costumbre, que básicamente es simplemente obtener esta costumbre de aquí. ¿Cómo accedemos a él? En realidad es bastante fácil con solo escribir solicitudes, personalizadas. Así es como podemos obtener la identificación desde aquí y acceder a ella aquí mismo. Eso es básicamente ahora que podemos buscar a través los ítems y encontrar el ítem específico con este ID específico. Ahora bien, si retrocedemos hasta arriba, podemos ver que lo que estamos empezando aquí es el esquema de Mangoose que escribe ese ID de objeto Entonces aquí tenemos la idea de este objeto específico, y no es del best seller. No es de esta sem, es del ítem. Lo que estamos haciendo en realidad es que vamos al ítem. Bien. Y si vamos a la base de datos, podemos encontrarla aquí mismo en realidad. Entonces tenemos el artículo. Lo que estamos haciendo en realidad es que estamos tomando este ID de aquí y colocándolo dentro de nuestro esquema como una forma de ítem. Bien. Eso es básicamente. Ahora, volviendo a los productos, podemos buscar a través del ítem una base de datos, encontrar por ID. Vamos a encontrar por error de función personalizado y encontramos elementos arriba y arriba. Si no hay error, vamos a comprobar si tenemos algunos artículos encontrados, vamos a redirigir. A lo mejor vamos a registrarlos al principio, artículos encontrados. Lo siento. Y en este caso, simplemente vamos a mostrar los artículos encontrados. Si este no es el caso, claro, vamos a mostrar o renderizar a la página principal. Así que descansa eso directo a la página principal. Ahora, si encontramos los artículos, solo queremos crear, tomar la marca de estos artículos Así que primero vamos a mostrar estos artículos encontrados. Solo tomemos estos y llevémoslos a la página del producto. En este caso, lo que vamos a hacer es simplemente renderizar al producto junto con la solicitud y los artículos. Cuáles serían los artículos encontrados. Tal vez vamos a nombrarlo encontró artículos o artículo. En este caso, creo que estamos bien por ahora, si encontramos algo, vamos a renderizar a la página del producto junto a estos artículos encontrados. Ahora lo que vamos a hacer es que vamos a ir a la página del producto y luego mostrar estos artículos encontrados como un formulario o tal vez como los detalles de estos artículos encontrados. Aquí tenemos solo un artículo. No obstante, tal vez tengamos más de uno, solo tomaremos el primero, así que por eso lo estoy colocando como ítem. Ahora, si volvemos y presionamos actualizar, y me desplazo hasta la prensa de best seller. Aquí tenemos productos indefinidos. Volvamos y veamos. Aquí tenemos productos en lugar de producto. Ahora si vuelvo. Ahora lo que estamos enfrentando aquí es que me olvidé de dejar de insertar a los más vendidos. adelante y dejemos caer toda la base de datos de best seller desde aquí. Y solo guarda esto una vez más. Entonces dejémoslo ya. Lo que voy a hacer es que a lo mejor voy a volver a encender noto Vamos a guardarlos, y luego a guardar éste. Ahora mismo vamos a tener nuestra mejor base de datos aquí mismo y contiene sólo tres productos que vamos a mostrar. Eso es, básicamente, es refrescar. Ahora vamos a hacer exactamente lo mismo para todos los productos. Se trata de marcas o categorías. De cualquier manera, vamos a ser renderizados o redirigidos a los productos JS y vamos a continuar a partir de ahí Aquí estamos en los productos de JS. En este caso, lo que vamos a hacer es que vamos a crear la cada correa aquí en lugar de ir a ninguna parte, vamos a arreglar esto simplemente agregando la ubicación o agregando el enlace a la página específica. En este caso, lo que vamos a hacer es que estamos tratando de escribir productos, que es básicamente la página de productos. Déjame solo agregar las cotizaciones, productos y luego abrir aquí tenemos los artículos Puedo agregar artículo Do ID. En este caso, puedo acceder a la idea del ítem específico. Por supuesto, esto es lo que estamos haciendo. Si vuelvo, probémoslo. Podríamos enfrentar algunos errores, pero podemos ver a lo largo del viaje. Si vuelvo fresco, vamos a la categoría, por ejemplo, si presiono sobre el champú específico, por ejemplo, me renderizarán esta página si presiono en esta. Todo bien. Entonces estoy corriendo a la página principal. Estoy asumiendo que tenemos un error ya que lo dijimos aquí mismo en la app a JS, si enfrentamos algún error dentro de esta app conseguimos los productos, lo que vamos a hacer es redirigirlo para que sea redirigido a la página principal No nos enfrentamos a un error, simplemente no encontramos ningún artículo que tenga este ID específico. Lo que vamos a hacer es que vamos a dividirlas en tres categorías. El del best seller, el de las marcas, y el de las categorías. Así que acabo de crear el de la marca. Entonces lo nombro producto de marca. Entonces lo que vamos a hacer es obtener este, obtener el nombre del cuerpo que vamos a crear y luego buscar a través los elementos dentro de la base de datos de elementos. Buscar hay un título que es exactamente como la costumbre. Y en este caso, si no hay error y hemos encontrado algunos artículos, solo los vamos a mostrar y, por supuesto, renderizar al producto junto al artículo y la solicitud que obtuvimos. Bien. Entonces eso es todo principalmente esto es lo que estamos haciendo, y vamos a hacer exactamente lo mismo para el producto de categorías en este caso, ¿verdad? Entonces hagámoslo aquí mismo. Lo que vamos a hacer es que vamos a llegar a obtener la categoría de producto. Aquí, lo siento, tengo un error tipográfico, así que esto es y lo conseguimos Ahora dentro de ésta, lo que vamos a hacer es crear la función. Acres abren esta costumbre constante con solicitar que por nombre y registrarlo aquí solo para visualizarlo y luego buscar a través de los artículos. Encuentra el que esté coincidiendo con esto en términos de título, y claro, si tenemos un error, necesitamos mostrarlo y si no, vamos a encontrar algo. Entonces, si no hay error, hacemos otra cosa que mostramos este error. Y por supuesto, vamos a comprobar si hemos encontrado artículos y de lo contrario simplemente redirigir a la página de inicio. Si encontramos algunos artículos, simplemente estamos para mostrarlos así artículos. Libra más artículos. Por supuesto, vamos a renderizar a la página del producto junto con la solicitud que obtuvimos y el artículo que encontramos. Eso es, básicamente. Es así como podemos implementar estos de una manera fácil. Sólo vamos a conseguir este y simplemente trabajar nuestro camino a través de él. Bien. Entonces eso es todo principalmente en el siguiente video, vamos a mostrar o vamos a visualizar estos en acción, y por supuesto, vamos a seguir construyendo. Todavía tenemos la página de administración, todavía tenemos los pedidos de lugar. Necesitamos agregar toda la información del usuario a nuestra base de datos, y por supuesto, vamos a seguir haciendo su pedido, almacenando su pedido en nuestra base de datos, y por supuesto, mostrándolos en la página de administración así como en la página de pedidos del usuario. Dicho esto, este es el final de este video. Nos vemos en la siguiente. Bien. 12. Carro: Hola, y bienvenidos de nuevo. En este video, vamos a echar un vistazo a la página del producto. Como decíamos, acabamos de implementar anteriormente la página de best seller donde podemos hacer clic en C details, y nos redirigirá a la página del producto. Y este será el artículo titulado, la descripción, el precio, el tamaño de la categoría de la marca, y cuántas piezas quiere el usuario. Entonces también puede agregarlo a su tarjeta. En este ejemplo, lo que vamos a hacer, es que vamos a cambiar estos títulos, la descripción y los precios. Estos son estáticos, queremos hacerlos dinámicos. Lo siento, queremos que sean dinámicos y se puedan cambiar para todos y cada uno de los productos. En este caso, volvamos a la página del producto. Y en esta página del producto. Ahora, recuerda antes, enviamos estos aquí producto de best y los renderizamos usando el artículo. Entonces lo que vamos a hacer es que vamos a ir a la página del producto. Y como podemos ver, tenemos el título del artículo, algún precio de descripción, así que queremos cambiarlos. Entonces, ¿cómo los cambias? Es bastante sencillo. Podemos llamar título de ítem en este caso. Bien. Y aquí tenemos que llamar al ítem D descripción, ya que estamos describiendo este ítem, y lo tenemos en nuestra base de datos. Entonces como podemos ver, solo eliminemos estos y estamos bien. Entonces descripción del artículo. Déjame asegurarme dentro de la base de datos, podemos encontrar que tenemos la descripción. Ahora podemos mostrar la marca img R L y la categoría. En cuanto a la marca, mostrémosla aquí mismo. Entonces como dijimos, marca del artículo. Ahora para la categoría, lo mismo. Entonces categoría de artículo en cuanto al tamaño, podemos colocarlo aquí mismo. Esta es nuestra talla, tal vez agregarla aquí mismo, tamaño del artículo. Entonces tenemos cuántas piezas. Esto no es para nosotros. Esto es para el usuario. Tenemos el botón add to cut. En realidad no necesitamos hacer nada aquí mismo. Sin embargo, necesitamos cambiar la imagen, y esa es la imagen del ítem R L así. Creo que estamos bien ahora si volvemos y pulsamos refrescar, vamos a conseguir el precio. Lo siento, tenemos que volver aquí. Creo que el problema es que estamos mostrando o estamos tomando el primer o cualquier título en el ítem. Recuerda, cuando estamos buscando el artículo, estamos buscando todos los artículos que tienen el mismo título. En este caso, estamos devolviendo una variedad de artículos y solo queremos el primer artículo, así que para lidiar con eso, simplemente usaremos item en cero. Este artículo es en realidad una lista de artículos. Vamos a necesitar solo el primero, para lidiar con eso, simplemente vamos a escribir a cero. Justo aquí, y olvidamos el precio del artículo, y por supuesto, a cero también, olvidamos el igual, y vamos a hacer lo mismo por esto. Creo que estamos bien, todavía tenemos el tamaño y la imagen. Eso es todo por la imagen. Nosotros ahora si volvemos y pulsamos refrescar, vamos a conseguir algo así. Tenemos nuestra imagen, nuestro título descripción precio marca categoría y tamaño junto con la cantidad que el usuario quiere. Aquí presiona sobre la cantidad, y luego puede agregarla a su tarjeta. En este caso, lo que realmente hicimos es que vinculamos entre el com aquí, tenemos el best seller y vinculamos entre este producto y su descripción. La página del producto ahora está vinculada a la página principal y simplemente creando esta función que toma el artículo y lo busca en la base de datos de artículos, luego volver a la página del producto y mostrar todas las descripciones o toda la información del artículo específico. Eso es, básicamente, así es como podemos vincularnos entre ellos. Ahora lo que vamos a hacer es que vamos a trabajar con este complemento a la tarjeta. Ahora estamos presionando sobre este complemento a la tarjeta y no está pasando nada. Vamos a hacer que funcione. Vamos a agregar esto a la tarjeta del usuario, y por supuesto, vamos a devolverlo, tal vez a la página de inicio o a la página de productos. Ya veremos. Volvamos al código aquí. Tenemos el botón aquí mismo, y este botón es de tipo enviar y tenemos nuestro formulario. Entonces ahora la acción de este formulario es al envío, así que vamos a tener una función de envío, y el método debe ser post como de costumbre. Ahora, volviendo a la apo JS, vamos a crear una nueva función, que es básicamente vincular entre el producto y la página de envío. Entonces hagámoslo aquí mismo y primero voy a crear la función y luego la discutiremos. Vamos a meternos en ello. Todo bien. En primer lugar, app, pero post envío y crear las funciones como de costumbre, arriba y arriba los paréntesis Y claro, lo vamos a hacer es que vamos a crear una fecha para esta función o siempre que el usuario esté ingresando o agregando a su tarjeta. Yo lo nombro creado a y va a ser una nueva fecha, y voy a llegar a cadena local. En este caso, vamos a empezar por crear la caja. Así que solicite por la caja. Y en este caso, la caja en realidad está aquí. Tenemos esta entrada, que es la caja, y en esta caja, vamos a tener la cantidad que el usuario quiera. Voy a agregar algunas entradas que están ocultas para tenerlas con nosotros en el archivo APTOS. En este caso, voy a tener el título del nombre. El valor será como el nombre indique el título de este producto, y voy a tener un par más, así que vamos a tener la imagen del nombre y el valor será igual a item.rl, y luego vamos a tener finalmente la última entrada, que también está oculta, y este será el precio de valor será igual al precio del artículo, y creo que todavía estamos tenemos aquí para modificar éste y lo conseguimos. Eso es, principalmente. Ahora tenemos nuestras entradas junto a la cantidad que el usuario quiere, podemos seguir adelante y trabajar con la función JS apto aquí. En primer lugar, vamos a conseguir la caja, vamos a conseguir el tamaño o solicitado por tamaño. El solicitado por edad, el título como de costumbre, y el precio como de costumbre. Ahora, no estoy seguro si agregamos el tamaño. Sigamos adelante con el producto y agreguémoslo aquí mismo. Tenemos la entrada y luego nombre tamaño y valor será artículo de ese tamaño. Eso es, básicamente. Volvamos. Ahora estamos listos para trabajar con esta función. Lo que vamos a hacer al principio es encontrar al usuario que está iniciando sesión y por supuesto, vamos a agregar esto a su tarjeta. Entonces lo que estamos haciendo al principio es verificar si el usuario está bloqueado. ¿Cómo se hace eso? Vamos a crear la longitud. Por ejemplo, permítanme crear una variable al principio, así esta variable será falsa, esto representará si el usuario está bloqueado o no. Y si solicitan al usuario que longitud de los pedidos sea igual a cero, vamos a hacer algo. Lo que vamos a hacer es tomar esta Variable S y hacerla realidad. Esta S representa que el usuario está ordenando por primera vez y queremos mostrar o tomar su información para tener una mejor idea de su ubicación, su número de teléfono, y así sucesivamente y así sucesivamente. S será cierto en este caso, y vamos a comprobar si el usuario y longitud es mayor a cero, en este caso, comprobado será este pedidos comprobados será el último pedido que el pedido y check out. Lo que estamos haciendo principalmente aquí es que estamos pidiendo verificar si el usuario tiene algún pedido antes, y en este caso, si tiene algunos pedidos, lo que vamos a hacer es sacar el check out del último pedido. Ahora, recuerda, check out es una variable que es verdadera si el usuario ha checado y cae si no. Y en este caso, vamos a tomarlo y vamos a empezar por nuestro código aquí según estos dos. Si uno de ellos es cierto, eso significa que queremos agregarlos a nuestra base de datos. Cómo se hace eso para verificar si S es verdadera o si se comprueba es verdadera. En este caso, lo que vamos a hacer es encontrar por ID y actualizar. Este es un método para encontrar cualquier artículo o cualquier usuario en este caso, cual tiene el ID específico y actualizar la siguiente información. El ID se va a solicitar ID de usuario, y luego vamos a abrir esto, y así es como podemos cambiar, escribimos el signo de dólar, push y podemos comenzar con la actualización. Lo que vamos a actualizar son las órdenes de este usuario específico. Vamos a abrir esto y vamos a actualizar cada uno Así que en este caso, vamos a abrir la matriz y los elementos específicos. Entonces lo que vamos a hacer es actualizar los ítems específicos, y en este caso, voy a actualizar la imagen título precio cantidad y tamaño. Como decíamos, la imagen será un será el precio será precio y la cantidad será la caja que obtuvimos. Bien. Y por último, esta talla será la talla que también obtuvimos. Ahora bien, si ambos no están satisfechos, si uno de ellos está satisfecho, encontramos que podemos trabajar con ello, en el caso de que ambos no estén satisfechos, necesitamos hacer otra cosa. En este caso, comencemos por encontrar al usuario, buscar ID y actualizar el ID de usuario de solicitud, y vamos a usar el mismo método, que es push y así es como empujamos o actualizamos, vamos a encontrar los pedidos que están por fin, y los artículos en este caso, vamos a actualizar la imagen, el título y el precio, la cantidad, y el tamaño. Entonces creo que estamos bien. Lo que hay que hacer ahora mismo es simplemente salir de aquí y filtrar según el checkout. Queremos que el checkout sea falso. Entonces, ¿cómo se hace eso? Simplemente vamos a escribir filtros de matriz. Así es como lo hacemos, tecleamos array filters checkout igual a false. Dicho esto, este es el final de visita voy a seguir en la siguiente para verte. 13. Entra en la sesión: Hola, y bienvenidos de nuevo. En este video, vamos a ver cómo podemos iniciar sesión y cerrar sesión aquí mismo. Por ejemplo, si queremos iniciar sesión, puedo seguir adelante y escribir mi inicio de sesión, si hay algo mal, voy a obtener esta página web de su correo electrónico o contraseña están equivocados, y me piden que vuelva a intentarlo. En este caso, si quiero inscribirme, por ejemplo, simplemente puedo escribir mi nombre, luego mi correo electrónico. Y claro, una contraseña, vamos a convertirla en una por ahora y luego dar click en. A ver. Este es mi nombre y este es cualquier correo electrónico, unis en example.com Hagámoslo uno y A. Ahora si hago clic en signp, seré redirigido a la página principal como podemos ver, ya podemos ver este icono, y claro, tenemos la opción de cerrar sesión Ahora, estamos haciendo esto porque si queremos ir a la marca, por ejemplo, como decíamos, si le marcamos a los Johnson. Digamos que tenemos estos productos, estas imágenes no están registrando o no se están cargando por ahora, vamos a esperar un poco. Pero por el bien de nuestro argumento, tenemos esta página donde tenemos los productos. En este caso, quiero agregar este a mi auto. Si estoy registrado, voy a ser redirigido a la página de envío como dijimos Si no, vamos a cerrar sesión. Entonces, si no estoy cerrado, si no estoy registrado, me van a pedir que se me haya registrado. Entonces, si vuelvo ahora y traté de agregar esto a mi tarjeta, me van a pedir que vuelva a iniciar sesión. Quiero ingresar el correo electrónico y la contraseña. Y esto es lo que realmente hicimos en este caso. Entonces aquí, cuando implementamos el producto o la función add to card que nos lleva al envío, también dijimos eso aquí mismo, si vemos Así que si estamos comprobando si el usuario está registrado o no, si este es el caso, entonces estamos actualizando el orden del usuario. De lo contrario, solo vamos a actualizar el artículo específico en este orden. Por supuesto, ahora voy a ver si el usuario o la dirección de usuario está disponible. Si no, voy a renderizar a esta página de envíos como dijimos. Por supuesto, si tenemos la información del usuario, solo voy a seguir adelante e ir a la página web de Realizar Pedido. Ahora bien, esta es una idea general sobre lo que vamos a hacer. Pero claro, sólo vamos a entrar en los detalles, y por supuesto, vamos a entenderlo mejor mientras estamos trabajando en ello. Todo bien. Lo que estoy pensando ahora es crear la página de inicio de sesión fallar, ya que tenemos el registro y aún no tenemos el inicio de sesión, el inicio de sesión falla. Lo que voy a hacer es crear login fail aquí mismo, y esto va a estar bien este es el archivo EJS, y aquí es donde vamos a ser redirigidos si sucede algo mal con nuestro inicio de sesión Lo que vamos a hacer es que primero vamos a incluir el encabezado Así de parciales. Y luego vamos a comenzar con el fluido del contenedor. Entonces voy a crear la fila, que sería centro de texto principalmente con algún relleno y la columna será para medio a las tres. Creo que estamos bien. El segundo será de seis. Y en este caso, voy a escribir ups y seguido de un párrafo de plomo de clase y diciendo que su correo electrónico o contraseña están equivocados. Pero eso es básicamente. Ahora vamos a pedirle que vuelva a intentarlo. Y voy a empezar por crear el formulario real para volver a intentarlo. Esta forma nos llevará al seno n. Vamos a crearlo más adelante, y el método será como de costumbre post. Ahora, empecemos a trabajar con este formulario. Voy a crear el diálogo modelo. Estos son de. Voy a crear el contenido del modelo. Voy a comenzar con la cabecera del modelo. Bien. Entonces eso es todo, básicamente, ahora podemos colocar nuestro encabezado. Voy a escribir sine n. Así que esto va a ser modelado. Título. Voy a escribir letrero seguido de un botón con el botón tipo. La clase será BTN, cerca, y claro, lo que voy a hacer es despedir esto y la vamos a usar más tarde Esta falta y será igual a modelo. En este caso, lo que vamos a hacer es seguir creando el cuerpo del modelo. Y claro, voy a crear el grupo formulario por Y dos. Y claro, voy a empezar con la etiqueta. Por lo que esta etiqueta será para correo electrónico y la clase sería etiqueta dirección de correo electrónico. Y luego lo seguiré por el tipo mad, y por supuesto, algunas clases como el control de formas. Voy a tener y dos, P dos y entrada como clases. El nombre será principalmente nombre de usuario. Ahora, después de eso, voy a crear otro grupo de formularios que sea para la contraseña. Voy a seguir adelante y copiar esto. Eso es copiarlo y pegarlo aquí mismo. No obstante, aquí tenemos para contraseña, voy a escribir contraseña. Y el tipo también será contraseña así como el nombre. Bien. Entonces eso es todo principalmente. Así es como podemos crear la dirección de correo electrónico y la contraseña. Así que sigamos adelante y visualicemos aquí mismo. Supongamos que cometí un error al iniciar sesión. Me llevará a esta página donde tengo dirección de correo electrónico de Ops, contraseña, me equivocaré. Inténtalo de nuevo, tenemos el letrero, tenemos la dirección de correo electrónico y la contraseña junto al botón de inicio de sesión aquí mismo. Así que vamos a crearlo ahí abajo. Lo que vamos a hacer ahora es crear el pie de página del modelo y voy a justificar el contenido. Inicio. En este caso, voy a crear el botón que vamos a enviar, y la clase será T N. Tal vez agreguemos algo de estilo, como el color de fondo. Lo haré me gusta el sclorthree 18f5, ocho F cinco, y voy a Eso es, básicamente. Ahora si vuelvo, como podemos ver, esta es nuestra página, y esto nos redirigirá a como dijimos, este seno en forma o acción de inicio de sesión que vamos a crear más adelante en el apto JS. Este es nuestro fallo de entrada. Volvamos a nuestro apto JS y continuemos nuestro trabajo aquí. Ahora en el archivo apto, lo que vamos a hacer es crear la función de inicio de sesión, y en este caso, déjame crearla justo después justo debajo de esta. Lo que vamos a hacer es crear el post apto, firmar, y lo que vamos a hacer es crear las funciones como de costumbre, y yo voy a crear el usuario. En este caso, el usuario estará en U usuario Bien. Abramos estos, y el nombre de usuario se solicitará por nombre de usuario. Como decíamos, ahora, obtuvimos el nombre de usuario del usuario del cuerpo de la solicitud, y lo que vamos a hacer es verificar si este usuario está iniciando sesión. Entonces, ¿cómo se hace eso? Solicitamos iniciar sesión. Ingresamos al usuario que creamos, y creamos la función con el error. Si hay un error, simplemente cierre la sesión, lo contrario, vamos a comprobarlo. Si el pasaporte está autenticado, entonces estamos bien. De lo contrario, necesitamos redirigirlo al campo de inicio de sesión que acabamos de crear antes. Entonces, ¿cómo se hace eso? Entonces escribimos pasaporte auténtico ocho auténtico ocho y vamos a abrir. Vamos a decir que el fracaso redirecciona dos, vamos a redirigirlo al signo fallar. Esta es otra función que vamos a crear más adelante, y esta función solo será responsable renderizar para firmar el archivo DGS fallido En este caso después de crear esta, lo que vamos a hacer es que vamos a seguir teniendo la petición, d y seguida de la función, y esta función simplemente se redirigirá a la página principal Bien. Entonces eso es básicamente. Así es como lo podemos hacer. Ahora lo que vamos a hacer es que vamos a crear la app sine and fail. Entonces como decíamos, si algo anda mal, vamos a ser redirigidos a fase sinusoidal. Entonces, ¿cómo se hace eso? Apt sine y fail como funciones habituales, arriba y arriba y renderizar a seno y fallar. Bien. Entonces tenemos la solicitud de solicitud como de costumbre, y ya terminamos. Así es como lo podemos hacer. En primer lugar, creamos el post apto para iniciar sesión. Y lo que básicamente estamos haciendo es que estamos obteniendo el nombre de usuario del usuario, estamos creando un usuario. Y estamos comprobando. Si este usuario está iniciando sesión ahora mismo, entonces estamos bien. Acabamos de ir a que este usuario está en realidad en nuestra base de datos. Solo podemos ir a la página principal y ajustar el inicio de sesión para cerrar sesión. En este caso, indicando que el usuario está registrado en momento y también puede comprar o agregar a su tarjeta. Si no, si no es así, vamos a redirigirlo a la página web de login fail. Y como se hace eso, vamos a la abdtGT le rendimos a la señal y fallamos vía la señal abd g y fallamos aquí Eso es básicamente. Ahora si volvemos a la casa aquí, y como pueden ver, ahora tenemos diseño y fallamos. Lo que tenemos que hacer ahora es que si realmente creé esto, y supongamos que me inscribí y ya estamos bien. Si vuelvo, por ejemplo, a casa, como pueden ver, estoy registrado, ya tenemos el botón de cerrar sesión y tenemos esta tarjeta. Si presiono en tarjeta, lo que vamos a hacer es que vamos a mostrar esta página web donde el usuario tal vez pueda agregar toda esta información y luego presionar siguiente. Bien. Y claro, vamos a sumar este pago. Por ahora, solo tenemos un pago que es contra reembolso. Si el usuario lo presiona, voy a ser redirigido a esta página donde vamos a tener el orden que tiene el usuario Por ejemplo, acabo de agregar este a mi tarjeta y también puedes agregar esto nuevamente, que pueda volver aquí y luego volver otra vez, por ejemplo, si quieres cambiar su dirección o algo así. Y claro, después de todo esto, también puede retirar o hacer el pedido. Eso es básicamente. Así es como lo podemos hacer. Por supuesto, después de realizar el pedido, lo que vamos a ver las compras aquí mismo y con el botón pendiente, es decir, que indica que este pedido sigue pendiente, aún no se ha recibido, y por supuesto, el total con la fecha y hora del pedido. Entonces con eso dicho, este es el final de este video. En el siguiente video, vamos a implementar todas estas funciones. Son bastante directos. Sin embargo, debemos tener mucho cuidado al crear o trabajar con este tipo de funciones ya que están muy metidas entre sí. Por ejemplo, aquí, tenemos esta dirección de pago y luego vamos a volver a la página web de letreros y así sucesivamente y así sucesivamente. Entonces eso es básicamente, nos vemos en el siguiente video. Bien. 14. Envíar: Hola, y bienvenidos de nuevo. Lo primero que vamos a hacer en este video es aprender cómo podemos cambiar entre el inicio de sesión y el cierre de sesión. Entonces, como podemos ver, siempre que no estemos iniciando sesión, o no nos estemos registrando, podemos ver los dos botones, el registro y el inicio de sesión aquí mismo. Presionemos en iniciar sesión, escribir nuestro correo electrónico. Y luego presiona el botón de inicio de sesión. En este caso, vamos a ver este icono seguido del botón de cerrar sesión. ¿Cómo lo hacemos? Volvamos a los abdominales aquí mismo, y abramos el cabezazo. Este encabezado es parcial, como podemos ver, solo estamos mostrando el registro aquí mismo. Bien. Entonces y le siguió el letrero, claro. Lo que vamos a hacer es crear esto aquí mismo. Entonces digamos. En lugar de solo mostrar el registro, vamos a verificar si el usuario está autenticado o si la solicitud está autenticada, es decir, que el usuario está iniciando sesión o ha iniciado En este caso, no vamos a mostrar el botón de registro. De lo contrario, vamos a mostrar el icono de éste, como decíamos. Bien. Entonces en este caso, hagámoslo aquí mismo. Lo que vamos a hacer es abrir una declaración if, así que si se solicita se autentica, si este es el caso, vamos a hacer algo Y lo que estoy pensando es hacer esto aquí. Entonces lo que vamos a hacer es verificar si el usuario de la solicitud no está autenticado Si este es el caso, vamos a mostrar este botón. lo contrario, lo que vamos a hacer es que vamos a mostrar el icono. En este caso, cómo podemos hacer eso, podemos simplemente aquí mismo, abrir otra declaración. Entonces, si se autentica la solicitud. En este caso, lo que vamos a hacer es crear una clase de P x una columna dos, y para grande, voy a hacerla columna grande una. Y abramos. Vamos a abrir la barra de navegación y voy a ponerle nombre Nav item. Y éste, voy a crear un enlace que irá al carrito y lo vamos a usar más tarde. Pero por ahora, vamos a crear el Nank En este, voy a crear el icono que es de bootstrap Voy a conseguir el icono que es un carrito de compras. Bien. Y luego cambiemos el color a blanco, y por supuesto, este artículo quedará vacío. Lo que vamos a hacer aquí es simplemente cerrar esta por ahora, y vamos a continuar con el inicio de sesión. Lo que acabamos de hacer aquí es que comprobamos si el usuario o la solicitud está autenticada, así que si el usuario está conectado Si este es el caso, vamos a mostrar éste. De lo contrario, aquí mismo vamos a mostrar el cartel. Vamos a hacer exactamente lo mismo con el inicio de sesión. Aquí, vamos a comprobar si el usuario o la solicitud está autenticada. Vamos a mostrar el letrero si este no es el caso y el cierre de sesión, si este es el caso. ¿Cómo se hace eso? Como antes, sólo voy a intentar si petición que esté autenticada. Lo que voy a hacer es abrirme aquí mismo y cerrar aquí. Voy a copiar esto o tal vez pueda escribir aquí L, por ejemplo, volver a abrir. Y luego ciérrala aquí mismo. Entonces creo que eso tendría sentido. Entonces lo que estamos diciendo aquí si la solicitud está autenticada, necesitamos mostrar algo, y si no, vamos a mostrar inicio de sesión Entonces voy a copiar todo esto, pegarlo de nuevo aquí mismo y cambiar el inicio de sesión para cerrar sesión. Entonces como podemos ver, ahora si volvemos, clase se actualiza, ahora se inicia sesión, así se autentica la solicitud Es verdad. Vamos a mostrar este seguido del patrón de cierre de sesión. Ahora bien, si pulsas en cerrar sesión, vamos a hacer algo que va a hacer retroceder o hacer que regresemos a la página principal junto la solicitud que se autentica para que sea igual a falsa ¿Cómo se hace eso? Volvamos y hagámoslo en el ab como antes. Lo que vamos a hacer es sacar la señal que acabamos de crear aquí como podemos ver. Tenemos la señal de salida. Lo que vamos a hacer es que vamos a dejarlo ir a la señal de salida Aquí. Entonces, ¿cómo se hace eso? Nosotros simplemente escribimos sine out. Por supuesto, lo que le vamos a hacer a éste es ir a firmar. Estamos sacando el letrero aquí. Volvamos al apto JS y lo arreglemos aquí mismo. Vamos a sacar la señal. Esto es sine out, y luego vamos a crear la función como de costumbre, arriba y arriba y renderizar el seno en fail y request request. O tal vez lo siento, aquí tenemos que no rendirle a la señal en fallar. Vamos a ir a la página principal en lugar de fallar el inicio de sesión porque solo queríamos cerrar sesión, y por supuesto, cómo se desregistra, simplemente escribimos request out. Y entonces simplemente vamos a ser redirigidos a la página principal redirigiéndonos a esta anterior y nos llevará de vuelta a la página principal Entonces ahora con eso dicho, podemos continuar con nuestra función, esa es la función de tarjeta de envío. Y en este caso, si recuerdas, acabamos de crear esta función y también dijimos que si el usuario solicitado esa dirección dirección es igual a nula. En este caso, esto significa que el usuario aún no ha agregado su dirección, por lo que necesitamos agregarla. Entonces lo que vamos a hacer es que vamos a rendir a la tarjeta de envío aquí mismo y junto a la solicitud y por supuesto, la dirección que es solicitar a ese usuario esa dirección. Entonces eso es básicamente. Así es como lo podemos hacer. Ahora, lo que vamos a hacer es que vamos a ir a la tarjeta de envío y vamos a arreglar la dirección, claro, y luego vamos a pasar a la tarjeta. Ahora bien, si el usuario ya está agregado la dirección, simplemente vamos a ir o renderizar a la página de la tarjeta. Y en este caso, lo que simplemente estamos diciendo es que si el usuario tiene su dirección establecida y todo está funcionando correctamente. No necesitamos ir a esta página, que es la página del carrito de envío. Ese es este, si quieres verlo aquí mismo. Si el usuario, supongamos que queremos ir a Johnson y presionamos sobre Baby Johnson. En este caso, si presiono en agregar a tarjeta, voy a ir todo el camino hasta aquí porque he agregado esta dirección. A pesar de que tenemos vacíos, recuerda que pasamos por el proceso, así que eso significa que agregué la dirección aquí mismo. Si quiero editarlo, puedo volver atrás y editarlo desde aquí. Todo bien. Entonces lo que vamos a hacer ahora es que vamos a conseguir este envío. Entonces, ¿cómo hacemos eso? Vamos a conseguir En el envío y junto a la función drag seguido por el render. Entonces vamos a ir a la tarjeta de envío y por supuesto, vamos a darle seguimiento con la solicitud junto a la dirección que tenemos solicita a ese usuario esa dirección, y estamos bien. Entonces así es como lo podemos hacer. Ahora, lo que vamos a hacer es que vamos a ir al pago, y en este caso, como dijimos antes, así que si estamos en el envío aquí mismo y estamos bien presionamos a continuación, queremos ir al método de pago, y en este caso, vamos crear la función para este pago. Entonces para hacerlo, simplemente voy a escribir el pago, y claro, voy a subir y arrastrar como de costumbre, y voy a rendir ahora la tarjeta de pago GS necesito HS y solo tecleé tarjeta de pago y estamos bien. Ya que solo tenemos un método de pago, realmente no necesitamos llevarlo con nosotros. Sabemos que esto es contrareembolso, así que solo llevamos la solicitud con nosotros. Bien. Ahora, después de recibir el pago, también podemos trabajar con el método post de este pago. Entonces, ¿cómo se hace eso? Todas estas funciones van a ser implementadas en un poco. Pero por ahora, vamos a escribirlos, y por supuesto, vamos a discutirlos a detalle después. Por lo que el método de pago postal será función, rojos y abrir estos. Vamos a tomar la información que obtuvimos de la función de envío o del método de envío. Entonces los voy a almacenar en constante. Así que solicita el número de punto del cuerpo. Bien. Constante agregar igual solicitud cuerpo punto dirección constante Ciudad solicitud a por ciudad. Y el ID igual a solicitar al usuario dot ID. Y en este caso, lo que vamos a hacer es buscar al usuario por ID y actualizar la siguiente información. En este caso, ¿cómo lo buscas? Entonces voy a teclear usuario para buscar por ID y actualizar. Voy a encontrar por esta identificación que nos sentamos ahora mismo. Y lo que vamos a actualizar es lo siguiente. Entonces, ¿cómo actualizamos o cómo configuramos realmente algo que no está disponible para nosotros por ahora Podemos simplemente escribir conjunto, luego abrir y vamos a cambiar la dirección esa dirección, ir a hacerla igual a la dirección que tenemos, va a cambiar la dirección sea igual al número de teléfono y dirección ciudad sea igual a ciudad. Entonces eso es todo principalmente ahora, vamos a simplemente devolver la función. Entonces, si tenemos una red, vamos a hacerlo así que si tenemos un error, vamos a simplemente cerrarla. De lo contrario, solo vamos a registrar el no error es No. Error y seguido la dirección de usuario que acabamos obtener indicando que todo funcionó bien, y esta es la dirección que obtuvimos y guardamos en nuestro usuario. Entonces si quieres asegurarte que esta es la forma correcta podemos ir al usuario Y como podemos ver dentro de este usuario, tenemos el nombre de usuario y los pedidos. Por supuesto, por ahora, no tenemos la dirección. Sin embargo, lo tenemos en nuestro esquema aquí mismo. Entonces como dijimos, este es el esquema del usuario. Tenemos algo que se llama dirección y dentro de esta dirección, tenemos la ciudad ADD R S y el número de teléfono. Y esto es lo que hicimos. Acabamos de crear esta dirección y agregamos todas estas a esta dirección específica. Bien. Entonces eso es básicamente. Ahora vayamos todo el camino de regreso hasta el fondo. Ahora, lo que vamos a hacer es ir a las páginas página por página, empezando por la tarjeta de envío, y vamos a comprobarlo. Supongamos que ahora estamos en esta tarjeta de envío. Lo que vamos a hacer es desplazarnos todo el camino hacia abajo. Como podemos ver aquí, necesitamos ajustar este formulario y esto nos llevará al pago, que es el método post. ¿Qué estamos haciendo aquí? En primer lugar, estamos agregando esta función aquí mismo. Almacenamos todas las direcciones. Entonces tenemos la dirección de usuario ciudad y número de teléfono. Y cada vez que presionemos a continuación, vamos a ser prestados a la página de pago o a la página de pago. En este caso, antes de ser renderizado a éste, voy a ir a esta acción, que es el pago con el método post, y esto es básicamente. Voy a tomar toda la información que acabo de recibir. Encuentre al usuario por el ID y almacene toda la información. Y luego claro, voy a rendir a la tarjeta de pago. Bien. Y esto es básicamente. Ahora, estamos bien. En el siguiente video, vamos a continuar con la función de envío y almacenamiento. Entonces nos vemos. Bien. 15. Orden de lugar: Bien. Hola, y bienvenidos de nuevo. En este video, vamos a continuar nuestra discusión y nuestra implementación de esta función específica. Es decir, por ejemplo, si presiono en Johnson y elijo uno de los productos, y agregué a mi tarjeta. Como podemos ver, llegamos a esta página donde vamos a mostrar todos los pedidos y por supuesto, el patrón de orden de lugar aquí mismo. Por supuesto, queremos agregar también la dirección y el pago. Entonces para hacer eso, déjame regresar y comencemos creando el método post de la función card. Como decíamos, lo primero a lo que nos van a rendir es a la tarjeta de envío. Y en este caso, si ya agregamos el envío o la asignación del pedido, iremos así que realmente no queremos ir a este, podemos ir directamente a la tarjeta de pedido de lugar o al archivo de Pedido de Lugar, y en este caso, esto aparecerá aquí frente a nosotros. Como ya agregamos la dirección, ahora está vacía, pero ya la agregamos en el video anterior, vamos a ser renderizados a esta página automáticamente. Por ejemplo, si me doy de baja, volvamos a inscribirnos y llamémoslo morir. Y vamos a cambiar de cabeza en example.com pasar a. y si hago clic en inscribirme, voy a ser renderizado a esta Ahora bien, si voy y elijo uno de los productos, como pueden ver, aquí mismo, así que si elijo Baby Johnson, y agregué a mi tarjeta voy a ser renderizado al envío en lugar del pedido de lugar ya que aún no agregué mi dirección completa. Entonces, ¿cómo hacemos eso? Lo primero que vamos a notar es que siempre que haya una tarjeta de envío siempre que estemos en la página del producto. Supongamos que estoy justo aquí en esta página del producto y presiono el botón agregar a la tarjeta aquí mismo. Vamos a ser rendidos a éste. Esta es la forma. Vamos a ser prestados al método de envío. Permítanme simplemente borrar estos. Bien. Entonces no los necesitamos. Todos ellos. Ahora si voy a los abs, y como podemos ver si busco el envío. Esta es la función de envío que acabamos de crear en el video anterior, y la tenemos aquí mismo. Estamos diciendo que si la longitud del pedido es cero, vamos a o el pedido o el checkout es falso en este caso, vamos a hacer otra cosa. De lo contrario, vamos a agregar este pedido al artículo específico o al cuadro de pedidos específicos. Por supuesto, si no, vamos a encontrar al usuario por su ID, y actualizar el orden en este caso. Esto es lo que estamos haciendo aquí mismo, y luego por supuesto, vamos a renderizar a la página siguiente. Estamos diciendo que si la dirección es nula, así que el usuario aún no ha ingresado ninguna dirección, vamos a renderizar a la tarjeta de envío. De lo contrario, vamos a renderizar a la tarjeta aquí mismo. Ahora, supongamos que estamos en la tarjeta de envío. Si vuelvo a la tarjeta de envío, y veamos, tenemos el botón que es enviar y nuestro formulario es a acción a pago, en realidad. Ahora si vuelvo y tecleo pago, ya creamos los dos métodos. El primero. Es el método post que consiste en encontrar la identificación del usuario, y por supuesto, actualizar toda esta información y luego renderizarla a la tarjeta de pago. Ahora bien, si vamos a la tarjeta de pago como podemos ver aquí mismo, podemos ver el método de pago que por ahora solo es contra reembolso. No obstante, tenemos el botón que es de tipo enviar y nuestro formulario sigue vacío. Entonces ahora podemos actualizar este formulario, y por supuesto, trabajar en este método más adelante. Entonces por ejemplo aquí, voy a crear una función que sea card y el método siempre será post. Ahora, si vuelvo, vamos a crear nuestro método aquí mismo. Entonces app post. Vamos a publicar la tarjeta y funcionar como de costumbre, s por supuesto, vamos a encontrar por identificación, y vamos a empujar esta identificación a través. Así que vamos a encontrar por este ID, y por supuesto, vamos a upen la función Entonces, si tenemos un error, vamos a cerrar la sesión. De lo contrario, vamos a tomar los pedidos del usuario. Voy a ponerle órdenes. Entonces el usuario ordena, y voy a tomar el primer pedido, ese es el que agregué recientemente, y luego vamos a hacer algo. Lo que básicamente estoy haciendo aquí es que tenemos nuestra lista, supongamos que está arriba y en realidad la MG DB vamos a verla en la base de datos. Entonces lo que básicamente estamos haciendo es que tenemos al usuario que ordenó algo, y los pedidos están en realidad en una lista de pedidos. Entonces supongamos que pedí hoy. Tengo un pedido hoy, y si ordeno mañana, tengo un orden completamente diferente que es diferente al de hoy. No obstante, ambos están en una lista de órdenes. Entonces ahora si podemos ver aquí, vamos a abrir la última, y esta es la base de datos m a edge. Vamos a abrirlo, como podemos ver tenemos a los usuarios. Por ahora, por ejemplo, tenemos tres usuarios, y tenemos pedidos aquí mismo. Como podemos ver si presiono sobre esto, tengo cero pedidos por ahora para este primer usuario. Ahora si me desplazo hacia abajo, podemos ver éste, creo que tenemos algunas órdenes, bien. Entonces tenemos el número de pedido cero, Tenemos el pedido número uno, y tenemos el número de pedido dos. Como decíamos, lo primero que vamos a conseguir es lo recibido, lo cual es falso. Aún no lo actualizamos. El checkout es falso. Este es el número de pedido, y tenemos los artículos dentro de este pedido. Como podemos ver dentro de este ítem, tenemos una matriz de objetos. Entonces, el primer objeto es en realidad el ID del objeto , la imagen, el título, el precio y la cantidad. Bien. Entonces así es como podemos conseguirlos. Entonces lo que básicamente estoy haciendo es que cada vez que el usuario esté presionando el botón de realizar pedido, será redirigido a la tarjeta Y en este caso, lo que vamos a hacer es mostrar el último pedido que está recibiendo. Entonces, por ejemplo, si tiene tres órdenes como el 012, vamos a exhibir el último, esto es todo Entonces este es el último que el usuario ha ordenado. Y en este caso, vamos a hacer eso simplemente diciendo que la orden son las órdenes a cero. Ahora, lo que vamos a hacer es volver a verificar si la dirección no es nula, solo para asegurarnos así en este caso, no es nula. Y si este es el caso, vamos a renderizar de nuevo al envío y la solicitud será como de costumbre, junto a la dirección. Entonces eso es básicamente. Ahora bien, este no es el caso. Lo que vamos a hacer es renderizar al archivo de orden de lugar. Entonces, ¿cómo hacemos eso? Simplemente renderizamos el orden de lugar y necesitamos llevar con nosotros los parámetros que necesitamos. Entonces en este caso, necesitamos la solicitud, necesitamos los artículos, y es decir que siempre podemos tomar este artículo o acceder a este artículo simplemente tomando este pedido. Entonces este pedido, tenemos el primer artículo o es el primer elemento dentro de la lista de pedidos. Y en este caso, podríamos haber dicho ese pedido o tal vez podamos decir usuarios, los pedidos a cero artículos. Así que simplemente tomamos todos estos y los pusimos afuera y podemos acceder a estos artículos simplemente agregando usuario o artículos, y luego tenemos el pedido real. Entonces lo tomo así y las órdenes como siempre. Entonces eso es básicamente ahora aquí, tenemos una función, así que estamos bien. Ahora, pasemos al orden de lugar. Como podemos ver, tenemos al principio esta barra de progreso, luego si nos desplazamos hacia abajo, tenemos la ciudad y necesitamos cambiar todas estas y hacerlas dinámicas. Por ejemplo, cada vez que el usuario presiona sobre el pedido de lugar, vamos a mostrar su dirección, la ciudad, número de teléfono, y por supuesto, vamos a cambiar estos pedidos aquí mismo. Entonces, si tienes artículos, los vamos a cambiar de acuerdo a los artículos que el usuario haya pedido antes. Bien. Entonces eso es básicamente. Esto es lo que vamos a hacer. Y con eso dicho, este es el final de este video. Lo que hicimos por ahora es que acabamos de tomar toda esta información y agregarla así que supongamos. A ver si agrego algunas cosas aquí mismo. Y pasemos al siguiente contrareembolso. Entonces, lo que básicamente estamos haciendo aquí es que vamos a mostrar toda la información aquí. Entonces lo discutiremos además en el siguiente video, ese es tu proyecto. Y ojalá tengas una idea clara sobre tu tarea y lo que se supone que debes hacer en este proyecto. Entonces espero que hayan disfrutado de esta clase. Espero que haya sido beneficioso. Dicho esto, este es el final de este video. Nos vemos en la siguiente. 16. Proyecto: Hola, y bienvenidos de nuevo. En este video, vamos a discutir el proyecto. Así que recuerda en el video anterior, agregamos todos estos o cerrada esta función de tarjeta que se encarga de renderizarnos al orden de lugar si todo funciona bien. En este caso, lo que vamos a llevar con nosotros es la solicitud, los artículos que el usuario ha pedido, o el pedido real, y los pedidos. Ahora, tu tarea es hacer que esta página se vea así. Como decíamos, obtuvimos toda la información, y por ahora, no va a mostrar los pedidos aquí. Mostrará variables ficticias que acabamos de crear. Lo que vas a hacer es tomar estos pedidos y agregarlos a este pedido aquí mismo. Volviendo al código, si vamos a la orden de lugar aquí mismo, podemos ver que colocamos algunas variables ficticias aquí mismo, y necesitamos cambiarlas a variable real Tu tarea es básicamente crear un bucle de plegado, mirar a través de todos los artículos que el usuario ha pedido, y por supuesto, mostrarlos aquí mismo, y luego tal vez calcular el total de estos artículos, mostrar aquí el artículo con tal vez su precio, luego mostrar el total aquí mismo. Por supuesto, como dijimos, supongamos que la entrega gratuita para pedido, tal vez menos de $50. Entonces quieres computar el total de este orden. Si son menos de 50, vas a escribir entrega gratis. Por supuesto, si son menos de 50, vas a escribir tal vez $10 para entrega, y si es superior a 50, vas a escribir gratis. Por ahora, esto es, y claro, solo tenemos una tarea más que es el método de pago. Vamos Tal vez, por supuesto, siempre pueda volver de este botón agregado, y claro, si presiono aquí a continuación, voy a ser renderizado a este pago. Entonces lo que vamos a hacer aquí también es que vas a ir a esta página y hacer que este siguiente botón no se muestre como este ejemplo aquí. Ahora bien, si presiono en este contrareembolso, ahora puedo acceder a este siguiente botón para ir a la página de realizar pedido. La primera tarea es simplemente mostrar toda la información que obtuvimos de la función app o la función post que creamos anteriormente y mostrarlos en esta página, como el resumen del pedido, los pedidos, y por supuesto, la segunda tarea es agregar la función de pago que es mostrar el siguiente botón una vez presionamos el contrareembolso. Ahora la última tarea de tu proyecto es crear este dit o hacer la función de este agregado. En este caso, siempre que presionemos sobre esta función agregada o este botón agregado, vamos a ser redirigidos a la página de envío Esta es una tarea sencilla que puedes hacer con un par de líneas de códigos, y eso es todo para todo este proyecto. Creamos todos los componentes que son útiles y que son esenciales para nosotros. Dicho esto, este es el final de este video. No olvides dejar este proyecto en la sección de proyectos, para que pueda echarle un vistazo y darte mi opinión. Dicho esto, este es este video. Espero que hayas disfrutado de esta clase, y no puedo esperar a verte en más clases.