A co-worker and I have been trying to get Merchello to display a product's current inventory in the backend - specifically while looking at a sale, so it would basically appear on a lineitem. All it would have to do is basically act as a shortcut, so the people who will be managing the inventory and incoming orders, don't have to look up each product to see how many are in stock, before going to look for it.
The problem has been digging up this little bit of information in App_Plugins\Merchello\Backoffice\Merchello\saleoverview.html so it appears after quantity in the table. I am fairly new at angular, and Umbraco in general so any help would be much appreciated.
Probably the best way to do it would be to create a directive that you would place on the SalesOverview.html view. This would allow you to do your customization outside of Merchello and embed it into the view (which will make it easier to keep up to date as Merchello releases new versions).
You can even store your directive(s) in a separate App_Plugins folder and get access pretty much anything in the Merchello Angular module in the same way you do with Umbraco.
To start you could create your own module:
(function() {
angular.module('myModule', [
'merchello.models',
'merchello.directives',
'umbraco.services'
]
// this pushes your module into the merchello.plugins which Merchello already references
angular.module('merchello.plugins').requires.push('myModule');
}());
Then create your directive in your module
angular.module('myModule').directive('salesOverviewInventory', function () {
restrict: 'E',
replace: true,
scope: {
invoice: '='
},
templateUrl: '/App_Plugins/myModule/directives/salesOverviewInventory.tpl.html',
controller: function($scope ... [anything elese you need here]) {
// used in the directive view?
$scope.products = [];
// directive functionality
function init() {
// you'll probably have to watch the invoice object so that we can assert it is populated by
// the promise in the parent scope before you start looking for the product line items.
$scope.$watch('invoice', function(invoice) {
if (invoice.key !== undefined && invoice.key !== null) {
buildInventoryTable();
}
});
}
function buildInventoryTable() {
// your logic
}
// intitialize the controller
init();
}
});
and then embed it into Merchello's salesoverview.html
<sales-overview-inventory invoice="invoice" />
Hopefully this is enough to get you going. Would love to hear how it goes and see a screen shot of how it turns out =)
We ended up dumbing it down a little, due to time pressure. Instead of building the entire table in the template, we just pull the inventory count for each product. This might not be super flexible, and an entire template for it might be a little overkill, but it works for what we need for now :)
Our sale overview table now looks like this:
With a module exactly as you wrote it, and only a small change for the directive you wrote:
function buildInventoryTable(invoice) {
angular.forEach(invoice.items, function (item) {
if (item.lineItemType == "Product") {
$scope.products.push(item);
angular.forEach(item.extendedData.items, function (data) {
if (data.key == "merchProductVariantKey") {
productResource.getVariant(data.value).then(function (result) {
$scope.inventory = result.totalInventoryCount;
});
}
});
}
});
};
Other than that, the template simply contains one line:
<span>{{inventory}}</span>
And we modified the saleoverview.html to use this, by embedding it as you suggested.
Final structure of it looks like this:
With the manifest simply referencing the 2 js files.
This might not be what one would call clean, but it works for our situation :)
Showing Item Inventory In Sale Overview
Hey, hi, hello!
A co-worker and I have been trying to get Merchello to display a product's current inventory in the backend - specifically while looking at a sale, so it would basically appear on a lineitem. All it would have to do is basically act as a shortcut, so the people who will be managing the inventory and incoming orders, don't have to look up each product to see how many are in stock, before going to look for it.
The problem has been digging up this little bit of information in App_Plugins\Merchello\Backoffice\Merchello\saleoverview.html so it appears after quantity in the table. I am fairly new at angular, and Umbraco in general so any help would be much appreciated.
Regards,
Marc Ferrold
Hey Marc,
Probably the best way to do it would be to create a directive that you would place on the SalesOverview.html view. This would allow you to do your customization outside of Merchello and embed it into the view (which will make it easier to keep up to date as Merchello releases new versions).
You can even store your directive(s) in a separate App_Plugins folder and get access pretty much anything in the Merchello Angular module in the same way you do with Umbraco.
To start you could create your own module:
Then create your directive in your module
and then embed it into Merchello's salesoverview.html
Hopefully this is enough to get you going. Would love to hear how it goes and see a screen shot of how it turns out =)
Very cool, thanks for the response!
We ended up dumbing it down a little, due to time pressure. Instead of building the entire table in the template, we just pull the inventory count for each product. This might not be super flexible, and an entire template for it might be a little overkill, but it works for what we need for now :)
Our sale overview table now looks like this:
With a module exactly as you wrote it, and only a small change for the directive you wrote:
Other than that, the template simply contains one line:
And we modified the saleoverview.html to use this, by embedding it as you suggested.
Final structure of it looks like this:
With the manifest simply referencing the 2 js files.
This might not be what one would call clean, but it works for our situation :)
Thank you again very much for the help!
I was thinking you wanted another inventory related table under the invoice summary table. Your solution looks great.
is working on a reply...