I'd like to rename "Qty" into "Quantity"
Follow things I already tried:
In 'spartacus-configuration.module.ts'
i18n: {
resources: {
en: {
product: {
addToCart: {
quantity: 'Quantity'
}
}
}
}
}
in src/assets/i18n-assets/en/produkt
{
...
"addToCart": {
...
"quantity": "Quantity",
...
},
...
}
The easiest way to overwrite translation values is to provide a new resource in app.module.ts config.
Firstly, new object with specific translations should be defined:
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
and then it should be provided after default Spartacus translations:
...
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
Example code can look like this:
import { translations } from '#spartacus/assets';
import { provideConfig } from '#spartacus/core';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { EffectsModule } from '#ngrx/effects';
import { StoreModule } from '#ngrx/store';
import { I18nModule } from '#spartacus/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpartacusModule } from './spartacus/spartacus.module';
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
SpartacusModule,
I18nModule,
],
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}
For more information please look into Spartacus documentation: https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations
Related
I want to override the vuetify scss variable to change the v-text-field border-radius
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced so many warnings related to vuetify:
Code sample
/* nuxt.config */
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [ /* updated */
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
/* assets/variables.scss */
#use 'vuetify/settings' with ( /* updated */
$application-background: red,
$application-color: red
);
All defined varibales in the 'varibales.scss' are detected, but i want to override the vuetify varibales.
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced with so many warnings related to vuetify.
warrnings
nuxt.config
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
plugins/vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
assets/variables.scss
#use 'vuetify/settings' with (
$application-background: red,
$application-color: red
);
The problem is that each time i fix my tabs they start working but if i restart my server i get the following error
RROR Error: Uncaught (in promise): Error: Cannot find module '../tab1/tab1.module'
Error: Cannot find module '../tab1/tab1.module'
I have done everything i know
This is my Tabs-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
component: TabsPage,
children:[
{
path:'tab1',
children:[
{
path:'',
loadChildren:'../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path:'tab2',
children:[
{
path:'',
loadChildren:'../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path:'tab3',
children:[
{
path:'',
loadChildren:'../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path:'tab4',
children:[
{
path:'',
loadChildren:'../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path:'tab5',
children:[
{
path:'',
loadChildren:'../tab5/tab5.module#Tab5PageModule'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TabsPageRoutingModule {}
Try to change the loadChildren path:
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
}]
Or
Try importing 'Tab1PageModule' in tabs.module.ts:
import { TabsPage } from './tabs.page';
import {Tab1PageModule} from '../tab1/tab1.module'; <-- Add this line
#NgModule({
imports: [
Tab1PageModule <-- Add this line
]
})
Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,{});
nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'stud-cit',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Stud-cit site' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: 'blue'},
plugins: [
'~/plugins/vuetify',
'~/plugins/vue-awesome-swiper' ,
'~/plugins/vuePose'
],
build: {
vendor :['vue-awesome-swiper/dist/ssr'],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
}
}
};
This library has special build for SSR.
Reference
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
My project is working well with i18next library. This is my files working:
i18n/index.js
import i18n from 'i18next';
// import LanguageDetector from 'i18next-browser-languagedetector';
import pt from './locales/pt/common.json';
import en from './locales/en/common.json';
const options = {
interpolation: { escapeValue: false },
lng: 'en',
resources: {
pt: {
common: pt,
},
en: {
common: en,
},
},
fallbackLng: 'pt',
ns: ['common'],
defaultNS: 'common',
react: {
wait: true,
},
};
i18n.init(options);
export default i18n;
i18n/locales/en/common.json
"editor": {
"sidebar": {
"header": {
...
}
}
}
i18n/locales/pt/common.json
"editor": {
"sidebar": {
"header": {
...
}
}
}
However, I need to prefix my json files with en and pt-BR. This way, my project stop working. Does anyone have a simple solution?
i18n/locales/en/common.json
"en" {
"editor": {
"sidebar": {
"header": {
...
}
}
}
}
i18n/locales/pt/common.json
"pt-BR" {
"editor": {
"sidebar": {
"header": {
...
}
}
}
}
I posted this question on Gitbub and #jamuhl answered. His solution is:
resources: {
pt: {
common: pt[pt-BR],
},
en: {
common: en.en,
},
},
I'm using the route.navigate(['page']); conditionally and it does not work.
e.g
constructor(private route: Router){}
if(data.user != null) {
this.route.navigate(['page']);
} else {
alert('Please Login');
}
The URL changes but the page don't render.
This is my App Route Module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
// App Components
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { ResultsListComponent } from './results-list/results-list.component';
import { SigninComponent } from './signin/signin.component';
import { AffordabilityComponent } from
'./affordability/affordability.component';
import { RegisterComponent } from './register/register.component';
import { ShowroomComponent } from './showroom/showroom.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OffersComponent } from './offers/offers.component';
import { AdminHeaderComponent } from './admin-header/admin-
header.component';
import { FooterComponent } from './footer/footer.component';
import { DealerProfileComponent } from './dealer-profile/dealer-
profile.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
// { path: '**', redirectTo: '', pathMatch: 'full' },
{ path: 'search_results', component: ResultsListComponent },
{ path: 'signin', component: SigninComponent },
{ path: 'results', component: AffordabilityComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'showroom', component: ShowroomComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'offers', component: OffersComponent },
{ path: 'profile', component: DealerProfileComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [
HeaderComponent,
HomeComponent,
ResultsListComponent,
SigninComponent,
AffordabilityComponent,
RegisterComponent,
ShowroomComponent,
AdminComponent,
DashboardComponent,
OffersComponent,
AdminHeaderComponent,
FooterComponent,
DealerProfileComponent
];