Develop Reference

How to disable toast message for Newsletter module on Odoo (v14) website

For the website I develop, I use Newsletter module to create a mailing list. It's quite enough for basic needs. When you insert an e-mail and click to subscribe button, it shows (replace) "Thanks" message and hide the "Subscribe" button. It also shows a toast message: "Thanks for subscribing!" on the top right side of the page.
I don't want to show toast messages for newsletter subscriptions. Unfortunately, there is no option to enable/disable it.
If I disable/remove that part below from website_mass_mailing.js file it doesn't show the toast message.
self.displayNotification({
type: toastType,
title: toastType === 'success' ? _t('Success') : _t('Error'),
message: result.toast_content,
sticky: true,
});
I don't want to touch this file (website_mass_mailing.js) but instead, inherit it and remove that part but I couldn't succeed. Any suggestion on how to do it?

You should create a new module which depends on website_mass_mailing and extends mass_mailing.website_integration via a dedicated javascript module.
For example:
odoo.define('my_module.mass_mailing_website_integration', function (require) {
var website_integration = require('mass_mailing.website_integration');
website_integration.extend({
// Your Logic Here
});
}
Find mass_mailing method who's calling displayNotification and override it.
Unfortunately i see no alternative to copy-pasting it entirely from source and then removing desired behaviours.
Do not forget to include your javascript in web_assets template.

After suggestions of #icra I've tried to figure it out and here is the code that worked for me.
Thanks to Cybrosys Techno Solutions Pvt.Ltd as well to achieve the solution.
Here is the code:
odoo.define('your_module.name', function (require){
var publicWidget = require('web.public.widget');
var _t = core._t;
publicWidget.registry.subscribe.include({
_onSubscribeClick: async function () {
var self = this;
var $email = this.$(".js_subscribe_email:visible");
if ($email.length && !$email.val().match(/.+#.+/)) {
this.$target.addClass('o_has_error').find('.form-control').addClass('is-invalid');
return false;
}
this.$target.removeClass('o_has_error').find('.form-control').removeClass('is-invalid');
let tokenObj = null;
if (this._recaptcha) {
tokenObj = await this._recaptcha.getToken('website_mass_mailing_subscribe');
if (tokenObj.error) {
self.displayNotification({
type: 'danger',
title: _t("Error"),
message: tokenObj.error,
sticky: true,
});
return false;
}
}
const params = {
'list_id': this.$target.data('list-id'),
'email': $email.length ? $email.val() : false,
};
if (this._recaptcha) {
params['recaptcha_token_response'] = tokenObj.token;
}
this._rpc({
route: '/website_mass_mailing/subscribe',
params: params,
}).then(function (result) {
let toastType = result.toast_type;
if (toastType === 'success') {
self.$(".js_subscribe_btn").addClass('d-none');
self.$(".js_subscribed_btn").removeClass('d-none');
self.$('input.js_subscribe_email').prop('disabled', !!result);
if (self.$popup.length) {
self.$popup.modal('hide');
}
}
// make the changes you need accordingly or comment out the below code.
self.displayNotification({
type: toastType,
title: toastType === 'success' ? _t('Success') : _t('Error'),
message: result.toast_content,
sticky: true,
});
});
},
})
})

Facebook-Share with open graph custom Title, Image, Description not showing (Magento 2)

Im trying to get open graph sharing running in Magento 2.
When sharing url looks like this: https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
My Function looks like this:
define([
'jquery',
'underscore'
], function ($, _) {
'use strict';
$.widget('intersales.shareFB', {
options: {
url: null,
quote: null,
img: null
},
_create: function(){
var self = this;
self._bindSubmit();
},
_bindSubmit: function () {
var self = this;
$(this.element).click(function(e){
e.preventDefault();
self._share();
});
},
_share: function(){
console.log('sharing url' + ' ' + this.options.url);
console.log('sharing img' + ' ' + this.options.img);
var self = this;
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': this.options.url,
'og:title': 'Test Titel',
'og:description': 'test description',
'og:image:url': this.options.img
}
})
}, function(response){
if (response && !response.error_message) {
// then get post content
alert('successfully posted. Status id : '+response.post_id);
} else {
console.log('Something went error.');
}
});
}
}
);
return $.intersales.shareFB;
});
Fun thing is, when shared the link is correct but it doesnt show the image, the title or the description. I kinda dont want to set the oh tags in page, because its magento and i dont want to override the exsisting templates.
Im kinda new to magento and want/need to write a module, that enables social-media sharing in product detail page. My goal is to do that with twitter and facebook. I started doing that for facebook but its kinda too complicated. All i want is to share the product with a custom text, title and the product image (maybe hastags)
Can anyone get me to the right path?

Those parameters do not work for dynamic OG tags anymore, they were just a workaround earlier. The only way to change OG tags for sharing is to change them in he original page source. Facebook will pick them up automatically.

Chrome extension - GCM Notification throws error but information is there?

My chrome extension keeps throwing an error to this function
function messageReceived(message) {
// A message is an object with a data property that
// consists of key-value pairs.
// Pop up a notification to show the GCM message.
chrome.notifications.create(getNotificationId(), {
title: message.data.name,
iconUrl: 'assets/img/cat.jpg',
type: 'basic',
message: message.data.prompt,
buttons : [
{ title: "Accept" },
{ title: "Reject" }
]
}, function() {});
}
Error:
Unchecked runtime.lastError while running notifications.create: Some of the required properties are missing: type, iconUrl, title and message.
at messageReceived
However, all these are actually present. The error arrives EVERYTIME I add the following function
function notificationBtnClicked(notification, ibtn) {
console.log(notification)
console.log(ibtn)
if (ibtn==0) {
chrome.storage.local.get("name", function(name){
chrome.storage.local.get("email",function(email){
//call other users
var email = email
var name = name
$.ajax({
url: 'some api',
data:'{email:email, name:name}',
ajax:true,
success: function(result)
{
alert(result);
}
});
});
})
}else {
//snooze
}
}
But, I don't understand what's the issue. I checked the chrome.storage by downloading some chrome extension that lets you view it and its there.
Why is the error incorrect? :/
chrome.gcm.onMessage.addListener(messageReceived);
chrome.notifications.onButtonClicked.addListener(notificationBtnClicked);

Make sure that all required notification properties have their value. The 'iconUrl' you used must be a data URL, a blob URL or URL related to a resource within the extension's .crx file required for 'notification.create' method. Please be mindful of the Chrome version you are using.
Also, include a callback and check chrome.runtime.lastError
function callback() {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError.message);
} else {
// Tab exists
}
}

Result of Multiple Ajax requests, one depends on other Ajax Output

I am developing a web application on Perl Catalyst and using ReactJS for the view, jQuery for AJAX, and JSX added as a script in the header.
I am able to fetch AJAX JSON data on a page and refresh the data every 10 seconds. We found this option we create on load on server to fetch data on every 10 seconds. This application is going to be used by a number of users together, so we autogenerate a key which will be incremented if any data is updated on that database table. We set this key on the rest, and it can be accessed by AJAX JSON.
I want to implement a React component which will check this autogenerated AJAX JSON key and will compare it to its previous value every 10 seconds. If they are not equal then it will call the other AJAX function or React component which will update the data on the view page, and older values will be replaced by new.
I have searched a lot but don't get the logic to implement this in ReactJS. Any logic or reference link will be helpful.

Think about the "Refresh_token" component as your controller. It will handle all of the checking token and get the new order when token has changed. The "Order list" should not know when a token has changed, its job is to re-render its view when a new list has arrived.
//Section 1 Starts Here
var Orderlist = React.createClass({
render: function(){
var orderlist11 = [];
for(var i = 0; i < this.props.list.length; i++){
var orderItem = this.props.list[i];
orderlist11.push(
<div className="card">
<div className="title">
Order Number {orderItem.ordernumber}
</div>
<div className="content">
Date & Time : {orderItem.bizorderdate} <br />
Username : {orderItem.userid}
</div>
</div>
);
}
return (
<div> {orderlist11} </div>
);
}
});
////// Section 1 ends here
var RefreshToken = React.createClass({
getInitialState : function(){
return {
token : -1 , //Or anything that is not a token.
orderlist : []
}
},
refreshTimer : null,
componentDidMount : function(){
this.get_order_list(); //Get the intial order list
this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s
},
refresh_token : function(){
$.ajax({
type: 'GET',
url: "/order/refresh",
headers: {
Accept : "application/json","Content-Type": "application/json"
},
success: function (resp){
var newToken = resp;
console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed.
if(newToken != this.state.token){
this.setState({ token: newToken});
this.get_order_list() //Get the new list when token has changed.
// console.log(this.state.resp);
}
}.bind(this)
});
},
get_order_list : function(){
$.ajax({
type: 'GET',
url: "/order/list/10/1",
headers: {
Accept : "application/json", "Content-Type": "application/json"
},
success: function(orderlist) {
// console.log(orderlist);
// console.log(this.state.orderlist);
this.setState({orderlist: orderlist});
}.bind(this),
error: function(xhr, status, err) {
}
});
},
render: function(){
return <Orderlist list={this.state.orderlist} />
}
});
React.render(
<RefreshToken />,
document.getElementById('list_of_orders')
);

Backbone Boilerplate - fetch method don't refresh collection

is my first question here, so I please about some patience and forgive my english:)
When I type link in browser address bar, all is OK. But when I do this inside browser by clicking element, collection is empty. But the main problem is there is always the same response from server, but fetch "dont load" any items, so view render empty collection.
I use Backbone Boilerplate,
Browser.Views.Catalog - it is Backbone.View
Browser.Catalog - it is of Backbone.Collection
My router:
var Router = Backbone.Router.extend({
routes: {
'' : 'browse'
},
refreshCatalog: function(folder){
app.layout.setViews({
"#catalog" : new Browser.Views.Catalog({
collection: app.catalog
})
}).render();
},
browse: function(folder){
app.catalog = new Browser.Catalog();
app.folders.fetch({
error: function() { console.log(arguments); },
success: this.refreshFolders(folder),
data: $.param({folder: folder}),
cache:false
});
//app.catalog = new Browser.Catalog();
app.catalog.fetch({
error: function() { console.log(arguments); },
success: this.refreshCatalog(folder),
data: $.param({folder: folder}),
cache:false
});
},

I belive you should set the catalog in the initialize function
app.catalog = new Browser.Catalog();
should go in here ( add this function)
initialize: function (options) {
app.catalog = new Browser.Catalog();
}
the initialize function is called when the page is loaded so when browsing to #catelog it will have been set http://backbonejs.org/#Router-constructor