+
+
+
+
+ 
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+ 
+
+ + Multiple Images 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 and by
+ clicking the confirm button those products
+ will add to pos order line.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+ 
+ Community and enterprise support
+
+
+ Community and enterprise support
+
+
+ Add multiple images of products
+
+
+ Add multiple images of products
+
+
+
+
+ Icon in pos products with multiple images
+
+
+ Icon in pos products with multiple images
+
+
+ View multiple images in pos
+
+
+ View multiple images in pos
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+ + Add Multiple Images of Products
++ Under the Products menu : Products --> Product Variants --> Choose a product --> Open the Sale Tab. We can add Multiple Images under the Products Sales Tab
+
+
+ 
+
+ + Enable to View Multiple Images of Products
+
+
+ 
+
+ + Button to Show Multiple Images
++ It will be visible only on products with multiple images.
+
+
+ 
+
+ + View Multiple Images
++ Scroll sideways to view the next image, and upon clicking the confirm button, + the corresponding product will be added to the 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 +
+
+
+
diff --git a/multi_image_in_pos/static/src/css/multi_image_popup_style.scss b/multi_image_in_pos/static/src/css/multi_image_popup_style.scss
new file mode 100644
index 000000000..417bf0ce7
--- /dev/null
+++ b/multi_image_in_pos/static/src/css/multi_image_popup_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/multi_image_popup.js b/multi_image_in_pos/static/src/js/multi_image_popup.js
new file mode 100644
index 000000000..aca50cf18
--- /dev/null
+++ b/multi_image_in_pos/static/src/js/multi_image_popup.js
@@ -0,0 +1,18 @@
+// Popup for Multiple Images
+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 {
+ // Adds product in to order line
+ 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/product_item.js b/multi_image_in_pos/static/src/js/product_item.js
new file mode 100644
index 000000000..f6ca35460
--- /dev/null
+++ b/multi_image_in_pos/static/src/js/product_item.js
@@ -0,0 +1,26 @@
+// Extending ProductItem for adding icon for multiple images
+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 models = require('point_of_sale.models');
+ models.load_fields("product.product", ['image_ids']);
+ models.load_fields("product.product", ['is_img_added']);
+ models.load_fields("product.template", ['image_ids']);
+ models.load_fields("product.template", ['is_img_added']);
+ const ProductItemButton = (ProductItem) => class ProductItemButton
+ extends ProductItem {
+ // Showing popup on clicking icon of multiple images
+ onClickImageIcon(ev) {
+ ev.stopPropagation();
+ const product = this.props.product;
+ var image_ids = product.image_ids
+ this.showPopup("MultiImagePopup", {
+ data : image_ids,
+ product: product,
+ });
+ }
+ }
+ ProductItemButton.template = 'ShowProductImages';
+ Registries.Component.extend(ProductItem, ProductItemButton);
+});
diff --git a/multi_image_in_pos/static/src/xml/image_popup_templates.xml b/multi_image_in_pos/static/src/xml/image_popup_templates.xml
new file mode 100644
index 000000000..39862fe92
--- /dev/null
+++ b/multi_image_in_pos/static/src/xml/image_popup_templates.xml
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ -
+
-
+ ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Allow to show multiple images of Product
+
+