{"id":7665,"date":"2022-01-25T18:42:53","date_gmt":"2022-01-25T18:42:53","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7665"},"modified":"2022-01-25T18:53:03","modified_gmt":"2022-01-25T18:53:03","slug":"eventos-javascript-en-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/","title":{"rendered":"Eventos JavaScript en PrestaShop 1.7"},"content":{"rendered":"<p>Como experto en el desarrollo de m\u00f3dulos para <strong>PrestaShop<\/strong>, me he visto muchas veces en la necesidad de ejecutar funciones para realizar acciones en algunos momentos determinados o lugares donde los eventos que facilita la plataforma me ha ayudado bastante.<\/p>\n<p><strong>PrestaShop<\/strong> suele modificar el DOM despu\u00e9s de ejecutar algunas llamadas Ajax, tales como a\u00f1adir al carrito, cambiar de combinaci\u00f3n, cambiar cantidad en el carrito, etc. y, en algunos casos, algunos clientes nos han pedido necesidades que requieren ejecutar alguna funci\u00f3n espec\u00edfica en el momento de la ejecuci\u00f3n de esos eventos.<\/p>\n<p>En este art\u00edculo vas a descubrir que eventos <strong>JavaScript<\/strong> tiene disponible <strong>PrestaShop<\/strong> y como utilizarlos.<\/p>\n<h2>10 eventos JavaScript que puedes aprovechar en PrestaShop<\/h2>\n<p><strong>PrestaShop<\/strong> env\u00eda varios eventos desde el core.js para que podamos desarrollar c\u00f3digo justo en el momento que se ejecuta alguna acci\u00f3n.<\/p>\n<p>En la siguiente tabla vas a poder ver 10 eventos que puedes aprovechar para enganchar tu c\u00f3digo y ejecutar alguna funci\u00f3n espec\u00edfica.<\/p>\n<p>Ah\u00ed va:<\/p>\n<div class=\"table-responsive\">\n<table class=\"table table-bordered\" border=\"1\">\n<tbody>\n<tr style=\"height: 48px;\">\n<td style=\"width: 16.2799%; height: 48px;\">updateCart<\/td>\n<td style=\"width: 83.7201%; height: 48px;\">En la p\u00e1gina del carrito, cada vez que sucede algo (cambiar la cantidad, eliminar el producto, etc.), el carrito se vuelve a cargar mediante una llamada ajax. Despu\u00e9s de actualizar el carrito, se activa este evento.<\/td>\n<\/tr>\n<tr style=\"height: 48px;\">\n<td style=\"width: 16.2799%; height: 48px;\">updatedAddressForm<\/td>\n<td style=\"width: 83.7201%; height: 48px;\">En el formulario de direcci\u00f3n, alguna entrada activar\u00e1 llamadas ajax para modificar el formulario (como el cambio de pa\u00eds), despu\u00e9s de actualizar el formulario, se activa este evento.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">updateDeliveryForm<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">Durante el pago, si se modifica la direcci\u00f3n de entrega, se activar\u00e1 este evento.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">changedCheckoutStep<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">Cada env\u00edo del paso de pago activar\u00e1 este evento.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">updateProductList<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">En cada p\u00e1gina de la lista de productos (categor\u00eda, resultados de b\u00fasqueda, ca\u00edda de precios, etc.), la lista se actualiza a trav\u00e9s de llamadas ajax si cambia los filtros o las opciones de clasificaci\u00f3n. Cada vez que el DOM se vuelve a cargar con una nueva lista de productos, se activa este evento.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">clickQuickView<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">Si su tema lo maneja, este evento se activar\u00e1 cuando haga clic en el enlace de vista r\u00e1pida.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">updateProduct<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">En la p\u00e1gina del producto, seleccionar una nueva combinaci\u00f3n recargar\u00e1 el DOM a trav\u00e9s de llamadas ajax. Este evento se activar\u00e1 despu\u00e9s de modificar la combinaci\u00f3n, pero antes de la llamada ajax.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">updatedProduct<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">En la p\u00e1gina del producto, seleccionar una nueva combinaci\u00f3n recargar\u00e1 el DOM a trav\u00e9s de llamadas ajax. Despu\u00e9s de la actualizaci\u00f3n, este evento se dispara.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">handleError<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">Este evento se activa despu\u00e9s de un error en la solicitud POST. Tiene eventType como primer par\u00e1metro.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 16.2799%; height: 24px;\">updateFacets<\/td>\n<td style=\"width: 83.7201%; height: 24px;\">En cada p\u00e1gina de la lista de productos (categor\u00eda, resultados de b\u00fasqueda, ca\u00edda de precios, etc.), la lista se actualiza a trav\u00e9s de llamadas ajax si cambia los filtros o las opciones de clasificaci\u00f3n. Cada vez que se recargan las facetas, se activa este evento.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"https:\/\/devdocs.prestashop.com\/1.7\/themes\/reference\/javascript-events\/#dispatched-events\" target=\"_blank\" rel=\"noopener\">Documentaci\u00f3n oficial<\/a><\/p>\n<h2>Ejemplo pr\u00e1ctico<\/h2>\n<p>Ir\u00e9 al grano y pondr\u00e9 un par de ejemplos para que te hagas una idea m\u00e1s t\u00e9cnica:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">prestashop.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'updatedProductList'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.js-product-miniature'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">each<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">find<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'div.product-flag-wishlist'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">appendTo<\/span><span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">find<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'div.thumbnail-container'<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Este c\u00f3digo lo que hace es capturar el evento \u00abupdatedProductList\u00bb para agregar un coraz\u00f3n y algo de l\u00f3gica por encima de las im\u00e1genes del producto en la todas las listas de productos de la tienda <strong>PrestaShop<\/strong>.<\/p>\n<p>Lo utilizo uno de los archivos <strong>JavaScript<\/strong> de nuestro m\u00f3dulo m\u00e1s popular para las <strong>listas de deseo del cliente<\/strong> que puedes ver en detalle en el siguiente enlace:<\/p>\n<p><a href=\"https:\/\/www.jamodules.com\/es\/211-listas-de-deseos-del-cliente.html\" target=\"_blank\" rel=\"noopener\">https:\/\/www.jamodules.com\/es\/211-listas-de-deseos-del-cliente.html<\/a><\/p>\n<p>F\u00edjate en el siguiente c\u00f3digo, mucho m\u00e1s completo que tambi\u00e9n usa este m\u00f3dulo de lista de deseos:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">prestashop.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'updatedProduct'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> \n    <span class=\"kw2\">var<\/span> id_product <span class=\"sy0\">=<\/span> $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#product_page_product_id'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>logged <span class=\"sy0\">!=<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>added <span class=\"sy0\">==<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            favorite_icon <span class=\"sy0\">=<\/span> <span class=\"st0\">'favorite'<\/span><span class=\"sy0\">;<\/span>\n            favorite_title <span class=\"sy0\">=<\/span> ADD_TO_MY_WISHLIST_TEXT_BUTTON<span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n            favorite_icon <span class=\"sy0\">=<\/span> <span class=\"st0\">'favorite_border'<\/span><span class=\"sy0\">;<\/span>\n            favorite_title <span class=\"sy0\">=<\/span> ADD_TO_MY_WISHLIST_TEXT_BUTTON<span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#product .product-flags:first-child'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;li class=&quot;product-flag wishlist&quot;&gt;&lt;a href=&quot;#wishlist_form_'<\/span><span class=\"sy0\">+<\/span>id_product<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; data=&quot;'<\/span><span class=\"sy0\">+<\/span>id_product<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; class=&quot;open_wishlist_form product_to_wishlist_'<\/span><span class=\"sy0\">+<\/span>id_product<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; title=&quot;'<\/span><span class=\"sy0\">+<\/span>favorite_title<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;&gt;&lt;i class=&quot;material-icons '<\/span><span class=\"sy0\">+<\/span>favorite_icon<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;&gt;'<\/span><span class=\"sy0\">+<\/span>favorite_icon<span class=\"sy0\">+<\/span><span class=\"st0\">'&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#product .product-flags:first-child'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;li class=&quot;product-flag wishlist&quot;&gt;&lt;a href=&quot;'<\/span><span class=\"sy0\">+<\/span>auth_controller_url<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; data=&quot;'<\/span><span class=\"sy0\">+<\/span>id_product<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; title=&quot;'<\/span><span class=\"sy0\">+<\/span>favorite_title<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;&gt;&lt;i class=&quot;material-icons '<\/span><span class=\"sy0\">+<\/span>favorite_icon<span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;&gt;favorite_border&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    <span class=\"co1\">\/\/si tiene atributos<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>e.<span class=\"me1\">id_product_attribute<\/span> <span class=\"sy0\">!=<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input#idCombination&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">length<\/span> <span class=\"sy0\">==<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;input type=&quot;hidden&quot; name=&quot;idCombination&quot; id=&quot;idCombination&quot; value=&quot;'<\/span><span class=\"sy0\">+<\/span>e.<span class=\"me1\">id_product_attribute<\/span><span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;&gt;'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">appendTo<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'.product-variants'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input#idCombination&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span>e.<span class=\"me1\">id_product_attribute<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>El c\u00f3digo anterior se ubica en la p\u00e1gina del producto y, en este caso, cada vez que la informaci\u00f3n del producto se actualiza, se recoge el identificador del producto, se observa si el usuario est\u00e1 logeado para a\u00f1adir el coraz\u00f3n que va a permitir a\u00f1adir o eliminar el producto de la lista de deseos.<\/p>\n<p>Si el producto tiene atributos, actualizamos la combinaci\u00f3n elegida ya que los productos pueden ser a\u00f1adidos a la lista de deseos con la combinaci\u00f3n deseada.<\/p>\n<p>Como regalo, te voy a ense\u00f1ar otro c\u00f3digo muy \u00fatil para capturar el evento que actualiza el carrito de compras.<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">prestashop.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'updateCart'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    setTimeout<span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>e.<span class=\"me1\">resp<\/span>.<span class=\"me1\">cart<\/span>.<span class=\"me1\">subtotals<\/span>.<span class=\"me1\">products<\/span>.<span class=\"me1\">amount<\/span> <span class=\"sy0\">&lt;<\/span> JMINIMUMCART_VALUE<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.js-cart-detailed-actions a'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">hide<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#threshold'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">show<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.js-cart-detailed-actions a'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">show<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#threshold'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">hide<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span>3000<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>\u00bfQu\u00e9 hace este c\u00f3digo?<\/p>\n<p>Si te ubicas en el carrito de la compra, cada vez que el carrito se actualice, ya sea para incrementar, decrementar o eliminar un producto del carrito, esperamos 3 segundos a que <strong>PrestaShop<\/strong> cargue el DOM para revisar el importe total del carrito y si este es menor a una cantidad fijada, por ejemplo 50\u20ac, se oculta el bot\u00f3n de \u00abFinalizar compra\u00bb y se muestra un mensaje de umbral m\u00ednimo de venta, como por ejemplo: Para finalizar tu compra, tu pedido debe ser superior a 50\u20ac.<\/p>\n<p>De esta forma, evitamos que el cliente pueda realizar compras inferiores\u00a0 a 50\u20ac.<\/p>\n<p>L\u00f3gicamente, si el importe es superior a 50\u20ac, el bot\u00f3n de \u00abFinalizar compra\u00bb se habilita y el mensaje de umbral de venta m\u00ednima desaparece.<\/p>\n<p>Todo esto es din\u00e1mico ya que a medida que vas incrementando o decrementando las cantidades de la cesta, este c\u00f3digo se ejecutar\u00e1 y har\u00e1 la comprobaci\u00f3n para habilitar o no el bot\u00f3n de \u00abFinalizar compra\u00bb.<\/p>\n<p>Espero que os haya servido.<\/p>\n<p>Si necesit\u00e1is un desarrollo similar dentro de <strong>PrestaShop<\/strong> y no dais con la tecla, solo ten\u00e9is que enviar un mensaje con los m\u00e1ximos detalles de vuestra necesidad y podemos estudiar que coste podr\u00eda tener lo que necesit\u00e9is implementar.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/contacto\/\" target=\"_blank\" rel=\"noopener\">Contactar ahora<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.<\/p>\n","protected":false},"author":1,"featured_media":7666,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,21],"tags":[167],"class_list":["post-7665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-prestashop","tag-eventos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-25T18:42:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-25T18:53:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/\",\"name\":\"Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png\",\"datePublished\":\"2022-01-25T18:42:53+00:00\",\"dateModified\":\"2022-01-25T18:53:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png\",\"width\":250,\"height\":250,\"caption\":\"Eventos JavaScript en PrestaShop 1.7\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Eventos JavaScript en PrestaShop 1.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog","description":"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog","og_description":"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-01-25T18:42:53+00:00","article_modified_time":"2022-01-25T18:53:03+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/","url":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/","name":"Eventos JavaScript en PrestaShop 1.7 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png","datePublished":"2022-01-25T18:42:53+00:00","dateModified":"2022-01-25T18:53:03+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre que eventos JavaScript te facilita PrestaShop para agregar funcionalidad adicional despu\u00e9s de la ejecuci\u00f3n de los mismos a trav\u00e9s de m\u00f3dulos o modificaciones espec\u00edficas.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/eventos-javascript-en-prestashop-1-7.png","width":250,"height":250,"caption":"Eventos JavaScript en PrestaShop 1.7"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/eventos-javascript-en-prestashop-1-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Eventos JavaScript en PrestaShop 1.7"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7665"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7665\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7666"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}