I need to modify 'preConfigureProduct' function under vuestorefront/core/modules/catalog/helpers/search.ts
https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog/helpers/search.ts#L51
I need to do the customisation based on my client requirement. Thus I need to override this function in my project.
But there is no document about how to override one function from helper. I am also new in vue storefront, so I dont fully understand module extending or mixins.
Thanks in advance.
I have figured out by myself, I will leave a short answer for who is stuck as well.
Additionally, I am not really sure it is a good practise, if you know a better way, leave it here please.
From what I understood is if you need to overwrite one function from helper, you also need to 'overwrite' the function which called your helper function.
In my case, I need to overwrite function preConfigureProduct , from module catalog helper.
The function called this preConfigureProduct is one asyc function configureProducts from module catalog-next, https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog-next/store/category/deprecatedActions.ts#L22.
(I know it is deprecatedActions. It is my next job to figure out how to switch to new ones)
Thus, I extended module catalog-next, and literally copy paste configureProducts(because I dont need to modify it), but import preConfigureProduct to my new file.
import { preConfigureProduct } from './helpers/search'
my new search.ts file:
import Vue from 'vue';
import config from 'config';
export const preConfigureProduct = ({ product, populateRequestCacheTags }) => {
.....
return product;
};
That is it !
Hopefully it helps others.
If there is any mistake, welcome to point it out.
Related
I"m porting my new app from vue2 to vue3. Since mixins are not recommended way of reusing code in vue3, Im trying to convert them into composable.
I've 2 mixins (methods) __(key) and __n(key, number) in mixins/translate.js which will translate any word into the app's locale.
module.exports = {
methods: {
/**
* Translate the given key.
*/
__(key, replace = {}) {
// logic
return translation
}
Now this is how I converted it as
Composables/translate.js
export function __(key, replace = {}) {
// logic
return translation
}
and since I need these functions to be accessbile in every component without explicitly importing. I'm importing it in app.js
import {__, __n} from '#/Composables/translate.js';
Questions
__() is not accessible in every component. How to make this function accessible in every component without explicit import
Is this the right of doing things?
These functions are required essentially in every component, declaring them in every component is impractical.
#1, You can put it into the globalProperties object
import {__, __n} from '#/Composables/translate.js';
const app = createApp(AppComponent);
app.config.globalProperties.__ = __;
app.config.globalProperties.__n = __n;
#2, though opinion based, importing for every component that needs it would be my preferred way.
I have gone through the composition api docs for vee-validate, and I can definitely get my validation working on my forms if I follow the pattern described in their docs.
I don't feel comfortable however doing it as documented there, as I just feel I'm writing too much code for each form, and I do not want to repeat myself.
So I've been experimeting a bit with how I can optimise this, and this is what we currently came up with, but I'm a bit stuck now.
You can see the code example on https://codesandbox.io/s/restless-star-1qwgb, but I'll walk you through.
Consider we want to create a form for creating a new Invoice.
An invoice is typically composed of the Invoice model with a number of InvoiceElements attached to it. (the invoice lines)
In our vueJs codebase, we have javascript classes representing each model that we need to work with, so you'll find a class Invoice and a class InvoiceElement, both extending BaseModel which already providers some basic functionality.
On each mode, we have defined a static method returning a yup validation schema, e.g.:
import * as yup from "yup";
import BaseModel from "./BaseModel";
import InvoiceElement from "./InvoiceElement";
export default class Invoice extends BaseModel {
static get validationSchema() {
return yup.object().shape({
due_date: yup.date().min(new Date()).default("2021-09-30"),
reference: yup.string(),
elements: yup
.array()
.of(InvoiceElement.validationSchema)
.default([InvoiceElement.validationSchema.getDefault()])
});
}
}
As you can see, we also define default values for each of the schema fields.
This allows us to do the following in our form component:
setup() {
let { handleSubmit, errors, values } = useForm({
validationSchema: Invoice.validationSchema,
initialValues: Invoice.validationSchema.getDefault(),
validateOnMount: false,
});
let addLine = () => {
values.elements.push(InvoiceElement.validationSchema.getDefault());
};
let submitForm = handleSubmit((values) => {
alert("form was valid and we submit data here");
});
return {
values,
errors,
addLine,
submitForm,
};
}
Okay - I'm very happy with this as we now have:
values which is reactive and I can just bind to my inputs using ```
errors which has my errors
When I submit the form, it correctly triggers vee-validate's handleSubmit() method and my errors get correctly updated.
My main issue with this approach now is how to trigger the validation of the fields when they get updated. The main goal is to avoid having to write too much code using the useField() composable.
I know I'm not following the proposed pattern, but it just kept feeling as if we were writing too much code, and we seem quite close to a good pattern, but I just don't get the last bits...
Maybe someone on here does though :-)
Generally, the docs are only meant to show you "how it works", but I do agree that useField is very verbose if used incorrectly. Using it for models isn't the intended use-case.
For example:
// Very verbose and not the intended use-case
const { value: email } = useField(...);
const { value: password } = useField(...);
The main purpose of useField is to help create input components that can be validated, that if you are willing to couple your form components with vee-validate which I find reasonable in 80% of situations.
To try to answer your issue, since you want to avoid using useField you could actually make use of the other useXXX functions called composition helpers. Like useValidateField which creates a function for you that can validate any field given it was created in a child of a useForm component.
const validate = useValidateField('fieldName');
validate(); // triggers validation on the field
I have just started my first project with Vue.js, I have managed to do a lot of basic things and now I am trying to structure the project. I want to achieve the highest possible code reuse. One of the most frequent cases of my application is going to be showing messages of different types, confirmation, information, etc. For this reason, I want to create a mechanism that allows me to launch these messages globally, regardless of where I call them.
As far as I have been able to advance, I have opted for the following variant:
1- I have created a directory called classes in my src directory.
2- I have created a file called MessageBox.js inside classes directory with the following content:
import Vue from 'vue';
export default class MessageBox extends Vue {
confirm() {
return alert('Confirm');
}
information() {
return alert('Information');
}
}
I define it like this because I want to call these methods globally as follows:
MessageBox.confirm();
I am really new to Vue.js and I was wondering if there is any other way to achieve the results I am looking for in a more efficient way .... or .. maybe more elegant?
Thank you very much in advance..
There are at least 2 ways of going about this:
Event bus
Rely on Vue.js internals to create a simple EventBus. This is a design pattern used in Vue.js.
Create a file and add the following lines to it
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
Create your component that takes care of displaying global dialogs. This is usually registered at the top of the tree, so it can cover the entire real estate.
Import the event bus import EventBus from 'event_bus' and then register for the new events
EventBus.$on('SHOW_CONFIRM', (data) => {
// business logic regarding confirm dialog
})
Now you can import it in any component that wants to fire an event like so
EventBus.$emit('SHOW_CONFIRM', confirmData);
Vuex
You can also use vuex to store global data regarding dialogs and add mutations to trigger the display of the dialogs.
Again, you should define a component that takes care of displaying and push it towards the top of the visual tree.
Note: in both cases you should handle cases in which multiple dialog need to be shown at the same time. Usually using a queue inside the displaying component works.
It's an antipattern in modern JavaScript to merge helper functions that don't rely on class instance into a class. Modules play the role of namespaces.
Helper functions can be defined as is:
messageBox.js
export function confirm() {
return alert('Confirm');
}
They can be imported and used in component methods. In case they need to be used in templates, they can be assigned to methods where needed one by one:
Some.vue
import { confirm } from './util/messageBox';
export default {
methods: { confirm }
}
Or all at once:
import * as messageBox from './util/messageBox';
export default {
methods: { ...messageBox }
}
Helpers can be also be made reusable as Vue mixins:
messageBox.js
...
export const confirmMixin = {
methods: { confirm };
}
export default {
methods: { confirm, information };
}
And used either per component:
Some.vue
import { confirmMixin } from './util/messageBox';
export default {
mixins: [confirmMixin]
}
Or globally (isn't recommended because this introduces same maintenance problems as the use of global variables):
import messageBoxMixin from './util/messageBox';
Vue.mixin(messageBoxMixin);
I'm trying to get Kendo working in Aurelia and it is not going too easy...
The following call inside the VM attached() hook throws a "jQuery(...).kendoPager is not a function" exception in shim.min.js:1444:
jQuery("#pager").kendoPager({
dataSource: dataSource
});
I've experimented with a number of ways to define the GlobalBehavior.jQueryPlugins() setting with the following being my best attempt thus far in main.js:
import {GlobalBehavior} from 'aurelia-templating-resources';
GlobalBehavior.jQueryPlugins["kendopager"] = "kendoPager";
Unfortunately there is not much documentation about this so one is prodding in the dark a bit so any help will be appreciated.
Normal jQuery functions work fine here so the problem does appear to be related to using Kendo.
Thanks in advance
You installed dependency with JSPM, but you also need to import it in your VM class file. Put this import statement at the top of the file:
import {kendoUi} from 'kendo-ui';
After that you will be able to use in attached hook:
jQuery("#pager").kendoPager({
dataSource: dataSource
});
Just one note, it's better not to refer to DOM elements but hardcoded selectors. You would better create a reference to element in template
<div ref="pager"></div>
and then in view-model have
jQuery(this.pager).kendoPager({
dataSource: dataSource
});
I got div with if.bind working as was suggested in this question: Using literal JavaScript values in an Aurelia view. But then I noticed that showTemplate on viewModel is being constantly checked by framework, about 10 times per second. The stack is following:
execute._prototypeProperties.visible.get (welcome.js:29)
getValue (dirty-checking.js:93)
isDirty (dirty-checking.js:127)
check (dirty-checking.js:63)
(anonymous function) (dirty-checking.js:49)
Is it supposed to be like this? Seems to be not very resource-friendly.
Best regards, Eugene.
Aurelia uses Object.observe for simple Javascript properties. If showTemplate is a function or a getter/setter, then Aurelia currently reverts to dirty checking. This can be removed by declaring the dependencies of the function. This is outlined here: https://github.com/aurelia/binding/pull/41
I have created a version of the Aurelia Skeleton project that implements this: https://github.com/ashleygrant/skeleton-navigation/tree/declare_dependencies
To implement this, you must switch to using the aurelia-main attribute. Add a main.js file:
import {LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';
import {ComputedObservationAdapter, ObjectObservationAdapter} from 'aurelia-framework';
LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.levels.debug);
export function configure(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.router()
.eventAggregator();
aurelia.container
.registerSingleton(ObjectObservationAdapter, ComputedObservationAdapter);
aurelia.start().then(a => a.setRoot('app', document.body));
}
Then, in welcome.js, add the following import statement:
import {declarePropertyDependencies} from 'aurelia-framework';
and then outside the Welcome class, add the following method call:
declarePropertyDependencies(Welcome, 'fullName', ['firstName', 'lastName']);