How can I override the vendor/magento/module-configurable-product/view/adminhtml/web/js/variations/steps/summary.js to local. I have tried https://magento.stackexchange.com/questions/60276/extending-overriding-js-in-magento-2 this but no luck
Finally I got the answer
I have written a module, which contain a requirejs-config.js under the path Vendor/Module/view/adminhtml/requirejs-config.js and having
var config = {
"map": {
"*": {
"Magento_ConfigurableProduct/js/variations/steps/summary": "Vendor_Module/js/variations/steps/summary-custom",
}
}
}
and in Vendor/Module/view/adminhtml/web/js/variations/steps/summary-custom.js , I have
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// jscs:disable jsDoc
define([
'uiComponent',
'jquery',
'ko',
'underscore',
'mage/translate',
'Magento_ConfigurableProduct/js/variations/steps/summary'
], function (Component, $, ko, _, $t, summary) {
'use strict';
return Component.extend({
defaults: {
modules: {
variationsComponent: '${ $.variationsComponent }'
},
notificationMessage: {
text: null,
error: null
},
gridExisting: [],
gridNew: [],
gridDeleted: [],
attributes: [],
attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Cost'), $.mage.__('Msrp'), $.mage.__('Price')],
sections: [],
gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
},
initObservable: function () {
this._super().observe('gridExisting gridNew gridDeleted attributes sections');
this.gridExisting.columns = ko.observableArray();
this.gridNew.columns = ko.observableArray();
this.gridDeleted.columns = ko.observableArray();
return this;
},
nextLabelText: $.mage.__('Generate Products'),
variations: [],
generateGrid: function (variations, getSectionValue) {
var productSku = this.variationsComponent().getProductValue('sku'),
productPrice = this.variationsComponent().getProductValue('price'),
productWeight = this.variationsComponent().getProductValue('weight'),
variationsKeys = [],
gridExisting = [],
gridNew = [],
gridDeleted = [];
this.variations = [];
_.each(variations, function (options) {
var product, images, sku, quantity, cost, msrp, price, variation,
productId = this.variationsComponent().getProductIdByOptions(options);
if (productId) {
product = _.findWhere(this.variationsComponent().variations, {
productId: productId
});
}
images = getSectionValue('images', options);
sku = productSku + _.reduce(options, function (memo, option) {
return memo + '-' + option.label;
}, '');
quantity = getSectionValue('quantity', options);
if (!quantity && productId) {
quantity = product.quantity;
}
msrp = product.msrp;
cost = product.cost;
price = getSectionValue('price', options);
if (!price) {
price = productId ? product.price : productPrice;
}
if (productId && !images.file) {
images = product.images;
}
variation = {
options: options,
images: images,
sku: sku,
quantity: quantity,
cost: cost,
msrp: msrp,
price: price,
productId: productId,
weight: productWeight,
editable: true
};
if (productId) {
variation.sku = product.sku;
variation.weight = product.weight;
gridExisting.push(this.prepareRowForGrid(variation));
} else {
gridNew.push(this.prepareRowForGrid(variation));
}
this.variations.push(variation);
variationsKeys.push(this.variationsComponent().getVariationKey(options));
}, this);
this.gridExisting(gridExisting);
this.gridExisting.columns(this.getColumnsName(this.wizard.data.attributes));
if (gridNew.length > 0) {
this.gridNew(gridNew);
this.gridNew.columns(this.getColumnsName(this.wizard.data.attributes));
}
_.each(_.omit(this.variationsComponent().productAttributesMap, variationsKeys), function (productId) {
gridDeleted.push(this.prepareRowForGrid(
_.findWhere(this.variationsComponent().variations, {
productId: productId
})
));
}.bind(this));
if (gridDeleted.length > 0) {
this.gridDeleted(gridDeleted);
this.gridDeleted.columns(this.getColumnsName(this.variationsComponent().productAttributes));
}
},
prepareRowForGrid: function (variation) {
var row = [];
row.push(_.extend({
images: []
}, variation.images));
row.push(variation.sku);
row.push(variation.quantity);
row.push(variation.cost);
row.push(variation.msrp);
_.each(variation.options, function (option) {
row.push(option.label);
});
row.push(this.variationsComponent().getCurrencySymbol() + ' ' + variation.price);
return row;
},
getGridTemplate: function () {
return this.gridTemplate;
},
getGridId: function () {
return _.uniqueId('grid_');
},
getColumnsName: function (attributes) {
var columns = this.attributesName.slice(0);
attributes.each(function (attribute, index) {
columns.splice(5 + index, 0, attribute.label);
}, this);
return columns;
},
render: function (wizard) {
this.wizard = wizard;
this.sections(wizard.data.sections());
this.attributes(wizard.data.attributes());
this.gridNew([]);
this.gridExisting([]);
this.gridDeleted([]);
this.generateGrid(wizard.data.variations, wizard.data.sectionHelper);
},
force: function () {
this.variationsComponent().render(this.variations, this.attributes());
$('[data-role=step-wizard-dialog]').trigger('closeModal');
},
back: function () {
}
});
});
What I need here was to show the "Msrp" and the "Cost" while editing the variations
Related
let response = {};
var filters = {
topfeaturedandotherfields: req.body.topfeaturedandotherfields,
};
if (req.body.minprice && req.body.maxprice && req.body.brandName) {
var filters = {
$and: [
{ brandName: { $in: req.body.brandName } },
{ topfeaturedandotherfields: req.body.topfeaturedandotherfields },
{ salePrice: { $gte: req.body.minprice, $lte: req.body.maxprice } },
],
};
var result = await productService.getAllProductofhomepage(
filters,
req.body.ordername,
req.body.orderby
);
} else {
if (req.body.minprice && req.body.maxprice) {
var filters = {
$and: [
{ topfeaturedandotherfields: req.body.topfeaturedandotherfields },
{ salePrice: { $gte: req.body.minprice, $lte: req.body.maxprice } },
],
};
var result = await productService.getAllProductofhomepage(
filters,
req.body.ordername,
req.body.orderby
);
}
if (req.body.brandName) {
var filters = {
$and: [
{ brandName: { $in: req.body.brandName } },
{ topfeaturedandotherfields: req.body.topfeaturedandotherfields },
],
};
var result = await productService.getAllProductofhomepage(
filters,
req.body.ordername,
req.body.orderby
);
}
}
if (req.body.limit == true)
var result = await productService.getAllProductofhomepagewithlimit(filters);
else if (req.body.minprice || req.body.maxprice || req.body.brandName) {
} else {
var result = await productService.getAllProductofhomepage(
filters,
req.body.ordername,
req.body.orderby
);
}
if (result.length > 0) {
response = {
message: "Home page products successfully retrieved",
error: false,
data: result,
};
} else {
response = {
message: "Faild to get products",
error: true,
data: {},
};
}
res.status(200).json(response);
This code is used to filter like to see top feature and bestseller or min and max price and the brand name also in this code sort by order name which could be price or brand name or category also in ascending and descending order so now you can see this code is like if and else but I want to optimize and reduce code
You can make this query quite a lot nicer by just dynamically building the query condition instead of breaking the logic into if/else blocks:
export async function login(req: Request, res: Response): Promise<void> {
const response = {};
let filters = {
topfeaturedandotherfields: req.body.topfeaturedandotherfields,
};
if (req.body.minprice || req.body.maxprice) {
const saleCond = { };
if (req.body.minprice) {
saleCond.$gte = req.body.minprice;
}
if (req.body.maxprice) {
saleCond.$lte = req.body.maxprice;
}
filters.salePrice = saleCond
}
if (req.body.brandName) {
filters.brandName = {$in: req.body.brandName}
}
let result = [];
if (req.body.limit == true) {
result = await productService.getAllProductofhomepagewithlimit(filters)
} else {
result = await productService.getAllProductofhomepage(filters, req.body.ordername, req.body.orderby);
}
res.status(200).json({
message: result.length ? 'Home page products successfully retrieved' : 'Failed to get products',
error: result.length === 0,
data: result,
});
}
Not only is this much clearer we only removed a redundant DB call that was made in the process.
I'm trying to make a quick shopping cart with on existing project.
My list items is already is generated by php and I get work with html elements like that :
const billets = document.querySelectorAll(".card-billet");
var products = [];
billets.forEach(billet => {
products.push({
title: billet.querySelector('.card-billet-title').textContent,
price: billet.dataset.price,
qty: billet.querySelector('select[name="billet_quantity"]').value
});
});
const App = {
data() {
return {
items: products
}
},
watch: {
items: function () {
console.log("watched");
},
},
computed: {
total: function () {
console.log(this.items)
let total = 0.00;
this.items.forEach(item => {
total += (item.price * item.qty);
});
return total;
}
}
}
Vue.createApp(App).mount('#checkoutApp')
This works but only on page load but I'm trying to change the total when my select quantity changeno.
I'm a bit lost to achieve this, should I use watch but on what ? Or anything else ?
Finally I found how to achieve this, the problem was that my array was out of the vue instance so can't be updated.
I simplified the code like this :
const App = {
data() {
return {
items: []
}
},
methods: {
onChange: function (e) {
// console.log(this.items)
this.items = [];
document.querySelectorAll(".card-billet").forEach(billet => {
this.items.push({
title: billet.querySelector('.card-billet-title').textContent,
price: billet.dataset.price,
qty: billet.querySelector('.card-billet-qty-selector').value
});
});
}
},
computed: {
total: function () {
// console.log(this.items)
let total = 0.00;
this.items.forEach(item => {
total += (item.price * item.qty);
});
return total;
}
}
}
Vue.createApp(App).mount('#checkoutApp')
Could I use method call from mounted function?
in my code, I used this method.
mounted() {
this.initEvent();
this.getnewD(
$(function () {
$("#file-manager").dxFileManager({
name: "fileManager",
fileSystemProvider: customProvider,
currentPath: "Documents",
rootFolderName: "Root",
height: 450,
onErrorOcurred: function (e) {
debugger;
console.log(e);
},
permissions: {
create: true,
copy: true,
move: true,
delete: true,
rename: true,
},
customizeDetailColumns: (columns) => {
columns.push({
caption: "Creator",
dataField: "dataItem.creator",
});
return columns;
},
});
}));
},
And in my methods, I tried to used this methods to call mounted function.
But I got the customProvider is not a function.
So where has problem in my code?
methods: {
arr.forEach((item) => {
let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
let current = tree;
for (let i = 0; i < tokens.length; i++) {
if (!current[tokens[i]]) {
current[tokens[i]] = {};
}
current = current[tokens[i]];
}
});
const parseNode = function (node) {
return Object.keys(node).map((key) => {
if (Object.keys(node[key]).length === 0) {
return {
isDirectory: false,
name: key,
};
}
return {
isDirectory: true,
name: key,
items: parseNode(node[key]),
};
});
};
let result = parseNode(tree);
var objectProvider =
new DevExpress.fileManagement.ObjectFileSystemProvider({
data: new_r,
});
var customProvider =
new DevExpress.fileManagement.CustomFileSystemProvider({
getItems: function (pathInfo) {
return objectProvider.getItems(pathInfo);
},
renameItem: function (item, name) {
if (item.name == "Parent1") {
console.log("error in custom provider");
throw {
errorId: 0,
fileItem: item,
};
console.log("error in custom provider");
} else return objectProvider.renameItem(item, name);
},
createDirectory: function (parentDir, name) {
if (parentDir.name == "Parent1") {
throw {
errorId: 0,
fileItem: item,
};
} else return objectProvider.createDirectory(parentDir, name);
},
deleteItem: function (item) {
console.log(item);
if (item.name == "Parent1") {
throw {
errorId: 0,
fileItem: item,
};
} else return objectProvider.deleteItems([item]);
},
moveItem: function (item, destinationDir) {
if (item.name == "Parent1") {
throw {
errorId: 0,
fileItem: item,
};
} else
return objectProvider.moveItems([item], destinationDir);
},
copyItem: function (item, destinationDir) {
if (item.name == "Parent1") {
throw {
errorId: 0,
fileItem: item,
};
} else
return objectProvider.copyItems([item], destinationDir);
},
});
let new_r = (self.fileSystemProvider = [
{
name: "Security Manager",
isDirectory: true,
items: result,
},
]);
}
I could got the data, but couldn't got some function and displayed the customProvider is not a function.
This has no proper function name in methods: { }
arr.forEach((item) => { ... }
Your methods need to be named!
You need something like that in your methods: object:
methods: {
myfunction(items) {
items.forEach((item) => {
...
}
}
Now you can call myfunction(arr) somewhere else in your script tags
mounted() works with plain js code inside because it is a named lifecycle hook. The methods: { } object however is not a function.
According to file account/static/src/js/reconciliation_model.js in Odoo module, there is an object assignment :
var StatementModel = BasicModel.extend({
...
...
...
load: function (context) {
var self = this;
var statement_ids = context.statement_ids;
if (!statement_ids) {
return $.when();
}
this.context = context;
var def_statement = this._rpc({
model: 'account.bank.statement',
method: 'reconciliation_widget_preprocess',
args: [statement_ids],
})
.then(function (statement) {
self.statement = statement;
self.bank_statement_id = statement_ids.length === 1 ? {id: statement_ids[0], display_name: statement.statement_name} : false;
self.valuenow = 0;
self.valuemax = statement.st_lines_ids.length;
self.context.journal_id = statement.journal_id;
_.each(statement.st_lines_ids, function (id) {
self.lines[_.uniqueId('rline')] = {
id: id,
reconciled: false,
mode: 'inactive',
mv_lines: [],
offset: 0,
filter: "",
reconciliation_proposition: [],
reconcileModels: [],
};
});
});
var def_reconcileModel = this._rpc({
model: 'account.reconcile.model',
method: 'search_read',
})
.then(function (reconcileModels) {
self.reconcileModels = reconcileModels;
});
var def_account = this._rpc({
model: 'account.account',
method: 'search_read',
fields: ['code'],
})
.then(function (accounts) {
self.accounts = _.object(_.pluck(accounts, 'id'), _.pluck(accounts, 'code'));
});
return $.when(def_statement, def_reconcileModel, def_account).then(function () {
_.each(self.lines, function (line) {
line.reconcileModels = self.reconcileModels;
});
var ids = _.pluck(self.lines, 'id');
ids = ids.splice(0, self.defaultDisplayQty);
self.pagerIndex = ids.length;
return self.loadData(ids, []);
});
},
...
...
...
});
I want to change the statement :
var def_statement = this._rpc({
model: 'account.bank.statement',
method: 'reconciliation_widget_preprocess',
args: [statement_ids],
})
to
var def_statement = this._rpc({
model: 'account.bank.statement',
method: 'reconciliation_widget_preprocess_with_line',
args: [statement_ids, statement_line_ids],
})
My code is something like this :
odoo.define('my_accounting.ReconciliationModel', function (require) {
"use strict";
var BasicModel = require('web.BasicModel');
var field_utils = require('web.field_utils');
var utils = require('web.utils');
var session = require('web.session');
var CrashManager = require('web.CrashManager');
var core = require('web.core');
var _t = core._t;
var ReconciliationModel = require('account.ReconciliationModel');
var StatementModel = ReconciliationModel.StatementModel;
var MyStatementModel = StatementModel.extend({
load: function (context) {
var self = this;
var statement_ids = context.statement_ids;
if (!statement_ids) {
return $.when();
}
var statement_line_ids = context.statement_line_ids;
this.context = context;
var def_statement = this._rpc({
model: 'account.bank.statement',
method: 'reconciliation_widget_preprocess_with_line',
args: [statement_ids, statement_line_ids],
})
.then(function (statement) {
self.statement = statement;
self.bank_statement_id = statement_ids.length === 1 ? {id: statement_ids[0], display_name: statement.statement_name} : false;
self.valuenow = 0;
self.valuemax = statement.st_lines_ids.length;
self.context.journal_id = statement.journal_id;
_.each(statement.st_lines_ids, function (id) {
self.lines[_.uniqueId('rline')] = {
id: id,
reconciled: false,
mode: 'inactive',
mv_lines: [],
offset: 0,
filter: "",
reconciliation_proposition: [],
reconcileModels: [],
};
});
});
var domainReconcile = [];
if (context && context.company_ids) {
domainReconcile.push(['company_id', 'in', context.company_ids]);
}
if (context && context.active_model === 'account.journal' && context.active_ids) {
domainReconcile.push(['journal_id', 'in', [false].concat(context.active_ids)]);
}
var def_reconcileModel = this._rpc({
model: 'account.reconcile.model',
method: 'search_read',
domain: domainReconcile,
})
.then(function (reconcileModels) {
self.reconcileModels = reconcileModels;
});
var def_account = this._rpc({
model: 'account.account',
method: 'search_read',
fields: ['code'],
})
.then(function (accounts) {
self.accounts = _.object(_.pluck(accounts, 'id'), _.pluck(accounts, 'code'));
});
return $.when(def_statement, def_reconcileModel, def_account).then(function () {
_.each(self.lines, function (line) {
line.reconcileModels = self.reconcileModels;
});
var ids = _.pluck(self.lines, 'id');
ids = ids.splice(0, self.defaultDisplayQty);
self.pagerIndex = ids.length;
return self.loadData(ids, []);
});
}
});
});
It not working well. I've performed upgrade my module and still call reconciliation_widget_preprocess method instead of reconciliation_widget_preprocess_with_line in my Odoo module.
Can someone tell me what I missing? I'm using Odoo 11 community edition. I thanks to you for any clue.
You need to use include method when Patching an existing class.
var Hamster = require('web.Hamster');
Hamster.include({
sleep: function () {
this._super.apply(this, arguments);
console.log('zzzz');
},
});
I'm starting to learn and azure phonejs.
Todo list get through a standard example:
$(function() {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
var query = todoItemTable.where({ complete: false });
query.read().then(function(todoItems) {
var listItems = $.map(todoItems, function(item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<button class="item-delete">Delete</button>'))
.append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
.append($('<div>').append($('<input class="item-text">').val(item.text)));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
}, handleError);
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
function getTodoItemId(formElement) {
return $(formElement).closest('li').attr('data-todoitem-id');
}
// Handle insert
$('#add-item').submit(function(evt) {
var textbox = $('#new-item-text'),
itemText = textbox.val();
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems, handleError);
}
textbox.val('').focus();
evt.preventDefault();
});
// Handle update
$(document.body).on('change', '.item-text', function() {
var newText = $(this).val();
todoItemTable.update({ id: getTodoItemId(this), text: newText }).then(null, handleError);
});
$(document.body).on('change', '.item-complete', function() {
var isComplete = $(this).prop('checked');
todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems, handleError);
});
// Handle delete
$(document.body).on('click', '.item-delete', function () {
todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems, handleError);
});
// On initial load, start by fetching the current data
refreshTodoItems();
});
and it works!
Changed for the use of phonejs and the program stops working, even mistakes does not issue!
This my View:
<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } " >
<button data-bind="click: incrementClickCounter">Click me</button>
<span data-bind="text: listData"></span>
<div data-bind="dxList:{
dataSource: listData,
itemTemplate:'toDoItemTemplate'}">
<div data-options="dxTemplate:{ name:'toDoItemTemplate' }">
<div style="float:left; width:100%;">
<h1 data-bind="text: name"></h1>
</div>
</div>
</div>
</div>
This my ViewModel:
Application1.home = function (params) {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
var toDoArray = ko.observableArray([
{ name: "111", type: "111" },
{ name: "222", type: "222" }]);
var query = todoItemTable.where({ complete: false });
query.read().then(function (todoItems) {
for (var i = 0; i < todoItems.length; i++) {
toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
}
});
var viewModel = {
listData: toDoArray,
incrementClickCounter: function () {
todoItemTable = client.getTable('todoitem');
toDoArray.push({ name: "Zippy", type: "Unknown" });
}
};
return viewModel;
};
I can easily add items to the list of programs, but from the server list does not come:-(
I am driven to exhaustion and can not solve the problem for 3 days, which is critical for me!
Specify where my mistake! Thank U!
I suggest you use a DevExpress.data.DataSource and a DevExpress.data.CustomStore instead of ko.observableArray.
Application1.home = function (params) {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
var toDoArray = [];
var store = new DevExpress.data.CustomStore({
load: function(loadOptions) {
var d = $.Deferred();
if(toDoArray.length) {
d.resolve(toDoArray);
} else {
todoItemTable
.where({ complete: false })
.read()
.then(function(todoItems) {
for (var i = 0; i < todoItems.length; i++) {
toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
}
d.resolve(toDoArray);
});
}
return d.promise();
},
insert: function(values) {
return toDoArray.push(values) - 1;
},
remove: function(key) {
if (!(key in toDoArray))
throw Error("Unknown key");
toDoArray.splice(key, 1);
},
update: function(key, values) {
if (!(key in toDoArray))
throw Error("Unknown key");
toDoArray[key] = $.extend(true, toDoArray[key], values);
}
});
var source = new DevExpress.data.DataSource(store);
// older version
store.modified.add(function() { source.load(); });
// starting from 14.2:
// store.on("modified", function() { source.load(); });
var viewModel = {
listData: source,
incrementClickCounter: function () {
store.insert({ name: "Zippy", type: "Unknown" });
}
};
return viewModel;
}
You can read more about it here and here.