+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Customer Order Comment
++ Know Your Customer's Comments and Ratings, and View Them on + the Sale Order. +
+ +
+
+
+
+ 
+
+
+ + Explore This Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview
+
+
+
+
+
+
+ Can your customer comment on their order while placing an order? It is
+ imperative to know what
+ customers think about your products, or they can also comment to improve
+ their shopping experience
+ or on your Odoo website!
+
+
+
+
+ 
+
+
+ + Features
+
+
+
+
+
+
+
+
+ 
+ The customers can add comments in the order confirmation page.
+
+
+ The customers can add comments in the order confirmation page.
+
+
+ Review customer comment in the sale order form view.
+
+
+ Review customer comment in the sale order form view.
+
+
+ Enable/ disable the feature from backend.
+
+
+ Enable/ disable the feature from backend.
+
+
+
+ 
+
+
+ + Screenshots +
+ +
+
+
+
+
+
+
+
+
+ 
+
+
+ + Setting to enable/ disable from backend +
++ You can enable/ disable Customer Order Comment feature from + backend. Navigate to + Website/ Configuration/ Settings/ Customer Order Comment and use + the enable or disable + the feature using the setting Comment Configuration.
+
+
+ 
+
+
+ + Add your Product to Cart
+ +
+
+ 
+
+
+ + Do Process Checkout.
+ +
+
+ 
+
+
+ + Payment Page
+ +
+
+ 
+
+
+ + Customer can add Comment in the Order Confirmation Page.
+ +
+
+ 
+
+
+ + Review Customer Comment in the form view of Sale Order.
++ The comment and rating will get displayed in "Customer Order + Comment" tab in the Form View + of the corresponding Sale Order.
+
+
+
+
+ 
+
+
+ + 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/customer_order_comment/static/src/css/review_rating.css b/customer_order_comment/static/src/css/review_rating.css
new file mode 100644
index 000000000..93260543b
--- /dev/null
+++ b/customer_order_comment/static/src/css/review_rating.css
@@ -0,0 +1,384 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+* {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ color: #545454;
+ font-family: "Open Sans", sans-serif;
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: 960px;
+ width: 100%;
+}
+
+#inlineFormInputName::placeholder {
+ text-align: center;
+}
+
+.master {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-top: 40px;
+}
+
+h1 {
+ font-size: 20px;
+ margin-bottom: 20px;
+}
+
+h2 {
+ line-height: 160%;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+.rating-component {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-bottom: 10px;
+}
+
+.rating-component .status-msg {
+ margin-bottom: 10px;
+ text-align: center;
+}
+
+.rating-component .status-msg strong {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+.rating-component .stars-box {
+ -ms-flex-item-align: center;
+ align-self: center;
+ margin-bottom: 15px;
+}
+
+.rating-component .stars-box .star {
+ color: #ccc;
+ cursor: pointer;
+}
+
+.rating-component .stars-box .star.hover {
+ color: #ff5a49;
+}
+
+.rating-component .stars-box .star.selected {
+ color: #ff5a49;
+}
+
+.feedback-tags {
+ min-height: 119px;
+}
+
+.feedback-tags .tags-container {
+ display: none;
+}
+
+.feedback-tags .tags-container .question-tag {
+ text-align: center;
+ margin-bottom: 40px;
+}
+
+.feedback-tags .tags-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ text-align: center;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
+.feedback-tags .tags-container .make-compliment {
+ padding-bottom: 20px;
+}
+
+.feedback-tags .tags-container .make-compliment .compliment-container {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #000;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.feedback-tags
+ .tags-container
+ .make-compliment
+ .compliment-container
+ .fa-smile-wink {
+ color: #ff5a49;
+ cursor: pointer;
+ font-size: 40px;
+ margin-top: 15px;
+ -webkit-animation-name: compliment;
+ animation-name: compliment;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-iteration-count: 1;
+ animation-iteration-count: 1;
+}
+
+.feedback-tags
+ .tags-container
+ .make-compliment
+ .compliment-container
+ .list-of-compliment {
+ display: none;
+ margin-top: 15px;
+}
+
+.feedback-tags .tag {
+ border: 1px solid #ff5a49;
+ border-radius: 5px;
+ color: #ff5a49;
+ cursor: pointer;
+ margin-bottom: 10px;
+ margin-left: 10px;
+ padding: 10px;
+}
+
+.feedback-tags .tag.chosen {
+ background-color: #ff5a49;
+ color: #fff;
+}
+
+.list-of-compliment ul {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.list-of-compliment ul li {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-bottom: 10px;
+ margin-left: 20px;
+ min-width: 90px;
+}
+
+.list-of-compliment ul li:first-child {
+ margin-left: 0;
+}
+
+.list-of-compliment ul li .icon-compliment {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: 2px solid #ff5a49;
+ border-radius: 50%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ height: 70px;
+ margin-bottom: 15px;
+ overflow: hidden;
+ padding: 0 10px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+ width: 70px;
+}
+
+.list-of-compliment ul li .icon-compliment i {
+ color: #ff5a49;
+ font-size: 30px;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+
+.list-of-compliment ul li.actived .icon-compliment {
+ background-color: #ff5a49;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+
+.list-of-compliment ul li.actived .icon-compliment i {
+ color: #fff;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+
+.button-box .done {
+ background-color: #ff5a49;
+ border: 1px solid #ff5a49;
+ border-radius: 3px;
+ color: #fff;
+ cursor: pointer;
+ display: none;
+ min-width: 100px;
+ padding: 10px;
+}
+
+.button-box .done:disabled,
+.button-box .done[disabled] {
+ border: 1px solid #ff9b95;
+ background-color: #ff9b95;
+ color: #fff;
+ cursor: initial;
+}
+
+.submitted-box {
+ display: none;
+ padding: 20px;
+}
+
+.submitted-box .loader,
+.submitted-box .success-message {
+ display: none;
+}
+
+.submitted-box .loader {
+ border: 5px solid transparent;
+ border-top: 5px solid #4dc7b7;
+ border-bottom: 5px solid #ff5a49;
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ -webkit-animation: spin 0.8s linear infinite;
+ animation: spin 0.8s linear infinite;
+}
+
+@-webkit-keyframes compliment {
+ 1% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 25% {
+ -webkit-transform: rotate(-30deg);
+ transform: rotate(-30deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(30deg);
+ transform: rotate(30deg);
+ }
+
+ 75% {
+ -webkit-transform: rotate(-30deg);
+ transform: rotate(-30deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes compliment {
+ 1% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 25% {
+ -webkit-transform: rotate(-30deg);
+ transform: rotate(-30deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(30deg);
+ transform: rotate(30deg);
+ }
+
+ 75% {
+ -webkit-transform: rotate(-30deg);
+ transform: rotate(-30deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
diff --git a/customer_order_comment/static/src/js/review_rating.js b/customer_order_comment/static/src/js/review_rating.js
new file mode 100644
index 000000000..2116a0a04
--- /dev/null
+++ b/customer_order_comment/static/src/js/review_rating.js
@@ -0,0 +1,77 @@
+odoo.define('customer_order_comment.review_rating', function(require){
+ 'use strict';
+
+ /**
+ * The methods defined here are used for adding the comments and rating at
+ * the time of confirmation of orders and different styles were applied at
+ * the time of occurrence of some events like button click, mouse out etc.
+ */
+ $(".rating-component .star").on("mouseover", function () {
+ var onStar = parseInt($(this).data("value"), 10);
+ $(this).parent().children("i.star").each(function (e) {
+ if (e < onStar) {
+ $(this).addClass("hover");
+ } else {
+ $(this).removeClass("hover");
+ }
+ });
+ }).on("mouseout", function () {
+ $(this).parent().children("i.star").each(function (e) {
+ $(this).removeClass("hover");
+ });
+ });
+ $(".rating-component .stars-box .star").on("click", function () {
+ var onStar = parseInt($(this).data("value"), 10);
+ var stars = $(this).parent().children("i.star");
+ var ratingMessage = $(this).data("message");
+ $('#order_id').val($('.monetary_field').data('oe-id'))
+ var msg = onStar;
+ $('.rating-component .star-rate .rate-value').val(msg);
+ $(".fa-smile-wink").show();
+ $(".button-box .done").show();
+ if (onStar === 5) {
+ $(".button-box .done").removeAttr("disabled");
+ } else {
+ $(".button-box .done").attr("disabled", "true");
+ }
+ for (var i = 0; i < stars.length; i++) {
+ $(stars[i]).removeClass("selected");
+ }
+ for (var i = 0; i < onStar; i++) {
+ $(stars[i]).addClass("selected");
+ }
+ $(".status-msg .rating_msg").val(ratingMessage);
+ $(".status-msg").html(ratingMessage);
+ $("[data-tag-set]").hide();
+ $("[data-tag-set=" + onStar + "]").show();
+ });
+ $(".feedback-tags ").on("click", function () {
+ var chosenTagsLength = $(this).parent("div.tags-box").find("input").length + 1;
+ if ($(this).hasClass("chosen")) {
+ $(this).removeClass("chosen");
+ chosenTagsLength = chosenTagsLength - 2;
+ } else {
+ $(this).addClass("chosen");
+ $(".button-box .done").removeAttr("disabled");
+ }
+ if (chosenTagsLength <= 0) {
+ $(".button-box .done").attr("enabled", "false");
+ }
+ });
+ $(".compliment-container .fa-smile-wink").on("click", function () {
+ $(this).fadeOut("slow", function () {
+ $(".list-of-compliment").fadeIn();
+ });
+ });
+ $(".done").on("click", function () {
+ $(".rating-component").hide();
+ $(".feedback-tags").hide();
+ $(".button-box").hide();
+ $(".submitted-box").show();
+ $(".submitted-box .loader").show();
+ setTimeout(function () {
+ $(".submitted-box .loader").hide();
+ $(".submitted-box .success-message").show();
+ }, 1500);
+ });
+});
diff --git a/customer_order_comment/views/customer_order_comment_templates.xml b/customer_order_comment/views/customer_order_comment_templates.xml
new file mode 100644
index 000000000..7c04040dd
--- /dev/null
+++ b/customer_order_comment/views/customer_order_comment_templates.xml
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ +
+
Customer Order Comment
+
+
+
+
+
+
+
+
+
+
+ Customers can enter their comments or feedback for orders on the website.
+
+