added Persian language and language switcher feature

assets/css/aside.css

@@ -9,7 +9,7 @@
  background-color: rgb(240, 255, 244) !important;
  }
  .btn-toggle {
- display: inline-flex;
+ display: flex;
  align-items: center;
  padding: .25rem .5rem;
  background-color: transparent;
@@ -28,6 +28,4 @@
  }
  .sub-category{
  margin-left: 1.75rem !important;
- }
-
-.fw-semibold { font-weight: 600; }
+ }

assets/scss/custom.scss

@@ -1,12 +1,41 @@
-@import './variable';
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-
+@font-face {
+ font-family: "Vazir";
+ src: url("./../fonts/vazir/Vazir-Light-UI.eot") format("embedded-opentype"),
+ url("./../fonts/vazir/Vazir-Light-UI.ttf") format("truetype"),
+ url("./../fonts/vazir/Vazir-Light-UI.woff") format("woff"),
+ url("./../fonts/vazir/Vazir-Light-UI.woff2") format("woff2");
+ font-weight: 300;
+}
+@font-face {
+ font-family: "Vazir";
+ src: url("./../fonts/vazir/Vazir-Regular-UI.eot") format("embedded-opentype"),
+ url("./../fonts/vazir/Vazir-Regular-UI.ttf") format("truetype"),
+ url("./../fonts/vazir/Vazir-Regular-UI.woff") format("woff"),
+ url("./../fonts/vazir/Vazir-Regular-UI.woff2") format("woff2");
+ font-weight: 400;
+}
+@font-face {
+ font-family: "Vazir";
+ src: url("./../fonts/vazir/Vazir-Medium-UI.eot") format("embedded-opentype"),
+ url("./../fonts/vazir/Vazir-Medium-UI.ttf") format("truetype"),
+ url("./../fonts/vazir/Vazir-Medium-UI.woff") format("woff"),
+ url("./../fonts/vazir/Vazir-Medium-UI.woff2") format("woff2");
+ font-weight: 500;
+}
+@font-face {
+ font-family: "Vazir";
+ src: url("./../fonts/vazir/Vazir-Bold-UI.eot") format("embedded-opentype"),
+ url("./../fonts/vazir/Vazir-Bold-UI.ttf") format("truetype"),
+ url("./../fonts/vazir/Vazir-Bold-UI.woff") format("woff"),
+ url("./../fonts/vazir/Vazir-Bold-UI.woff2") format("woff2");
+ font-weight: 700;
+}
 html,body{
  height: 100%;
 }
 body {
  overflow-x: hidden !important;
- font-family: 'Roboto', sans-serif;
+ font-family: 'Vazir', sans-serif;
  background-color: $light;
  height: 100%;
 }
@@ -69,7 +98,9 @@ a {
 .nav-pills .nav-link.active {
  color: $white !important;
 }
-
+.dir-rtl{
+ direction: rtl !important;
+}
 // for appHeader
 @mixin hoverCart {
  color: $primary !important;
@@ -168,7 +199,6 @@ button.bg-white:focus {
 
  .b-icon {
  color: $secondary !important;
- margin-left: 0 !important;
  }
 }
 .checkout.btn-primary{
@@ -180,6 +210,32 @@ button.bg-white:focus {
  font-size: 1rem !important;
  }
 }
+.lang-switch{
+ border-radius: 1.5rem;
+ .other-locale{
+ top: 25px;
+ left: 0;
+ li{
+ a{
+ &:hover{
+ color: $primary !important;
+ }
+ }
+ }
+ &_active{
+ background-color: rgb(240, 255, 244) !important;
+ a{
+ color: $primary !important;
+ }
+ }
+ }
+}
+.lang-switch.lang-sm{
+ .other-locale{
+ bottom: 10px !important;
+ top: auto !important;
+ }
+}
 // for index page
 .swiper-pagination-bullet-active {
  background: $primary !important;
@@ -275,4 +331,7 @@ button.bg-white:focus {
  transform: translateY(-2px);
  }
  }
+}
+.swiper-button-next , .swiper-button-prev{
+ z-index: 2 !important;
 }

assets/scss/theme.scss

@@ -4,4 +4,4 @@
 @import '~bootstrap/scss/bootstrap.scss';
 @import '~bootstrap-vue/src/index.scss';
 // custom scss
-//@import './custom.scss';
+@import './custom.scss';

components/aside/asideLayout.vue

@@ -1,6 +1,6 @@
 <template>
  <aside class="category-aside position-sticky flex-shrink-0 p-3 bg-white">
- <div class="fs-5 fw-semibold pb-3 mb-3 border-bottom">Result Categories</div>
+ <div class="pb-3 mb-3 border-bottom" :class="[{'text-right':$i18n.locale==='fa'}]">{{$t('categoryAside.header')}}</div>
  <ul class="list-unstyled ps-0">
  <slot name="beforeDivider"></slot>
  <li class="border-top my-3"></li>

components/aside/collapseItem.vue

@@ -1,13 +1,13 @@
 <template>
  <li class="mb-1">
- <nuxt-link v-if="link" :to="linkRoute" exact>
+ <nuxt-link v-if="link" :to="localePath(`${linkRoute}`)" exact>
  <b-button
  variant="white"
  class="btn-toggle text-secondary"
  :v-b-toggle="id"
  @click="collapse = !collapse"
  >
- <b-icon :icon="collapse ? 'chevron-down' : 'chevron-right'"></b-icon>
+ <b-icon :icon="collapse ? 'chevron-down' : 'chevron-right'" :class="[{'collapse-icon-rtl':$i18n.locale==='fa'}]"></b-icon>
  {{name}}
  </b-button>
  </nuxt-link>
@@ -18,19 +18,19 @@
  :v-b-toggle="id"
  @click="collapse = !collapse"
  >
- <b-icon :icon="collapse ? 'chevron-down' : 'chevron-right'"></b-icon>
+ <b-icon :icon="collapse ? 'chevron-down' : 'chevron-right'" :class="[{'collapse-icon-rtl':$i18n.locale==='fa'}]"></b-icon>
  {{name}}
  </b-button>
  <b-collapse :visible="collapse" :id="id">
- <ul class="btn-toggle-nav list-unstyled pb-1 font-14">
+ <ul class="btn-toggle-nav list-unstyled pb-1 font-14" :class="[{'text-right':$i18n.locale==='fa'}]">
  <li v-for="(i, key) in items" :key="key">
  <nuxt-link
- :to="i.route"
+ :to="localePath(`${i.route}`)"
  exact
  exact-active-class="active-category text-primary"
  class="link-dark rounded"
  >
- {{ key }}
+ {{$i18n.locale==='en'? key:i.titleFa }}
  </nuxt-link>
  </li>
  </ul>
@@ -47,3 +47,8 @@ export default {
  props:{name:String,visible:Boolean,id:String,items:Object,link:Boolean,linkRoute:String}
 };
 </script>
+<style lang="scss">
+.bi-chevron-right.collapse-icon-rtl{
+ transform:rotate(180deg);
+}
+</style>

components/aside/item.vue

@@ -1,7 +1,7 @@
 <template>
  <li class="mb-1">
  <nuxt-link
- :to="route"
+ :to="localePath(`${route}`)"
  class="btn btn-toggle align-items-center rounded"
  exact
  exact-active-class="active-category text-primary"

components/breadcrumb.vue

@@ -1,17 +1,17 @@
 <template>
  <div class="d-flex mb-1 breadcrumb bg-light">
- <nuxt-link to="/" exact>
- Home
+ <nuxt-link :to="localePath('/')" exact>
+ {{$tc('header.categoriesSm',1)}}
  </nuxt-link>
  <span class="breadcrumb-divider">/</span>
- <nuxt-link to="/Products" exact >
- Products
+ <nuxt-link :to="localePath('/Products')" exact >
+ {{$tc('header.categoriesSm',2)}}
  </nuxt-link>
  <span class="breadcrumb-divider">/</span>
- <nuxt-link v-if="subCrumb" :to="'/Products/category/'+subCrumbName" exact >
+ <nuxt-link v-if="subCrumb" :to="localePath(`/Products/category/${subCrumbPath}`)" exact >
  {{subCrumbName}}
  </nuxt-link>
- <nuxt-link v-if="subCrumbSingle" :to="'/Products/'+subPath+'/'+subCrumbName" exact >
+ <nuxt-link v-if="subCrumbSingle" :to="localePath(`/Products/${subPath}/${subCrumbPath}`)" exact >
  {{subCrumbName}}
  </nuxt-link>
  <span v-if="subCrumb || subCrumbSingle" class="breadcrumb-divider">/</span>
@@ -22,7 +22,7 @@
 </template>
 <script>
 export default {
- props: { activeText: String,subCrumb:Boolean,subCrumbSingle:Boolean,subPath:String,subCrumbName:String },
+ props: { activeText: String,subCrumb:Boolean,subCrumbSingle:Boolean,subPath:String,subCrumbName:String,subCrumbPath:String },
 };
 </script>
 <style scoped>

components/category/categoryList.vue

@@ -1,22 +1,22 @@
 <template>
  <div class="category w-100 bg-white">
- <h4 class="mb-4 font-weight-bold">Category</h4>
+ <h4 class="mb-4 font-weight-bold" :class="[{'text-right':$i18n.locale==='fa'}]">{{$t('categoryTitle')}}</h4>
  <div class="d-flex flex-wrap">
- <nuxt-link v-for="(i,key) in products" :key="key" :to="subRoute+key" class="category-item bg-light d-flex flex-column justify-content-center align-items-center mx-4">
+ <nuxt-link v-for="(i,key) in products" :key="key" :to="localePath(`${subRoute}${key}`)" class="category-item bg-light d-flex flex-column justify-content-center align-items-center mx-4">
  <div class="category-item_img">
  <img :src="i.cover" :alt="key">
  </div>
- <div class="font-weight-bold">
- {{key}}
+ <div class="font-weight-bold text-center">
+ {{$i18n.locale=="en"?key:i.titleFa}}
  </div>
  </nuxt-link>
  <template v-if="products2">
- <nuxt-link v-for="(i,key) in products2" :key="key" :to="subRoute2+key" class="category-item bg-light d-flex flex-column justify-content-center align-items-center mx-4">
+ <nuxt-link v-for="(i,key) in products2" :key="key" :to="localePath(`${subRoute2}${key}`)" class="category-item bg-light d-flex flex-column justify-content-center align-items-center mx-4">
  <div class="category-item_img">
  <img :src="i.cover" :alt="key">
  </div>
- <div class="font-weight-bold">
- {{key}}
+ <div class="font-weight-bold text-center">
+ {{$i18n.locale=="en"?key:i.titleFa}}
  </div>
  </nuxt-link>
  </template>

components/category/categoryListSm.vue

@@ -3,7 +3,7 @@
  <nuxt-link
  v-for="(i, key) in products"
  :key="key"
- :to="subRoute?subRoute + key:i.route"
+ :to="localePath(`${subRoute?subRoute + key:i.route}`)"
  exact-active-class="active"
  exact
  class="category-sm-item d-flex justify-content-center align-items-center p-1 p-sm-3 font-16 font-sm-18 "
@@ -13,22 +13,22 @@
  <span v-else :class="['icon',i.iconClass]"></span>
  </div>
  <div class="font-weight-bold">
- {{ key }}
+ {{$i18n.locale==="en"? key:i.titleFa }}
  </div>
  </nuxt-link>
  <template v-if="products2">
  <nuxt-link
  v-for="(i, key) in products2"
  :key="key"
- :to="subRoute2 + key"
+ :to="localePath(`${subRoute2 + key}`)"
  class="category-sm-item d-flex justify-content-center align-items-center p-1 p-sm-3 font-16 font-sm-18"
  >
  <div class="category-sm-item_cover font-16 font-sm-18 px-1 font-weight-bold">
  <b-icon v-if="i.icon" :icon="i.icon"></b-icon>
  <span v-else :class="['icon',i.iconClass]"></span>
  </div>
  <div class="font-weight-bold">
- {{ key }}
+ {{ $i18n.locale==="en"? key:i.titleFa }}
  </div>
  </nuxt-link>
  </template>

components/category/subCategoryPage.vue

@@ -4,8 +4,8 @@
  <div class="col-lg-3 col-xl-2 d-none d-lg-block">
  <asideLayout>
  <div slot="beforeDivider">
- <item name="Digital products" :route="subCategoryItems.route" />
- <collapseItem name="Products" :visible=true id="collapse-2" :items="subCategoryItems.products" />
+ <item :name="topItemName" :route="subCategoryItems.route" />
+ <collapseItem :name="$tc('header.categoriesSm',2)" :visible=true id="collapse-2" :items="subCategoryItems.products" />
  </div>
  </asideLayout>
  </div>
@@ -23,7 +23,7 @@ import collapseItem from '@/components/aside/collapseItem.vue';
 import categoryListSm from "@/components/category/categoryListSm.vue";
 import item from '@/components/aside/item.vue';
 export default {
- props:['subCategoryItems',],
+ props:['subCategoryItems','topItemName'],
  components:{
  collapseItem,
  categoryListSm,

components/langSwitcher.vue

@@ -0,0 +1,41 @@
+<template>
+ <div @click="showLocales=!showLocales" ref="switcherLangRef" class="btn btn-light lang-switch position-relative text-secondary d-flex align-items-center py-1 px-3 " :class="[{'ml-3':$i18n.locale==='fa'},{'mr-3':$i18n.locale==='en'},{'flex-row-reverse':$i18n.locale==='fa'}]">
+ <b-icon icon="globe2" font-scale="1.2" class="mr-1"></b-icon>
+ <div>
+ {{$i18n.locales.find(i=>i.code===$i18n.locale).name}}
+ </div>
+ <div v-show="showLocales" 
+ v-closable="{exclude: ['switcherLangRef'],handler: 'onClose'}" 
+ class="position-absolute w-100 other-locale" 
+ >
+ <ul class="list-unstyled d-flex flex-column bg-light">
+ <li v-for="locale in $i18n.locales" :key="locale.name" class="w-100 p-1 text-left" 
+ :class="{'other-locale_active':locale.code===$i18n.locale}"
+ >
+ <nuxt-link :to="switchLocalePath(locale.code)" class="d-block">
+ {{locale.name}}
+ </nuxt-link>
+ </li>
+ </ul>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ showLocales:false
+ };
+ },
+ methods:{
+ onClose () {
+ this.showLocales = false
+ }
+ },
+ watch:{
+ '$i18n.locale'(){
+ localStorage.setItem("specialLocale", this.$i18n.locale);
+ }
+ }
+}
+</script>