Então, amigos segue a live demo: http://feeling.atwebpages.com Uma pena que minha outra conta eu perdi com meu e-mail. Seguinte, eu peguei [daqui](https://codepen.io/mjweaver01/pen/yerzox) um exemplo do que eu precisava, que é um 'cardápio' que consiga adicionar o produto clicando na foto e no final, preciso q ele some e faça uma mini tabelinha com os itens. Até ai, perfeito, tá tudo beleza e funcionando. Porém, não tive jeito de conseguir fazer a impressão apenas da parte que preciso, que seria o que você comprou. Não preciso confirmação de nenhum tipo de sistemas reais bancários, apenas imprimir mesmo numa impressora térmica o cupom com os itens e quantidade. Segue meu ''código'' que tá meio bagunçado mas legível: index.html ``` PDV Feeling ``` ```

``` ``` script.js ``` //@TODO NOTIFICATIONS //--------- // Vue components //--------- Vue.component('products', { ``` ready: function () { var self = this; document.addEventListener("keydown", function(e) { if (self.showModal && e.keyCode == 37) { self.changeProductInModal("prev"); } else if (self.showModal && e.keyCode == 39) { self.changeProductInModal("next"); } else if (self.showModal && e.keyCode == 27) { self.hideModal(); } }); }, template: "

Produtos

" + "

", props: ['productsData', 'cart', 'cartSubTotal', 'cartTotal'], data: function() { return { showModal: false, modalData: {}, modalAmount: 1, timeout: "", mousestop: "" } }, methods: { addToCart: function(product) { var found = false; for (var i = 0; i < vue.cart.length; i++) { if (vue.cart[i].sku === product.sku) { var newProduct = vue.cart[i]; newProduct.quantity = newProduct.quantity + 1; vue.cart.$set(i, newProduct); //console.log("DUPLICATE", vue.cart[i].product + "'s quantity is now: " + vue.cart[i].quantity); found = true; break; } } if(!found) { product.quantity = 1; vue.cart.push(product); } vue.cartSubTotal = vue.cartSubTotal + product.price; vue.cartTotal = vue.cartSubTotal; vue.checkoutBool = true; }, modalAddToCart: function(modalData) { var self = this; for(var i = 0; i < self.modalAmount; i++) { self.addToCart(modalData); } self.modalAmount = 1; }, viewProduct: function(product) { var self = this; //self.modalData = product; self.modalData = (JSON.parse(JSON.stringify(product))); self.showModal = true; }, changeProductInModal: function(direction) { var self = this, productsLength = vue.productsData.length, currentProduct = self.modalData.sku, newProductId, newProduct; if(direction === "next") { newProductId = currentProduct + 1; if(currentProduct >= productsLength) { newProductId = 1; } } else if(direction === "prev") { newProductId = currentProduct - 1; if(newProductId === 0) { newProductId = productsLength; } } //console.log(direction, newProductId); for (var i = 0; i < productsLength; i++) { if (vue.productsData[i].sku === newProductId) { self.viewProduct(vue.productsData[i]); } } }, hideModal: function() { //hide modal and empty modal data var self = this; self.modalData = {}; self.showModal = false; }, changeImage: function(image) { var self = this; self.modalData.image = image; }, imageMouseOver: function(event) { event.target.style.transform = "scale(2)"; }, imageMouseMove: function(event) { var self = this; event.target.style.transform = "scale(2)"; self.timeout = setTimeout(function() { event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%"; }, 50); self.mouseStop = setTimeout(function() { event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%"; }, 100); }, imageMouseOut: function(event) { event.target.style.transform = "scale(1)"; } } }); ``` Vue.component('cart', { ``` template: '

' + ' {{ cart | cartSize }} ' + '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

' + '' + '

' + '' + '', props: ['checkoutBool', 'cart', 'cartSize', 'cartSubTotal', 'cartTotal'], data: function() { return { showCart: false } }, filters: { customPluralize: function(cart) { var newName; if(cart.quantity > 1) { if(cart.product === "Peach") { newName = cart.product + "es"; } else if(cart.product === "Puppy") { newName = cart.product + "ies"; newName = newName.replace("y", ""); } else { newName = cart.product + "s"; } return newName; } return cart.product; }, cartSize: function(cart) { var cartSize = 0; for (var i = 0; i < cart.length; i++) { cartSize += cart[i].quantity; } return cartSize; } }, methods: { removeProduct: function(product) { vue.cart.$remove(product); vue.cartSubTotal = vue.cartSubTotal - (product.price * product.quantity); vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, clearCart: function() { vue.cart = []; vue.cartSubTotal = 0; vue.cartTotal = 0; vue.checkoutBool = false; this.showCart = false; }, quantityChange: function(product, direction) { var qtyChange; for (var i = 0; i < vue.cart.length; i++) { if (vue.cart[i].sku === product.sku) { var newProduct = vue.cart[i]; if(direction === "incriment") { newProduct.quantity = newProduct.quantity + 1; vue.cart.$set(i, newProduct); } else { newProduct.quantity = newProduct.quantity - 1; if(newProduct.quantity == 0) { vue.cart.$remove(newProduct); } else { vue.cart.$set(i, newProduct); } } } } if(direction === "incriment") { vue.cartSubTotal = vue.cartSubTotal + product.price; } else { vue.cartSubTotal = vue.cartSubTotal - product.price; } vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, //send our request up the chain, to our parent //our parent catches the event, and sends the request back down propagateCheckout: function() { vue.$dispatch("checkoutRequest"); } } }); ``` Vue.component('checkout-area', { ``` template: "

Checkout Area

" + '

' + ' {{ cart | cartSize }} ' + '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + //'' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

SKU	Name	Description	Amount	Price
{{ product.sku }}	{{ product.product }}	{{ product.description }}	{{ cart[$index].quantity }}	{{ product.price \| currency }}



			Total:	{{ cartTotal \| currency }}

' + '

' + "

" + "

" + "", props: ['cart', 'cartSize', 'cartSubTotal', 'cartTotal'], data: function() { return { showModal: false } }, filters: { customPluralize: function(cart) { var newName; if(cart.quantity > 1) { newName = cart.product + "s"; return newName; } return cart.product; }, cartSize: function(cart) { var cartSize = 0; for (var i = 0; i < cart.length; i++) { cartSize += cart[i].quantity; } return cartSize; } }, methods: { removeProduct: function(product) { vue.cart.$remove(product); vue.cartSubTotal = vue.cartSubTotal - (product.price * product.quantity); vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, checkoutModal: function() { var self = this; self.showModal = true; console.log("CHECKOUT", self.cartTotal); }, hideModal: function() { //hide modal and empty modal data var self = this; self.showModal = false; } }, //intercept the checkout request broadcast //run our function events: { "checkoutRequest": function() { var self = this; self.checkoutModal(); } } }); ``` //--------- // Vue init //--------- ``` Vue.config.debug = false; var vue = new Vue({ el: "#vue", data: { productsData: [ { sku: 1, product: "Monkey", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg", images: [ { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/gorilla.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/red-monkey.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/mandrill-monkey.jpg" } ], description: "This is a monkey", details: "This is where some detailes on monkies would go. This monkey done seent some shit.", price: 5.50 }, { sku: 2, product: "Kitten", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/kittens.jpg", description: "This is a kitten", details: "This is where some detailes on kittens would go. Shout out kittens for being adorable.", price: 10 }, { sku: 3, product: "Shark", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/shark.jpg", description: "This is a shark", details: "This is where some detailes on sharks would go. Damn nature, you scary.", price: 15 }, { sku: 4, product: "Puppy", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/dog.jpg", description: "This is a puppy", details: "This is where some detailes on puppies would go. Shout out puppies for being adorable.", price: 5 }, { sku: 5, product: "Apple", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/apple.jpg", description: "This is an apple", details: "This is where some detailes on apples would go. Shout out apples for being delicious.", price: 1 }, { sku: 6, product: "Orange", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/orange.jpg", description: "This is an orange", details: "This is where some detailes on oranges would go. Shout out oranges for being delicious.", price: 1.1 }, { sku: 7, product: "Peach", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/peach.jpg", description: "This is a peach", details: "This is where some detailes on peaches would go. Shout out peaches for being delicious.", price: 1.5 }, { sku: 8, product: "Mango", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/mango.png", description: "This is a mango", details: "This is where some detailes on mangos would go. Shout out mangos for being delicious.", price: 2 }, { sku: 9, product: "Cognac", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/cognac.jpg", description: "This is a glass of cognac", details: "This is where some detailes on cognac would go. I'm like hey whats up, hello.", price: 17.38 }, { sku: 10, product: "Chain", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chain.jpg", description: "This is a chain", details: "This is where some details on chains would go. 2Chainz but I got me a few on.", price: 17.38 } ], checkoutBool: false, cart: [], cartSubTotal: 0, cartTotal: 0 }, //intercept the checkout request dispatch //send it back down the chain events: { "checkoutRequest": function() { vue.$broadcast("checkoutRequest"); } } }); Bom, eu tentei de tantas maneiras e diversos tutoriais, que ficou evidente que não vou conseguir sem ajuda. Não me importa se ele irá criar uma nova página com os dados nem nada, desde q ele clique no botão e imprima na impressora padrão. Li em foruns gringos que tem navegadores que não lidam bem com tipos de codigo para impressão sem diálogo, se for o caso posso usar qualquer navegador na máquina, minha ideia é que online nunca vai precisar ''reinstalar'' sistemas nesse pc. Se só conseguir fazer com diálogo, tbm é possível, mesmo q prefira sem nenhum popup. Fico na esperança da ajuda dos amigos, pois estava a bastante tempo sem programar nada e, agora graças a deus com mais projetos, irei tirar a ferrugem, mas de momento necessito desse apoio da comunidade. ```

PDV Feeling

Produtos

{{ cartSubTotal | currency }}

Checkout Area

{{ cartTotal | currency }}

PDV Feeling

Produtos

{{ modalData.price | currency }}

{{ cartSubTotal | currency }}

Checkout Area

{{ cartTotal | currency }}

Checkout

Total: {{ cartTotal | currency }}

ANRVA6

Fazer Impressão da div printMe e falhando miseravelmente (Vue.js)