I am trying to do localization with i18n and vue.
I have an object from which I print the field names.
How do I localize the names of these fields in the object itself? I'm trying to do something like this:
export const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'ru',
messages: {
en: {
nameTxt: 'Name',
phoneTxt: 'Phone',
emailTxt: 'Email',
someField1Txt: 'Some Field 1',
someField2Txt: 'Some Field 2',
},
ru: {
nameTxt: 'Имя',
phoneTxt: 'Телефон',
emailTxt: 'Электронный адрес',
someField1Txt: 'Дополнительное поле 1',
someField2Txt: 'Дополнительное поле 2',
}
}
})
data() {
return {
info: [
{
name: this.$t('nameTxt'),
value: '',
pattern: /^[a-zA-Z ]{2,30}$/
},
{
name: this.$t('phoneTxt'),
value: '',
pattern: /^[0-9]{7,14}$/
},
{
name: this.$t('emailTxt'),
value: '',
pattern: /.+/
},
{
name: this.$t('someField1Txt'),
value: '',
pattern: /.+/
},
{
name: this.$t('someField2Txt'),
value: '',
pattern: /.+/
}
],
import i18n from 'VueI18n instance file'
...
data() {
return {
info: [
{
name: i18n.t('nameTxt'),
value: '',
pattern: /^[a-zA-Z ]{2,30}$/
},
...
Just use the t method of the i18n instance.
Related
i am building a ecommerce site.
I have trouble adding orderItems to the Array in the Order-Document.
As you can see i am trying to reference the customer-Document and Product-Dokument in my orderItem. i am Posting in an array of objects that looks like:
[
{
productId: '5b79b3f8-6ef8-4c6d-bd85-5dcb14fb836d',
kundenId: 'c3777230-74cd-411b-a455-7fa905c90957',
quant: 1,
name: 'Position 1'
}
]
Can someone help me how i get sanity to understand the strings as _ref ?
My schemas are as follows:
export default {
title: 'Order Item',
name: 'orderItem',
type: 'object',
fields: [
{
title: 'Name',
name: 'name',
type: 'string',
},
{
name: 'kundenId',
title: 'Customer',
type: 'reference',
to: [{ type: 'customer' }],
options: {
disableNew: true,
},
},
{
name: 'productId',
title: 'Product',
type: 'reference',
to: [{ type: 'product' }],
options: {
disableNew: true,
},
},
{
title: 'Quantity',
name: 'quant',
type: 'number',
},
{
title: 'Price',
name: 'price',
type: 'number',
},
],
};
and:
export default {
name: 'order',
title: 'Order',
type: 'document',
fields: [
{
name: 'user',
title: 'User',
type: 'reference',
to: [{ type: 'user' }],
options: {
disableNew: true,
},
},
{
name: 'userName',
title: 'User Name',
type: 'string',
},
{
title: 'Order Items',
name: 'orderItems',
type: 'array',
of: [
{
title: 'Order Item',
type: 'orderItem',
},
],
},
{
title: 'CreatedAt',
name: 'createdAt',
type: 'datetime',
},
],
};
so i solved this by using JSON.parse like so:
productId: JSON.parse(`{"_ref":"${artikel._id}"}`),
Good luck to everyone with the same issue.
I work with dynamic routes similar a this form:
router.js
...
{
path: "/init/clients/moral-person/:company",
name: "moralPerson",
component: () => import('../MoralPerson.vue'),
meta: {
auth: true,
breadcrumb: [
{ text: "Init", disabled: false, name: "init" },
{ text: "Clients", disabled: true, name: "" },
{ text: "Moral Person", disabled: false, name: "crudMoralPerson"},
{ text: "Company", disabled: true, name: "", icon: "fas fa-dollar-sign"},
]
}
}
...
NOTE: The part of breadcrumb is render for other component.
When I do router.push is this:
Some File
...
this.$router.push({
name: "moralPerson",
params: { company: this.nameCompany }
});
...
Finally looks similar this:
I try to use the this.router.params, in this case :company and colocate in the part blue I mark or here:
router.js
...
// in this line
{ text: :company, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...
My question is, How access this param and colocate in this part I need?
EDIT
I try with:
...
{ text: this.$route.params.empresa, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...
And always send me:
Let see, in your router configuration you are indicating that moralPerson component will receive a param called company, isn't it?
this.$router.push({
name: "moralPerson",
params: { company: this.nameCompany }
});
The code above is correct, you must call your component using name if you want to pass some params.
To access this param you must do the following, mainly inside created lifecycle function:
this.$route.params.company
I hope this could help you
Try something like this:
{
path: '/init/clients/moral-person/:company'
name: 'moralPerson',
component: () => import('../MoralPerson.vue'),
meta() {
return {
auth: true,
breadcrumb: [
{ text: 'Init', disabled: false, name: 'init' },
{ text: 'Clients', disabled: true, name: '' },
{ text: 'Moral Person', disabled: false, name: 'crudMoralPerson' },
{ text: this.params.company, disabled: true, name: '', icon: 'fas fa-dollar-sign' },
],
};
},
},
When you call the meta function, try this this.$route.meta(), because now the meta property is a function.
I'm trying to find a product variant inside my list of products(on sanity.io using GROQ), to do so, I have the sku of the variant that I want.
The query I'm using is
*[_type == "product" && variants[].sku.current =="kit-kat-wasabi-5" ]
But this query returns an empty array. I'm sure that the sku is correct because if I leave the filter aside, and fetch all I can find it.
I tried replacing the "==" with match, but the result is the same.
my schemas are
procuct
export default {
name: 'product',
title: 'Product',
type: 'document',
fields: [
{
name: 'title',
title: 'Inner Title',
type: 'string'
},
{
title: 'SKU',
name: 'sku',
type: 'slug',
options: {
source: 'title',
maxLength: 96
},
validation: Rule => Rule.required()
},
{
name: 'titleWebsite',
title: 'Title Website',
type: 'localeString'
},
{
name: 'active',
title: 'Active',
type: 'boolean'
},
{
name: 'mainImage',
title: 'Imagem',
type:"image"
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96
}
},
{
title: 'Base Price',
name: 'basePrice',
type: 'localeCurrency'
},
{
title: 'Quantidade',
name: 'qty',
type: 'number'
},
/* {
title: 'Default variant',
name: 'defaultProductVariant',
type: 'productVariant'
},*/
{
title: 'Variants',
name: 'variants',
type: 'array',
of: [
{
title: 'Variant',
type: 'productVariant'
}
]
},
{
title: 'Tags',
name: 'tags',
type: 'array',
of: [
{
type: 'string'
}
],
options: {
layout: 'tags'
}
},
{
name: 'vendor',
title: 'Vendor',
type: 'reference',
to: {type: 'vendor'}
},
{
name: 'blurb',
title: 'Blurb',
type: 'localeString'
},
{
name: 'categories',
title: 'Categories',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'category'}
}
]
},
{
name: 'body',
title: 'Body',
type: 'localeBlockContent'
}
],
preview: {
select: {
title: 'title',
manufactor: 'manufactor.title',
media: 'mainImage'
}
}
}
And productVariant
export default {
title: 'Product variant',
name: 'productVariant',
type: 'object',
fields: [
{
title: 'Title',
name: 'title',
type: 'string'
},
{
title: 'Title Website',
name: 'titleWebsite',
type: 'localeString'
},
{
title: 'Weight in grams',
name: 'grams',
type: 'number'
},
{
title: 'Price',
name: 'price',
type: 'localeCurrency'
},
{
title: 'SKU',
name: 'sku',
type: 'slug',
options: {
source: 'title',
maxLength: 96
},
validation: Rule => Rule.required()
},
{
title: 'Taxable',
name: 'taxable',
type: 'boolean'
},
{
name: 'blurb',
title: 'Blurb',
type: 'localeString'
},
{
name: 'images',
title: 'Images',
type: 'array',
of: [
{
type: 'image',
options: {
hotspot: true
}
}
]
},
{
title: 'Quantidade',
name: 'qty',
type: 'number'
},
{
title: 'Bar code',
name: 'barcode',
type: 'barcode'
}
]
}
This is a known bug in GROQ when traversing arrays. This will introduce breaking changes if it were to be fixed in GROQ v1. It will therefore be fixed in GROQ v2.
Here is a bug report explaining the issue: https://github.com/sanity-io/sanity/issues/1557. You can show your interest in this problem here.
There's a working draft for version two here: https://github.com/sanity-io/groq.
Regarding your schema, I would consider to change the type of the sku field to be something else, for example a string, and create a new field for the slug which has its source property set to the SKU to be automatically be generated by that field. Documentation for that can be found here: https://www.sanity.io/docs/slug-type.
I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
how to do that when changing the site language, the meta page also changed?
I use
vue-i18n - https://kazupon.github.io/vue-i18n/
vue-meta - https://www.npmjs.com/package/vue-meta.
App.vue
export default {
name: 'Name',
metaInfo: {
title: 'Title', // set a title
titleTemplate: '%s - title', // %s required
htmlAttrs: {
lang: 'ru',
amp: undefined // "amp" has no value
},
meta: [
{ 'name':'og:title',
'content': 'title',
},
{ 'name':'metatitle',
'content': 'title',
},
{ 'name':'og:description',
'content': 'Description',
},
{ 'name':'description',
'content': 'Description',
}
]
},
data(){return{ }},
mounted() {}
Instead of defining metaInfo as an object, define it as a function and access this as usual.
export default {
metaInfo () {
return { title: this.$t("home.title") }
}
}
Et voilà ! :)