Alexandr SaVBaD Waltz
69c224722e
Implemented promocode application feature in the cart, allowing users to select and apply discounts during checkout. Updated GraphQL mutation, cart logic, and UI to support this functionality. - Enhanced `cart.vue` with a new promocode selection section, including dropdown and styling. - Modified `buyOrder` mutation to accept `promocodeUuid` and `forceBalance` parameters. - Updated translations (`en-gb.json` and `ru-ru.json`) to include promocode-related strings. Improves user experience by enabling discount application directly in the cart. No breaking changes.
133 lines
No EOL
3.4 KiB
Vue
133 lines
No EOL
3.4 KiB
Vue
<template>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__wrapper">
|
|
<div class="footer__main">
|
|
<div class="footer__left">
|
|
<nuxt-link-locale to="/" class="footer__logo">
|
|
SCHON
|
|
</nuxt-link-locale>
|
|
<p class="footer__text">{{ t('footer.text') }}</p>
|
|
</div>
|
|
<div class="footer__columns">
|
|
<div class="footer__column">
|
|
<h6>{{ t('footer.shop') }}</h6>
|
|
<nuxt-link-locale to="/shop">{{ t('footer.allProducts') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/catalog">{{ t('footer.catalog') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/brands">{{ t('footer.brands') }}</nuxt-link-locale>
|
|
</div>
|
|
<div class="footer__column">
|
|
<h6>{{ t('footer.help') }}</h6>
|
|
<nuxt-link-locale to="/contact">{{ t('contact.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/privacy-policy">{{ t('docs.policy.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/terms-and-conditions">{{ t('docs.terms.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/shipping-information">{{ t('docs.shipping.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/return-policy">{{ t('docs.return.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/about-us">{{ t('docs.about.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/faq">{{ t('docs.faq.title') }}</nuxt-link-locale>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer__bottom">
|
|
<p>© {{ actualYear }} Schon. {{ t('footer.rights') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const companyStore = useCompanyStore();
|
|
const { t } = useI18n();
|
|
|
|
const companyInfo = computed(() => companyStore.companyInfo);
|
|
const actualYear = computed(() => new Date().getFullYear());
|
|
|
|
const encodedCompanyAddress = computed(() => {
|
|
return companyInfo.value?.companyAddress ? encodeURIComponent(companyInfo.value?.companyAddress) : '';
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footer {
|
|
background-color: #000;
|
|
|
|
&__wrapper {
|
|
padding-block: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 50px;
|
|
}
|
|
|
|
&__main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
&__logo {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: 6.7px;
|
|
font-family: 'Playfair Display', sans-serif;
|
|
|
|
@include hover {
|
|
text-shadow: 0 0 5px #fff;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
max-width: 285px;
|
|
color: #d1d5db;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__columns {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 150px;
|
|
}
|
|
|
|
&__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
|
|
& h6 {
|
|
color: #d2d0d0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
& p, a {
|
|
color: $link_secondary;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
|
|
@include hover {
|
|
color: $link_secondary_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bottom {
|
|
& p {
|
|
color: $link_secondary;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
}
|
|
}
|
|
</style> |