TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

languages moved outside from burger in mobile.

This commit is contained in:
Kakabay 2024-07-01 14:47:11 +05:00
parent e0fa2e66a7
commit d8ee19e037
3 changed files with 245 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/TPS/Shop/publishable/assets/styles/style.css vendored
View File

@ -2135,6 +2135,10 @@ p.phone-number {
background: #000;
}
.burger-item-title.active.lang-dropdown-title {
background-color: none;
}
.burger-list {
height: 100%;
}
@ -2189,6 +2193,7 @@ p.phone-number {
display: flex;
flex-direction: column;
padding: 0 2rem;
list-style: none;
}
.burger-list-inner-inner a {
@ -2847,6 +2852,7 @@ p.phone-number {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
justify-content: space-between;
-webkit-box-align: center;
-moz-box-align: center;
@ -2928,6 +2934,89 @@ p.phone-number {
}
@media screen and (max-width: 780px) {
.logo-wrapper-mobile {
max-width: 70%;
width: 100%;
}
.logo-wrapper-mobile img {
width: inherit;
}
.nav-top-right {
display: flex;
align-items: center;
}
#language-dropdown {
width: auto;
position: relative;
}
.language-dropdown.active {
opacity: 1;
pointer-events: all;
}
.lang-dropdown-title {
position: relative;
}
.lang-item-title {
display: flex;
align-items: center;
gap: 10px;
}
.lang-active {
}
// .lang-img {
// display: flex;
// align-items: center;
// justify-content: center;
// height: 24px;
// width: 24px;
// }
// .lang-img > img {
// width: 100%;
// height: 100%;
// }
.lang-arrow {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
width: 24px;
}
.lang-arrow > img {
width: 100%;
height: 100%;
}
.language-dropdown {
top: 150%;
left: 50%;
width: 100%;
transform: translateX(-50%);
position: absolute;
background: white;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-out;
}
.lang-list {
list-style: none;
}
.dropdown-title {
gap: 1rem;
}
.slider-initial img {
height: 34rem;
object-fit: contain;
@ -3227,15 +3316,6 @@ p.phone-number {
}
@media screen and (max-width: 400px) {
.logo-wrapper-mobile {
max-width: 70%;
width: 100%;
}
.logo-wrapper-mobile img {
width: inherit;
}
.swiper-slide {
height: 23rem;
}

166
packages/TPS/Shop/src/Resources/assets/js/app.js vendored
View File

@ -2,7 +2,7 @@ import $ from 'jquery';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import ru from 'vee-validate/dist/locale/ru';
import tm from './lang/tm'
import tm from './lang/tm';
import axios from 'axios';
import VueSlider from 'vue-slider-component';
import OverlayLoader from './components/overlay-loader';
@ -25,19 +25,21 @@ window.axios = axios;
Vue.use(VeeValidate, {
dictionary: {
ru: ru,
tm: tm,
tm: tm,
},
events: 'input|change|blur',
});
Vue.prototype.$http = axios
Vue.prototype.$http = axios;
window.eventBus = new Vue();
// Vue.component('image-slider', ImageSlider);
Vue.component('vue-slider', VueSlider);
Vue.component('proceed-to-checkout', require('./components/checkout/proceed-to-checkout').default);
Vue.component(
'proceed-to-checkout',
require('./components/checkout/proceed-to-checkout').default
);
// Vue.component('wishlist-component-with-badge', require('./components/header-compare-with-badge').default);
Vue.component('go-top', require('@inotom/vue-go-top').default);
Vue.component('flash-wrapper', FlashWrapper);
@ -49,13 +51,13 @@ Vue.component('overlay-loader', OverlayLoader);
$(document).ready(function () {
const app = new Vue({
el: "#app",
el: '#app',
data: {
modalIds: {},
// data: [],
show_loader: false,
baseUrl: document.querySelector('meta[name="base-url"]').content
baseUrl: document.querySelector('meta[name="base-url"]').content,
},
mounted: function () {
@ -69,32 +71,31 @@ $(document).ready(function () {
onSubmit: function (e) {
this.toggleButtonDisable(true);
if(typeof tinyMCE !== 'undefined')
tinyMCE.triggerSave();
if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
this.$validator.validateAll().then(result => {
this.$validator.validateAll().then((result) => {
if (result) {
e.target.submit();
} else {
this.toggleButtonDisable(false);
eventBus.$emit('onFormError')
eventBus.$emit('onFormError');
}
});
},
validateForm(e,scope) {
validateForm(e, scope) {
this.$validator.validateAll(scope).then((result) => {
if (result) {
scope.target.submit();
} else {
this.toggleButtonDisable(false);
eventBus.$emit('onFormError')
eventBus.$emit('onFormError');
}
});
},
toggleButtonDisable (value) {
var buttons = document.getElementsByTagName("button");
toggleButtonDisable(value) {
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = value;
@ -104,26 +105,26 @@ $(document).ready(function () {
addServerErrors: function (scope = null) {
for (var key in serverErrors) {
var inputNames = [];
key.split('.').forEach(function(chunk, index) {
if(index) {
inputNames.push('[' + chunk + ']')
key.split('.').forEach(function (chunk, index) {
if (index) {
inputNames.push('[' + chunk + ']');
} else {
inputNames.push(chunk)
inputNames.push(chunk);
}
})
});
var inputName = inputNames.join('');
const field = this.$validator.fields.find({
name: inputName,
scope: scope
scope: scope,
});
if (field) {
this.$validator.errors.add({
id: field.id,
field: inputName,
msg: serverErrors[key][0],
scope: scope
scope: scope,
});
}
}
@ -137,7 +138,7 @@ $(document).ready(function () {
}, this);
},
responsiveHeader: function () { },
responsiveHeader: function () {},
showModal(id) {
this.$set(this.modalIds, id, true);
@ -160,7 +161,7 @@ $(document).ready(function () {
// this.busy = false;
// }, 1000);
// }
}
},
});
window.app = app;
@ -174,9 +175,29 @@ $(document).ready(function () {
langBlock.addEventListener('mouseout', function () {
langList.classList.add('hidden');
});
// DESKTOP LANGUAGE SELECT end ===================
// ACCORDION SCRIPT ========================== //
const languageTriger = document.getElementById('language-dropdown');
const languageDropdownContent = document.getElementById(
'language-dropdown-content'
);
languageTriger.addEventListener('click', (event) => {
languageDropdownContent.classList.toggle('active');
event.stopPropagation();
});
document.addEventListener('click', function (event) {
if (
!languageTriger.contains(event.target) &&
!languageDropdownContent.contains(event.target)
) {
languageDropdownContent.classList.remove('active');
}
});
// DESKTOP LANGUAGE SELECT end ===================
// ACCORDION SCRIPT ========================== //
let accordionTrigger = document.querySelectorAll('.footer-title-wrapper');
let accordionElement = document.querySelectorAll('.footer-content');
@ -197,46 +218,49 @@ $(document).ready(function () {
});
}
// ACCORDION SCRIPT end ==========================
const languageDropdown = document.getElementById('language-dropdown');
console.log(languageDropdown);
// BURGER SCRIPT ===============================
// let burgerTrigger = document.querySelector('.burger');
// let burgerElement = document.querySelector('.nav-inner-burger-container');
// let body = document.querySelector('body');
// let brokenTitle = document.querySelector('.burger-title-wrapper');
// let hrBurger = document.querySelector('.hr-line-burger');
// ACCORDION SCRIPT end ==========================
// burgerTrigger.addEventListener('click', function () {
// burgerElement.classList.remove('hidden-burger');
// body.style.overflow = 'hidden';
// brokenTitle.style.opacity = '100';
// hrBurger.style.opacity = '100';
// });
//
// let burgerTriggerClose = document.querySelector('.burger-close');
//
// burgerTriggerClose.addEventListener('click', function () {
// burgerElement.classList.add('hidden-burger');
// body.style.overflow = 'auto';
// brokenTitle.style.opacity = '0';
// hrBurger.style.opacity = '0';
// });
// BURGER SCRIPT ===============================
// let burgerTrigger = document.querySelector('.burger');
// let burgerElement = document.querySelector('.nav-inner-burger-container');
// let body = document.querySelector('body');
// let brokenTitle = document.querySelector('.burger-title-wrapper');
// let hrBurger = document.querySelector('.hr-line-burger');
// BURGER LANGUAGE ================================
// let langTrig = document.querySelector('.language-trig');
// langTrig.addEventListener('click', () => {
// langTrig.classList.toggle('triggered');
// currencyTrig.classList.remove('triggered');
// });
// burgerTrigger.addEventListener('click', function () {
// burgerElement.classList.remove('hidden-burger');
// body.style.overflow = 'hidden';
// brokenTitle.style.opacity = '100';
// hrBurger.style.opacity = '100';
// });
//
// let burgerTriggerClose = document.querySelector('.burger-close');
//
// burgerTriggerClose.addEventListener('click', function () {
// burgerElement.classList.add('hidden-burger');
// body.style.overflow = 'auto';
// brokenTitle.style.opacity = '0';
// hrBurger.style.opacity = '0';
// });
// BURGER LANGUAGE ================================
// let langTrig = document.querySelector('.language-trig');
// langTrig.addEventListener('click', () => {
// langTrig.classList.toggle('triggered');
// currencyTrig.classList.remove('triggered');
// });
// let currencyTrig = document.querySelector('.price-view');
// currencyTrig.addEventListener('click', () => {
// langTrig.classList.remove('triggered');
// currencyTrig.classList.toggle('triggered');
// });
// BURGER LANGUAGE end ===========================
// BURGER SCRIPT end ===============================
// BURGER LANGUAGE end ===========================
// BURGER SCRIPT end ===============================
// CAT DROPDOWN
// CAT DROPDOWN
// const catParent = document.querySelector('.service-li.active');
// const cat = document.querySelector('.cat-dropdown');
@ -271,20 +295,20 @@ $(document).ready(function () {
// });
// catParent.addEventListener('click', () => {
// cat.classList.toggle('active');
// if (checker) {
// catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active');
// checker = false;
// } else {
// if (last) {
// catBlock[last].classList.toggle('active');
// lis[last].classList.toggle('active');
// } else {
// catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active');
// }
// }
// cat.classList.toggle('active');
// if (checker) {
// catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active');
// checker = false;
// } else {
// if (last) {
// catBlock[last].classList.toggle('active');
// lis[last].classList.toggle('active');
// } else {
// catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active');
// }
// }
// });
// lis.forEach((el) => {

97
packages/TPS/Shop/src/Resources/views/shop/layouts/header/search-nav.blade.php
View File

@ -127,42 +127,7 @@
</li>
@endauth
<li>
<div class="burger-item-title">
<div class="burger-item-name lang">
<span>{{ core()->getCurrentLocale()->name }}</span>
<div class="burger-lang">
<img src="{{ core()->getCurrentLocale()->image_url }}" alt="">
</div>
</div>
<div class="arrow black">
<img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
</div>
<div class="arrow white">
<img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
</div>
</div>
<div class="burger-dropdown">
<ul class="burger-list-inner-inner" onchange="window.location.href = this.value">
@foreach (core()->getCurrentChannel()->locales as $locale)
<li>
<a
@if (isset($serachQuery))
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@else
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@endif
>
<span>{{ $locale->name }}</span>
<div class="burger-lang">
<img src="{{ $locale->image_url }}" alt="">
</div>
</a>
</li>
@endforeach
</ul>
</div>
</li>
</ul>
</div>
@ -245,6 +210,63 @@
@endif
</a>
</div>
{{-- Language dropdown start --}}
<div clas="nav-inner-top-lang lang-active" id="language-dropdown">
<div class="burger-item-title lang-dropdown-title">
<div class="burger-item-name lang">
{{-- <span>{{ core()->getCurrentLocale()->name }}</span> --}}
<div class="burger-lang">
<img src="{{ core()->getCurrentLocale()->image_url }}" alt="">
</div>
</div>
<div class="arrow black">
<img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
</div>
<div class="arrow white">
<img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
</div>
</div>
{{-- <div class="burger-dropdown active" id="language-dropdown-content">
<ul class="burger-list-inner-inner lang-list" onchange="window.location.href = this.value">
@foreach (core()->getCurrentChannel()->locales as $locale)
<li>
<a
@if (isset($serachQuery))
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@else
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@endif
>
<div class="burger-lang">
<img src="{{ $locale->image_url }}" alt="">
</div>
</a>
</li>
@endforeach
</ul>
</div> --}}
<div class="language-dropdown" id="language-dropdown-content" onchange="window.location.href = this.value">
@foreach (core()->getCurrentChannel()->locales as $locale)
<a
@if (isset($serachQuery))
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@else
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
@endif
>
<div class="burger-lang">
<img src="{{ $locale->image_url }}" alt="">
</div>
</a>
@endforeach
</div>
</div>
{{-- Language dropdown end --}}
<a href="{{ route('shop.checkout.cart.index') }}" class="nav-link">
<div class="icon-wrapper">
<img src="{{ bagisto_asset('icons/cart.svg') }}" alt="cart" />
@ -285,6 +307,9 @@
</div>
</nav>
</script>
<script>
</script>
<script>
Vue.component('profile-btn', {