{"id":124667,"date":"2022-11-16T17:44:49","date_gmt":"2022-11-16T16:44:49","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-shopping-cart\/"},"modified":"2025-02-03T16:44:53","modified_gmt":"2025-02-03T15:44:53","slug":"how-to-create-a-shopping-cart","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-prototipar-un-carrito-de-compra-simple","title":{"rendered":"C\u00f3mo crear el prototipo de un carrito de la compra sencillo"},"content":{"rendered":"<p>Aqu\u00ed aprender\u00e1s a a\u00f1adir y eliminar art\u00edculos de una cesta de la compra.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73323763\/index.html\" width=\"820px\" height=\"465px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><b>Ver<\/b><\/h3>\n<ul>\n<li>Ve a la paleta Maestros de Datos, crea un nuevo \u00abMaestro de Datos\u00bb, y n\u00f3mbralo \u00abTienda\u00bb, crea tres atributos: \u00abNombre\u00bb, \u00abPrecio\u00bb y \u00abTotal\u00bb, y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-1.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en el \u00abMaestro de datos\u00bb que acabas de crear y selecciona \u00abVer y editar registros\u00bb, escribe all\u00ed tus datos de ejemplo y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-2.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li>Selecciona una \u00abLista de datos\u00bb de la secci\u00f3n \u00abContenido din\u00e1mico\u00bb y col\u00f3cala en el lienzo; se habilitar\u00e1 la ventana \u00abNueva lista de datos\u00bb; dale a tu lista el nombre \u00abElementos\u00bb, a continuaci\u00f3n elige el \u00abMaestro de datos\u00bb que has creado y selecciona todos los atributos.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shopping-cart-create-data-list.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shopping-cart-create-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shopping-cart-create-data-list.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/source><\/video><\/li>\n<\/ul>\n<ul>\n<li>En la parte superior del lienzo coloca dos \u00abTexto\u00bb y escribe \u00ab$\u00bb en ambos. Al lado, pon un \u00abCampo de texto de entrada\u00bb, y dos botones. En el primer bot\u00f3n escribe \u00abA\u00f1adir al carrito\u00bb, y en el segundo escribe \u00abSoltar\u00bb.  <\/li>\n<li>En las celdas de la \u00abFila actual\u00bb, mientras pulsas Comando (Mac) \/ Control (Windows), arrastra los textos \u00ab$\u00bb junto a las entradas [Store .Price] y [Store .Total]. De la celda que contiene la entrada [Store .Quantity], elimina esta entrada y coloca el \u00abCampo de texto de entrada\u00bb y el bot\u00f3n \u00abA\u00f1adir al carrito\u00bb dentro de la celda. Por \u00faltimo, coloca el bot\u00f3n \u00abSoltar\u00bb dentro de la celda de la entrada [Store .Total].<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shopping-cart-create-data-list.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-place-elements-into-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/shopping-cart-create-data-list.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/source><\/video>  <\/li>\n<li>Debajo de tu \u00abLista de datos\u00bb, coloca dos textos y escribe \u00ab$\u00bb y \u00abTotal\u00bb; a continuaci\u00f3n, coloca un segundo texto y escribe \u00ab0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-total.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<\/ul>\n<h3><strong>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n \u00abA\u00f1adir al carrito\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-5.png\" alt=\"\" width=\"789\" height=\"282\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en la entrada [Store .Total].<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.&nbsp;<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-6.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">En el primer campo del constructor, arrastra el \u00abprecio.tienda\u00bb, a continuaci\u00f3n la funci\u00f3n \u00abX\u00bb para multiplicar, y por \u00faltimo el \u00abCampo de texto de entrada\u00bb de la columna \u00abCantidad\u00bb. Haz clic en \u00abAceptar\u00bb y \u00abOk\u00bb para terminar de crear tu evento. <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767995149\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Con el bot\u00f3n \u00abA\u00f1adir a la cesta\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para crear un nuevo evento.<br \/>\n<span data-preserver-spaces=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-8.png\" alt=\"\" width=\"789\" height=\"282\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abAcci\u00f3n maestra de datos\u00bb, y haz clic en \u00abModificar\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-9.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">El constructor de expresiones aparecer\u00e1 con la expresi\u00f3n \u00abModificar\u00bb por defecto. Arrastra la \u00abFila actual\u00bb en el primer campo, y en el \u00faltimo campo, arrastra la entrada <wpcodeself wptype=\"\" wpml_attr_0=\"\">. Pulsa \u00abOk\u00bb y \u00abAceptar\u00bb para terminar de crear tu expresi\u00f3n.  <\/span><\/span><\/li>\n<\/ol>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767995602\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Con el bot\u00f3n \u00abA\u00f1adir a la cesta\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para crear un nuevo evento.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-11.png\" alt=\"\" width=\"789\" height=\"282\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li>En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb, y selecciona el \u00ab0\u00bb junto al \u00abTotal\u00bb, debajo de tu \u00abLista de datos\u00bb.<\/li>\n<li><span data-preserver-spaces=\"true\">Haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para \u00abA\u00f1adir expresi\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-12.png\" alt=\"\" width=\"789\" height=\"282\"><\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Arrastra la funci\u00f3n \u00abSuma\u00bb. En el primer campo, coloca el \u00abMaestro de datos\u00bb de la pesta\u00f1a Maestros de datos, y en el segundo campo, coloca el campo \u00abTotal\u00bb del \u00abMaestro de datos\u00bb. Haz clic en \u00abAceptar\u00bb y \u00abOk\u00bb para terminar de crear el evento.  <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767996142\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n \u00abSoltar\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-14.png\" alt=\"\" width=\"789\" height=\"282\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir Acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en la entrada [Store .Total], para el valor haz clic en el bot\u00f3n de opci\u00f3n \u00abFijo\u00bb&nbsp; y escribe \u00ab0\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-15.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<\/ol>\n<p>Con el bot\u00f3n \u00abSoltar\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para crear un nuevo evento.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abAcci\u00f3n maestra de datos\u00bb, y haz clic en \u00abModificar\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-9.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li><span data-preserver-spaces=\"true\">El constructor de expresiones aparecer\u00e1 con la expresi\u00f3n \u00abModificar\u00bb por defecto. Arrastra la \u00abFila actual\u00bb en el primer campo, y en el \u00faltimo campo, arrastra la entrada <wpcodeself wptype=\"\" wpml_attr_0=\"\">. Pulsa \u00abOk\u00bb y \u00abAceptar\u00bb para terminar de crear tu expresi\u00f3n.  <\/span><\/li>\n<\/ol>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767996795\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><span data-preserver-spaces=\"true\">Con el bot\u00f3n \u00abSoltar\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en el \u00ab+\u00bb para a\u00f1adir un nuevo evento.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li>En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb, y selecciona el \u00ab0\u00bb junto al \u00abTotal\u00bb, debajo de tu \u00abLista de datos\u00bb.<\/li>\n<li><span data-preserver-spaces=\"true\">Haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para \u00abA\u00f1adir expresi\u00f3n\u00bb<\/span><span data-preserver-spaces=\"true\">.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-18.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<li>Arrastra la funci\u00f3n \u00abSuma\u00bb y desde la pesta\u00f1a Maestros de datos, coloca el maestro de datos \u00abTienda\u00bb en el primer campo, a continuaci\u00f3n, coloca el campo \u00abTotal\u00bb del \u00abMaestro de datos\u00bb. Haz clic en \u00abAceptar\u00bb y \u00abOk\u00bb para terminar de crear el evento.\n<div class=\"embed-container\" style=\"padding-bottom: 60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767997476\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Con el bot\u00f3n \u00abSoltar\u00bb a\u00fan seleccionado, ve a la paleta Eventos y haz clic en \u00ab+\u00bb para a\u00f1adir un evento\u00bb.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Haz clic en \u00abElegir activador\u00bb en el cuadro de di\u00e1logo y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en el \u00abCampo de texto de entrada\u00bb de la columna \u00abCantidad\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Para el valor, haz clic en el bot\u00f3n de opci\u00f3n \u00abFijo\u00bb&nbsp; y escribe \u00ab0\u00bb.<\/span><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70625\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/shoping-cart-20.png\" alt=\"\" width=\"789\" height=\"282\"><\/li>\n<\/ol>\n<p>Simula tu prototipo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed aprender\u00e1s a a\u00f1adir y eliminar art\u00edculos de una cesta de la compra. As\u00ed es como se construye: Ver Ve a la paleta Maestros de Datos,&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8425,8424],"tags":[],"class_list":["post-124667","post","type-post","status-publish","format-standard","hentry","category-logica-negocio","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124667"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124667"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124667\/revisions"}],"predecessor-version":[{"id":126214,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124667\/revisions\/126214"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}