diff --git a/setup/web_product_image_sample/odoo/addons/web_product_image_sample b/setup/web_product_image_sample/odoo/addons/web_product_image_sample new file mode 120000 index 000000000000..eafb49aead79 --- /dev/null +++ b/setup/web_product_image_sample/odoo/addons/web_product_image_sample @@ -0,0 +1 @@ +../../../../web_product_image_sample \ No newline at end of file diff --git a/setup/web_product_image_sample/setup.py b/setup/web_product_image_sample/setup.py new file mode 100644 index 000000000000..28c57bb64031 --- /dev/null +++ b/setup/web_product_image_sample/setup.py @@ -0,0 +1,6 @@ +import setuptools + +setuptools.setup( + setup_requires=['setuptools-odoo'], + odoo_addon=True, +) diff --git a/web_product_image_sample/README.rst b/web_product_image_sample/README.rst new file mode 100644 index 000000000000..dae4ed9db07e --- /dev/null +++ b/web_product_image_sample/README.rst @@ -0,0 +1,92 @@ +======================== +Web product image sample +======================== + +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png + :target: https://odoo-community.org/page/development-status + :alt: Production/Stable +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/16.0/web_product_image_sample + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_product_image_sample + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png + :target: https://runbot.odoo-community.org/runbot/162/16.0 + :alt: Try me on Runbot + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module allows you to select the product variants by displaying a thumbnail image. + +* Quick sample + + .. image:: https://raw.githubusercontent.com/OCA/web/16.0/web_product_image_sample/static/img/image.gif + + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +In attributes select "Display type" to "Product image" + +Known issues / Roadmap +====================== + +* For the correct functioning of the module I had to rewrite .css_attribute_color, impacting the way of representing the selection by colors. + +Ideally this should not be necessary, help is required for this process. + +* The combination of more than one property cannot obtain the product identifier, therefore the images are not shown, this would be something to solve. + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +~~~~~~~ + +* Xtendoo + +Contributors +~~~~~~~~~~~~ + +* Manuel Calero + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_product_image_sample/__init__.py b/web_product_image_sample/__init__.py new file mode 100644 index 000000000000..0650744f6bc6 --- /dev/null +++ b/web_product_image_sample/__init__.py @@ -0,0 +1 @@ +from . import models diff --git a/web_product_image_sample/__manifest__.py b/web_product_image_sample/__manifest__.py new file mode 100644 index 000000000000..46b0389ec072 --- /dev/null +++ b/web_product_image_sample/__manifest__.py @@ -0,0 +1,27 @@ +# Copyright 2023 Xtendoo +# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). +{ + "name": "Web product image sample", + "summary": """Display product image sample to select product variant on website""", + "version": "16.0.1.0.0", + "development_status": "Production/Stable", + "website": "https://github.com/OCA/web", + "author": "Xtendoo, Odoo Community Association (OCA)", + "license": "LGPL-3", + "category": "eCommerce", + "depends": [ + "sale", + "website_sale", + ], + "data": [ + "views/variants.xml", + ], + "assets": { + "web.assets_frontend": [ + "web_product_image_sample/static/src/css/product_configurator.scss", + ], + }, + "installable": True, + "auto_install": False, + "application": False, +} diff --git a/web_product_image_sample/models/__init__.py b/web_product_image_sample/models/__init__.py new file mode 100644 index 000000000000..4df738d3bc45 --- /dev/null +++ b/web_product_image_sample/models/__init__.py @@ -0,0 +1,2 @@ +from . import product_attribute +from . import product_template diff --git a/web_product_image_sample/models/product_attribute.py b/web_product_image_sample/models/product_attribute.py new file mode 100644 index 000000000000..482d83257e4b --- /dev/null +++ b/web_product_image_sample/models/product_attribute.py @@ -0,0 +1,10 @@ +from odoo import fields, models + + +class ProductAttribute(models.Model): + _inherit = "product.attribute" + + display_type = fields.Selection( + selection_add=[("image", "Product image")], + ondelete={"image": lambda recs: recs.write({"display_type": "radio"})}, + ) diff --git a/web_product_image_sample/models/product_template.py b/web_product_image_sample/models/product_template.py new file mode 100644 index 000000000000..6b18e4528a51 --- /dev/null +++ b/web_product_image_sample/models/product_template.py @@ -0,0 +1,17 @@ +# Part of Odoo. See LICENSE file for full copyright and licensing details. +from odoo import models + + +class ProductTemplate(models.Model): + _inherit = "product.template" + + def _get_combination_info_image(self, combination_info): + if combination_info["product_id"]: + product = ( + self.env["product.product"] + .sudo() + .browse(combination_info["product_id"]) + ) + if product: + return self.env["website"].image_url(product, "image_256", size=256) + return "" diff --git a/web_product_image_sample/readme/CONTRIBUTORS.rst b/web_product_image_sample/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000000..4ca4846f34f0 --- /dev/null +++ b/web_product_image_sample/readme/CONTRIBUTORS.rst @@ -0,0 +1 @@ +* Manuel Calero diff --git a/web_product_image_sample/readme/DESCRIPTION.rst b/web_product_image_sample/readme/DESCRIPTION.rst new file mode 100644 index 000000000000..74b649c3dac8 --- /dev/null +++ b/web_product_image_sample/readme/DESCRIPTION.rst @@ -0,0 +1,5 @@ +This module allows you to select the product variants by displaying a thumbnail image. + +* Quick sample + + .. image:: ../static/img/image.gif diff --git a/web_product_image_sample/readme/ROADMAP.rst b/web_product_image_sample/readme/ROADMAP.rst new file mode 100644 index 000000000000..2d2c9c215c54 --- /dev/null +++ b/web_product_image_sample/readme/ROADMAP.rst @@ -0,0 +1,5 @@ +* For the correct functioning of the module I had to rewrite .css_attribute_color, impacting the way of representing the selection by colors. + +Ideally this should not be necessary, help is required for this process. + +* The combination of more than one property cannot obtain the product identifier, therefore the images are not shown, this would be something to solve. diff --git a/web_product_image_sample/readme/USAGE.rst b/web_product_image_sample/readme/USAGE.rst new file mode 100644 index 000000000000..6d2a6164046d --- /dev/null +++ b/web_product_image_sample/readme/USAGE.rst @@ -0,0 +1 @@ +In attributes select "Display type" to "Product image" diff --git a/web_product_image_sample/static/description/icon.png b/web_product_image_sample/static/description/icon.png new file mode 100644 index 000000000000..3a0328b516c4 Binary files /dev/null and b/web_product_image_sample/static/description/icon.png differ diff --git a/web_product_image_sample/static/description/index.html b/web_product_image_sample/static/description/index.html new file mode 100644 index 000000000000..4d6a7a3e6cec --- /dev/null +++ b/web_product_image_sample/static/description/index.html @@ -0,0 +1,440 @@ + + + + + + +Web product image sample + + + +
+

Web product image sample

+ + +

Production/Stable License: AGPL-3 OCA/web Translate me on Weblate Try me on Runbot

+

This module allows you to select the product variants by displaying a thumbnail image.

+
    +

  • Quick sample

    +https://raw.githubusercontent.com/OCA/web/16.0/web_product_image_sample/static/img/image.gif +
    • +
+

Table of contents

+ +
+

Usage

+

In attributes select “Display type” to “Product image”

+
+
+

Known issues / Roadmap

+
    +
  • For the correct functioning of the module I had to rewrite .css_attribute_color, impacting the way of representing the selection by colors.
    • +
+

Ideally this should not be necessary, help is required for this process.

+
    +
  • The combination of more than one property cannot obtain the product identifier, therefore the images are not shown, this would be something to solve.
    • +
+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Xtendoo
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+Odoo Community Association +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_product_image_sample/static/img/image.gif b/web_product_image_sample/static/img/image.gif new file mode 100644 index 000000000000..0bec492eb0a3 Binary files /dev/null and b/web_product_image_sample/static/img/image.gif differ diff --git a/web_product_image_sample/static/src/css/product_configurator.scss b/web_product_image_sample/static/src/css/product_configurator.scss new file mode 100644 index 000000000000..ebe519428e7a --- /dev/null +++ b/web_product_image_sample/static/src/css/product_configurator.scss @@ -0,0 +1,38 @@ +.css_attribute_color { + position: relative; + display: inline-block; + border: 5px solid $input-border-color; + border-radius: 0%; + text-align: center; + transition: $input-transition; + + @include o-field-pointer(); + + &:before { + content: ""; + display: block; + @include o-position-absolute(-3px, -3px, -3px, -3px); + border: 4px solid white; + border-radius: 0%; + box-shadow: inset 0 0 3px rgba(black, 0.3); + } + + input { + margin: 0px; + height: 60px; + width: 60px; + opacity: 0; + } + + &.active { + border: 5px solid map-get($theme-colors, "primary"); + } + + &.custom_value { + background-image: linear-gradient(to bottom right, #ff0000, #fff200, #1e9600); + } + + &.transparent { + background-image: url(/web/static/img/transparent.png); + } +} diff --git a/web_product_image_sample/views/variants.xml b/web_product_image_sample/views/variants.xml new file mode 100644 index 000000000000..9e611b1930f9 --- /dev/null +++ b/web_product_image_sample/views/variants.xml @@ -0,0 +1,53 @@ + + + +