{"id":5541,"date":"2024-04-09T00:20:16","date_gmt":"2024-04-09T00:20:16","guid":{"rendered":"https:\/\/graphica.pe\/automatically-update-cart\/"},"modified":"2024-07-11T20:55:37","modified_gmt":"2024-07-11T20:55:37","slug":"automatically-update-cart","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/automatically-update-cart\/","title":{"rendered":"Automatically update cart"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5541\" class=\"elementor elementor-5541 elementor-5097\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-578a333 e-flex e-con-boxed e-con e-parent\" data-id=\"578a333\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63123b1 elementor-widget elementor-widget-text-editor\" data-id=\"63123b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><strong>What we will achieve:<\/strong><\/h3>\n<p>We are going to add the + and &#8211; buttons on each side of the input number in both the Product Detail and the Shopping Cart:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-5098 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/Group-667.webp\" alt=\"Add buttons to numerical input\" width=\"599\" height=\"233\" srcset=\"https:\/\/graphica.pe\/wp-content\/uploads\/Group-667.webp 599w, https:\/\/graphica.pe\/wp-content\/uploads\/Group-667-300x117.webp 300w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/><\/p>\n<p>And in the shopping cart we will add the function for the automatic update:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5134 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/carrito-update-automatico.webp\" alt=\"\" width=\"841\" height=\"245\" srcset=\"https:\/\/graphica.pe\/wp-content\/uploads\/carrito-update-automatico.webp 841w, https:\/\/graphica.pe\/wp-content\/uploads\/carrito-update-automatico-300x87.webp 300w, https:\/\/graphica.pe\/wp-content\/uploads\/carrito-update-automatico-768x224.webp 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/p>\n<h3> <\/h3>\n<h3><strong>How do we do it?<\/strong><\/h3>\n<p>To achieve this we are going to add the following script in our custom.js (or the javascript sheet you manage in your child theme):<\/p>\n<blockquote>\n<p><em>The <strong>.pi-addCart<\/strong> class is the class we put on the Elementor widget in the Product Detail template. You can replace the class with the class of your choice.  <\/em><\/p>\n<\/blockquote>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfdb877 elementor-widget elementor-widget-code-highlight\" data-id=\"cfdb877\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>(function($) {\n\t$(document).ready(function() {\n\n\/\/ **************************************************\n\/\/ A\u00d1ADIR + Y - EN QUANTITY\n\/\/ **************************************************\n\n\tif ($('.pi-addCart').length || $('.shop_table').length) {\n\t\tattachQtyButtons();\n\t\tif ($('.shop_table').length) {\n\t\t\t$(document.body).on(\"updated_cart_totals\", function () {\n\t\t\t\tattachQtyButtons();\n\t\t\t});\n\t\t}\n\t}\n\n\tlet updateCartTimeout;\n\n\tfunction attachQtyButtons() {\n\t\tconst inputs = document.querySelectorAll(\".input-text.qty\");\n\n\t\tinputs.forEach((input) => {\n\t\t\tconst decrementButton = document.createElement(\"button\");\n\t\t\tdecrementButton.textContent = \"-\";\n\t\t\tdecrementButton.classList.add(\"decrement-button\");\n\n\t\t\tconst incrementButton = document.createElement(\"button\");\n\t\t\tincrementButton.textContent = \"+\";\n\t\t\tincrementButton.classList.add(\"increment-button\");\n\n\t\t\tinput.insertAdjacentElement(\"beforebegin\", decrementButton);\n\t\t\tinput.insertAdjacentElement(\"afterend\", incrementButton);\n\n\t\t\tdecrementButton.addEventListener(\"click\", function (e) {\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (e.pointerType === \"mouse\" && input.value > input.min) {\n\t\t\t\t\tinput.value = parseInt(input.value) - 1;\n\t\t\t\t\t$(input).change();\n\t\t\t\t\tupdateCartAfterDelay(e);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tincrementButton.addEventListener(\"click\", function (e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tif (input.max != ' ' || parseInt(input.value) < parseInt(input.max)) {\n\t\t\t\t\tinput.value = parseInt(input.value) + 1;\n\t\t\t\t\t$(input).change();\n\t\t\t\t\tupdateCartAfterDelay(e);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tfunction updateCartAfterDelay(e) {\n\t\t\tif (updateCartTimeout) {\n\t\t\t\tclearTimeout(updateCartTimeout);\n\t\t\t}\n\n\t\t\tupdateCartTimeout = setTimeout(() => {\n\t\t\t\tupdateCartProducts(e);\n\t\t\t}, 1000); \/\/ Espera 1 segundo antes de ejecutar la actualizaci\u00f3n del carrito\n\t\t}\n\t}\n\n\tfunction updateCartProducts(e) {\n\t\tlet cartForm = $('form.woocommerce-cart-form');\n\n\t\tif ($(cartForm).length) {\n\t\t\t$('[name=\"update_cart\"]').click();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\t\n\t\t}); \/\/Cerrar function\n})(jQuery); \/\/Cerrar jquery<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91f1cee elementor-widget elementor-widget-text-editor\" data-id=\"91f1cee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, let&#8217;s add some simple styles:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8cf30 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8cf30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* ***************************************** *\/\n\/* BOTONES DE CANTIDAD *\/\n\/* ***************************************** *\/\n\n.quantity input.qty{\n    border: none !important;\n}\n.quantity{\n\tdisplay: flex;\n\tgap: 0px;\n\tpadding-right: 20px;\n\talign-items: center;\n}\n.quantity input{\n\tdisplay: block !important;\n\ttext-align: center !important;\n\twidth: 40px !important;\n\theight: 10px !important;\n\tpadding: 0px !important;\n\tfont-size: 16px !important;\n\tbackground: red;\n\tpointer-events: none !important;\n}\n.quantity button{\n\tcolor: #000 !important;\n\tbackground: transparent !important;\n\tborder: none !important;\n\tmin-width: auto !important;\n\twidth: auto !important;\n\tpadding: 0px !important;\n\tmargin: 0px !important;\n\tfont-family: var(--e-global-typography-0c26c95-font-family), Sans-serif  !important;\n\tfont-size: 28px !important;\n\tfont-weight: normal !important;\n\ttext-align: center !important;\n}\n.quantity button.increment-button{\n\tfont-size: 19px !important;\n}\n.quantity input[type=number]::-webkit-inner-spin-button, \n.quantity input[type=number]::-webkit-outer-spin-button { \n\t-webkit-appearance: none; \n\tmargin: 0; \n}\n.quantity input[type=number] { \n    -moz-appearance:textfield;\n}\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4648b1f elementor-widget elementor-widget-text-editor\" data-id=\"4648b1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That&#8217;s it!  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What we will achieve: We are going to add the + and &#8211; buttons on each side of the input number in both the Product Detail and the Shopping Cart: And in the shopping cart we will add the function for the automatic update: How do we do it? To achieve this we are going [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5541","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5541"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5541\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}