[Initial] New Addon for Ecommerce

website_sale_product_gallery_zoom/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+import models

website_sale_product_gallery_zoom/__openerp__.py

@@ -0,0 +1,56 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2017-TODAY Cybrosys Technologies(<http://www.cybrosys.com>).
+#    Author: Hilar AK(<hilar@cybrosys.in>)
+#    you can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    It is forbidden to publish, distribute, sublicense, or sell copies
+#    of the Software or modified copies of the Software.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    GENERAL PUBLIC LICENSE (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    'name': "E-commerce Product Gallery & Zoom",
+    'version': '9.0.1.0.0',
+    'summary': """
+        Odoo e-commerce Product Gallery and Zoom.""",
+
+    'description': """
+       Odoo e-commerce Product Gallery and Zoom.
+    """,
+
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'website': "http://cybrosys.com/",
+    'category': 'eCommerce',
+    'depends': ['base',
+                'website',
+                'website_sale',
+                ],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/product_view.xml',
+        'views/product_template.xml',
+        'views/assets.xml'
+    ],
+    # only loaded in demonstration mode
+    'demo': [
+        # 'demo/demo.xml',
+    ],
+    'images': ['static/description/banner.jpg'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': True
+}

website_sale_product_gallery_zoom/models/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+import product

website_sale_product_gallery_zoom/models/product.py

@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+
+from openerp import fields, models
+
+class MultiProductImagesRel(models.Model):
+    _name = 'product.images'
+    _description = "Add Multiple Images in Product"
+
+    sequence = fields.Integer('Sequence')
+    name = fields.Char('Name')
+    image = fields.Binary(
+        'Image',
+        attachment=True,
+    )
+    product_id_rel = fields.Many2one(
+        'product.template',
+        'Product',
+    )
+
+class Product(models.Model):
+    _inherit = 'product.template'
+    _description = "Images Gallery For Products"
+
+    product_multi_images = fields.One2many(
+        'product.images',
+        'product_id_rel',
+        string='Gallery',
+    )

website_sale_product_gallery_zoom/readme.md

@@ -0,0 +1,33 @@
+# Ecommerce Product Gallery & Zoom
+
+Ecommerce Product Gallery & Zoom is an odoo e-commerse based addon, which Extends the product description view by
+including the Products Multiple Images as a Gallery and also enabling The Zoom.
+
+  - E-commerce Product Gallery
+  - E-commerce Product Image Zoom
+  - Set Product Images on Backend
+  - First Five Images will be taken for image Gallery form backend Image list
+
+### Depends
+Ecommerce Product Gallery & Zoom addon depends on Odoo website and website_sale
+### Tech
+
+* [jQuery] - Zoom xZoom v1.0.5, (c) 2013 by Azat Ahmedov & Elman Guseynov, https://github.com/payalord
+* [Python] - Models
+* [XML] - Odoo website templates
+
+### Installation
+- www.odoo.com/documentation/9.0/setup/install.html
+- Install our custom addon, which also installs its depends [website, website_sale]
+ 
+### Usage
+> Create Gallery Images on product backend, sales -> products -> product form -> page Image Gallery
+> First Install our custom addon, then go to website and open product description page.
+
+License
+----
+GNU LESSER GENERAL PUBLIC LICENSE, Version 3 (LGPLv3)
+(http://www.gnu.org/licenses/agpl.html)
+
+
+

website_sale_product_gallery_zoom/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+public_access_product_images,Access Product Images Public,model_product_images,,1,0,0,0

website_sale_product_gallery_zoom/static/description/index.html

@@ -0,0 +1,114 @@
+<section class="oe_container oe_dark">
+		<h2 class="oe_slogan" style="margin-top:20px;" >E-commerce Product Gallery & Zoom</h2>
+</section>
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan" style="color:#875A7B;">Multiple Images for products and Zoom Plugin</h2>
+        <h3 class="oe_slogan">
+            Responsive Gallery and Zoom Functionality
+         </h3>
+        <!--<div class="oe_demo oe_picture  oe_screenshot">
+            <img class="trans-300-out" src="screenshot.gif">
+        </div>-->
+    </div>
+
+    <div class="oe_container oe_dark">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Image Configuration On Back-end</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="backend.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Product Gallery On Shop Product Description Page</b></h2>
+
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+                         src="tgallery.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Hover on Product Gallery Thumbs to change the Images Preview</b></h2>
+
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+                         src="thover.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Hover on Image to Zoom</b></h2>
+
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+                         src="tzoom.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Scroll on Image to Zoom in and out</b></h2>
+
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+                         src="tzoom2.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+<section class="oe_container oe_dark">
+		<h2 class="oe_slogan" style="margin-top:20px;" >Need Any Help?</h2>
+		<div class="oe_slogan" style="margin-top:10px !important;">
+			<a  class="btn btn-primary btn-lg mt8"
+				style="color: #FFFFFF !important;border-radius: 0;" href="http://www.cybrosys.com"><i
+				class="fa fa-envelope"></i> Email </a> <a
+				class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
+				href="http://www.cybrosys.com/contact/"><i
+				class="fa fa-phone"></i> Contact Us </a> <a
+				class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
+				href="http://www.cybrosys.com/odoo-customization-and-installation/"><i
+				class="fa fa-check-square"></i> Request Customization </a>
+		</div>
+				<img src="cybro_logo.png" style="width: 190px; margin-bottom: 20px;" class="center-block">
+</section>

website_sale_product_gallery_zoom/static/src/css/xzoom.css

@@ -0,0 +1,103 @@
+/* Compatibility styles for frameworks like bootstrap, foundation e.t.c */
+.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
+  display: block;
+  max-width: none;
+  max-height: none;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+/* --------------- */
+
+/* xZoom Styles below */
+.xzoom-container { 
+  display: inline-block;
+}
+
+.xzoom-thumbs {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.xzoom { 
+  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);  
+}
+.xzoom2, .xzoom3, .xzoom4, .xzoom5 {
+  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
+}
+
+/* Thumbs */
+.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
+  border: 1px solid #cecece;
+  margin-left: 5px;
+  margin-bottom: 10px;
+}
+
+.xzoom-source, .xzoom-hidden {
+  display: block;
+  position: static;
+  float: none;
+  clear: both;
+}
+
+/* Everything out of border is hidden */
+.xzoom-hidden {
+  overflow: hidden;
+}
+
+/* Preview */
+.xzoom-preview {
+  border: 1px solid #888;
+  background: #2f4f4f;
+  box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
+}
+
+/* Lens */
+.xzoom-lens {
+  border: 1px solid #555;
+  box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
+  cursor: crosshair;
+}
+
+/* Loading */
+.xzoom-loading {
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 100%;
+  opacity: .7;
+  background: url(../images/xloading.gif);
+  width: 48px;
+  height: 48px;
+}
+
+/* Additional class that applied to thumb when it is active */
+.xactive {
+  -webkit-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
+  -moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
+  box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); 
+  border: 1px solid #4aaad2;
+}
+
+/* Caption */
+.xzoom-caption {
+  position: absolute;
+  bottom: -43px;
+  left: 0;
+  background: #000;
+  width: 100%;
+  text-align: left;
+}
+
+.xzoom-caption span {
+  color: #fff;
+  font-family: Arial, sans-serif;
+  display: block;
+  font-size: 0.75em;
+  font-weight: bold;
+  padding: 10px;
+}

website_sale_product_gallery_zoom/static/src/js/setup.js

@@ -0,0 +1,16 @@
+(function ($) {
+    $(document).ready(function() {
+        $('.xzoom, .xzoom-gallery').xzoom({
+            zoomWidth: '250',
+            zoomHeight: '250',
+            title: false,
+            tint: '#333',
+            Xoffset: 15,
+            scroll: true,
+            fadeTrans: true,
+            position: 'lens',
+            lensShape: 'square',
+            sourceClass: 'xzoom-hidden',
+            hover: true,
+        });
+});})(jQuery);

website_sale_product_gallery_zoom/views/assets.xml

@@ -0,0 +1,18 @@
+<odoo>
+    <template id="assets_frontend_zoom"
+              inherit_id="website.assets_frontend"
+              name="zoom">
+      <xpath expr="." position="inside">
+          <script type="text/javascript"
+                  src="/website_sale_product_gallery_zoom/static/lib/xzoom.min.js"
+          />
+          <script type="text/javascript"
+                  src="/website_sale_product_gallery_zoom/static/src/js/setup.js"
+          />
+          <link href="/website_sale_product_gallery_zoom/static/src/css/xzoom.css"
+                rel="stylesheet"
+                type="text/css"
+          />
+      </xpath>
+    </template>
+</odoo>

website_sale_product_gallery_zoom/views/product_template.xml

@@ -0,0 +1,57 @@
+<odoo>
+
+    <template inherit_id="website_sale.product" id="product" name="Zoom &amp; Gallery">
+        <xpath expr="//div[@class='row']/div[@class='col-sm-7 col-md-7 col-lg-7']" position="replace">
+            <div class="col-sm-7 col-md-7 col-lg-7">
+                <!--<span id="xzoom-default"-->
+                      <!--itemprop="image"-->
+                      <!--t-field="product.image"-->
+                      <!--t-if="not product.product_multi_images"-->
+                      <!--t-field-options='{"widget": "image", "class": "product_detail_img", "alt-field": "name"}'-->
+                      <!--t-att-src="'data:image/png;base64,'+product.image if product.image else ''"-->
+                      <!--t-att-xoriginal="'data:image/png;base64,'+product.image if product.image else ''"-->
+                <!--/>-->
+                <section id="default" class="padding-top0">
+                <div class="row">
+                  <div class="large-12 column"></div>
+                  <div class="large-5 column">
+                    <div class="xzoom-container">
+                      <img class="xzoom"
+                           id="xzoom-default"
+                           t-att-src="'data:image/png;base64,'+product.image if product.image else ''"
+                           t-att-xoriginal="'data:image/png;base64,'+product.image if product.image else ''"
+                           height="550" width="550"
+                      />
+                      <div class="xzoom-thumbs" t-if="product.product_multi_images">
+                        <a t-att-href="'data:image/png;base64,'+product.image if product.image else ''">
+                            <img class="xzoom-gallery"
+                                 t-att-src="'data:image/png;base64,'+product.image if product.image else ''"
+                                 t-att-xpreview="'data:image/png;base64,'+product.image if product.image else ''"
+                                 width="80"
+                            />
+                        </a>
+                        <!--Here we limits the gallery thumbs upto 5, ie takes only first five images from
+                         Image list on product backend-->
+                        <t t-set="count" t-value="1"/>
+                        <t t-foreach="product.product_multi_images" t-as="images">
+                            <t t-if="count &lt;= 5">
+                              <a t-att-href="'data:image/png;base64,'+images.image">
+                                  <img class="xzoom-gallery"
+                                       t-att-src="'data:image/png;base64,'+images.image"
+                                       t-att-xpreview="'data:image/png;base64,'+images.image"
+                                       width="80"
+                                  />
+                                </a>
+                            </t>
+                            <t t-set="count" t-value="count+1"/>
+                        </t>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="large-7 column"></div>
+                </div>
+                </section>
+            </div>
+        </xpath>
+    </template>
+</odoo>

website_sale_product_gallery_zoom/views/product_view.xml

@@ -0,0 +1,35 @@
+<odoo>
+    <record id="product_image_multi" model="ir.ui.view">
+        <field name="name">Image Gallery Of Products</field>
+        <field name="model">product.template</field>
+        <field name="inherit_id" ref="product.product_template_only_form_view"/>
+        <field name="arch" type="xml">
+            <xpath expr="//page[last()]" position="after">
+                <page name="muliple_images" string="Image Gallery">
+                    <field name="product_multi_images">
+                        <tree string="Image Gallery" editable="bottom">
+                            <field name="sequence" widget="handle"/>
+                            <field name="name"/>
+                            <field name="image"
+                                   widget='image'
+                                   class="oe_avatar"/>
+                        </tree>
+                        <form>
+                            <group>
+                                <group>
+                                    <field name="name"/>
+                                       <field name="image"
+                                           widget='image'
+                                           class="oe_avatar oe_left"
+                                           colspan="2"
+                                           options='{"preview_image": "image_thumb"}'
+                                        />
+                                </group>
+                            </group>
+                        </form>
+                    </field>
+                </page>
+            </xpath>
+        </field>
+    </record>
+</odoo>