Laravel - Extend Vue.js in Custom Extension

Help for integrating the Laravel package
Forum rules
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
mohal_04
Advanced
Posts: 108
Joined: 27 Mar 2018, 05:59

Laravel - Extend Vue.js in Custom Extension

Post by mohal_04 » 13 Apr 2018, 06:35

Hello again,

So, I was making few changes in Stock Section of Product Edit form. So, I have added another field for stock.
207.jpg
207.jpg (23.61 KiB) Viewed 8761 times
And want to sum up both stocks using JavaScript. So, I added some code in Vue.js file, i.e. product.js file inside themes directory. Here is the complete path:

./ext/ai-admin-jqadm/admin/jqadm/themes/product.js

It is working fine but I think as it is a custom code, therefore, I should put it under my extension like the path below:

./ext/myextension/admin/jqadm/themes/product.js

But when I do it, the sum up functionality doesn't work. Below is my modified product.js file code, which I added:

Code: Select all

Aimeos.Product.Stock = {

	init : function()  {

		this.vstock = new Vue({
			'el': '.item-stock .stock-list',
			'data': {
				'items': $(".item-stock .stock-list").data("items"),
				'keys': $(".item-stock .stock-list").data("keys"),
				'prefix': $(".item-stock .stock-list").data("prefix"),
				'siteid': $(".item-stock .stock-list").data("siteid"),
				'numtypes': $(".item-stock .stock-list").data("numtypes")
			},
			methods: {
				checkSite : function(key, idx) {
					return this.items[key][idx] != this.siteid;
				},

				totalStock : function() {
					var totalStock = 0;
					for(var key in this.items['stock.stocklevel']) {
						if(!isNaN(parseInt(this.items['stock.stocklevel'][key])))
							totalStock += parseInt(this.items['stock.stocklevel'][key]);
						console.log(totalStock);
					}
					$('.item-stocktotal').val(totalStock);
				},

				addItem : function() {

					var idx = (this.items[this.prefix + 'id'] || []).length;

					for(var key in this.keys) {
						key = this.keys[key]; this.$set(this.items, key, (this.items[key] || []).concat(['']));
					}

					this.$set(this.items[this.prefix + 'siteid'], idx, this.siteid);
					this.numtypes--;
				},


				removeItem : function(idx) {
					for(key in this.items) {
						this.items[key].splice(idx, 1);
					}
					this.numtypes++;
				}
			}
		});
		this.vstock.totalStock()
	}
};
totalStock is the function that I added. Can anyone guide me how to extend Vue.js files?

Thanks!

User avatar
peter69
Posts: 95
Joined: 09 Jun 2022, 19:31

Re: Laravel - Extend Vue.js in Custom Extension

Post by peter69 » 11 Nov 2022, 21:37

I think the only way to do it is to contribute to ai-admin-jqadm: https://github.com/aimeos/ai-admin-jqadm

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Laravel - Extend Vue.js in Custom Extension

Post by aimeos » 12 Nov 2022, 05:30

You can overwrite anything in Aimeos besides PHP base classes :-)

Just put your JS code in the ./ext/myextension/themes/admin/jqadm/custom.js:
https://aimeos.org/docs/latest/admin/jqadm/customize/
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

User avatar
peter69
Posts: 95
Joined: 09 Jun 2022, 19:31

Re: Laravel - Extend Vue.js in Custom Extension

Post by peter69 » 12 Nov 2022, 05:56

I will try!

Thank you!

Post Reply