+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+ 
+
+ + Multi Image In Pos
++ This Module Helps To View Multiple Images Of Products In + Pos
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module helps to view multiple images of products in the pos on a
+ button click and user can add that product
+ to order line by clicking the confirm button.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Add multiple images for products
+
+
+ Add multiple images for products
+
+
+ View multiple images in pop
+
+
+ View multiple images in pop
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+ + Add multiple images of product
+
+
+ 
+
+ + Enable product multiple images to view
+ +
+
+ 
+
+ + Button to show multiple images
++ Only visible on products with multiple images.
+
+
+ 
+
+ + View multi images
++ On clicking the confirm, corresponding product will add to order + line.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/multi_image_in_pos/static/src/css/style.scss b/multi_image_in_pos/static/src/css/style.scss
new file mode 100644
index 000000000..417bf0ce7
--- /dev/null
+++ b/multi_image_in_pos/static/src/css/style.scss
@@ -0,0 +1,138 @@
+#image_popup{
+ height:auto;
+ max-width:50%
+}
+@keyframes tonext {
+ 75% {
+ left: 0;
+ }
+ 95% {
+ left: 100%;
+ }
+ 98% {
+ left: 100%;
+ }
+ 99% {
+ left: 0;
+ }
+}
+@keyframes tostart {
+ 75% {
+ left: 0;
+ }
+ 95% {
+ left: -300%;
+ }
+ 98% {
+ left: -300%;
+ }
+ 99% {
+ left: 0;
+ }
+}
+@keyframes snap {
+ 96% {
+ scroll-snap-align: center;
+ }
+ 97% {
+ scroll-snap-align: none;
+ }
+ 99% {
+ scroll-snap-align: none;
+ }
+ 100% {
+ scroll-snap-align: center;
+ }
+}
+body {
+ max-width: 37.5rem;
+ margin: 0 auto;
+ padding: 0 1.25rem;
+ font-family: 'Lato', sans-serif;
+}
+* {
+ box-sizing: border-box;
+ scrollbar-color: transparent transparent; /* thumb and track color */
+ scrollbar-width: 0px;
+}
+*::-webkit-scrollbar {
+ width: 0;
+}
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+ background: transparent;
+ border: none;
+}
+.carousel {
+ position: relative;
+ padding-top: 63%;
+ filter: drop-shadow(0 0 10px #0003);
+ perspective: 100px;
+}
+.carousel__viewport {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ overflow-x: scroll;
+ scroll-behavior: smooth;
+ scroll-snap-type: x mandatory;
+ overflow-y: hidden;
+}
+.carousel__slide {
+ position: relative;
+ flex: 0 0 100%;
+ width: 100%;
+}
+.carousel__slide:before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate3d(-50%,-40%,70px);
+ font-size: 2em;
+}
+.carousel__snapper {
+ scroll-snap-align: center;
+}
+.carousel__snapper img{
+ width: 100%;
+ height: auto
+}
+.carousel__navigation {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ text-align: center;
+}
+.carousel__navigation-button {
+ display: inline-block;
+ background-clip: content-box;
+ transition: transform 0.1s;
+}
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next {
+ transform: translateY(-50%);
+}
+.carousel::before,
+.carousel__prev {
+ left: -1rem;
+}
+.carousel::after,
+.carousel__next {
+ right: -1rem;
+}
+.carousel::before,
+.carousel::after {
+ content: '';
+ z-index: 1;
+ background-repeat: no-repeat;
+ background-position: center center;
+ pointer-events: none;
+}
diff --git a/multi_image_in_pos/static/src/js/MultiImagePopup.js b/multi_image_in_pos/static/src/js/MultiImagePopup.js
new file mode 100644
index 000000000..120aa1670
--- /dev/null
+++ b/multi_image_in_pos/static/src/js/MultiImagePopup.js
@@ -0,0 +1,19 @@
+//Show popup and button function to add product to order line
+odoo.define('multi_image_in_pos.MultiImagePopup', function(require) {
+ 'use strict';
+ const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
+ const Registries = require('point_of_sale.Registries');
+ class MultiImagePopup extends AbstractAwaitablePopup {
+ // Confirm button of popup, on clicking it,
+ // corresponding product will add to orderline
+ confirm() {
+ var product = this.props.product;
+ var order = this.env.pos.get_order();
+ order.add_product(product);
+ this.cancel();
+ }
+ }
+ MultiImagePopup.template = 'MultiImagePopup';
+ Registries.Component.add(MultiImagePopup);
+ return MultiImagePopup;
+});
diff --git a/multi_image_in_pos/static/src/js/ProductItem.js b/multi_image_in_pos/static/src/js/ProductItem.js
new file mode 100644
index 000000000..7e01696c2
--- /dev/null
+++ b/multi_image_in_pos/static/src/js/ProductItem.js
@@ -0,0 +1,21 @@
+//ProductItem icon
+odoo.define('multi_image_in_pos.ProductItemButton', function (require) {
+ "use strict";
+ const ProductItem = require('point_of_sale.ProductItem');
+ const Registries = require('point_of_sale.Registries');
+ const ProductItemButton = (ProductItem) => class ProductItemButton
+ extends ProductItem {
+ // Click function of image icon on product item
+ // it displays a custom popup
+ onClickImageIcon(ev) {
+ ev.stopPropagation();
+ const product = this.props.product;
+ this.showPopup("MultiImagePopup", {
+ data : product.image_ids,
+ product: product,
+ });
+ }
+ }
+ ProductItemButton.template = 'ShowProductImages';
+ Registries.Component.extend(ProductItem, ProductItemButton);
+});
diff --git a/multi_image_in_pos/static/src/xml/MultiImagePopup.xml b/multi_image_in_pos/static/src/xml/MultiImagePopup.xml
new file mode 100644
index 000000000..648a3e51f
--- /dev/null
+++ b/multi_image_in_pos/static/src/xml/MultiImagePopup.xml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ -
+
-
+ ++
+
+
+
+
+
+
+
+
+ Allow to show multiple
+ images of Product
+
+