Skip to content

Commit 488e7a3

Browse files
Alexander DevitskyFrodigo
Alexander Devitsky
authored and
Frodigo
committed
feat: asset Optimization
1 parent 259f653 commit 488e7a3

File tree

26 files changed

+814
-178
lines changed

26 files changed

+814
-178
lines changed

‎packages/api-client/src/api/storeConfig/storeConfig.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default gql`
77
allow_items,
88
allow_order,
99
base_currency_code,
10+
base_media_url,
1011
catalog_default_sort_by,
1112
category_fixed_product_tax_display_setting,
1213
cms_home_page,

‎packages/composables/src/getters/storeConfigGetters.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ const getCurrency = (config: StoreConfig) => config.default_display_currency_cod
77
const getLocale = (config: StoreConfig) => config.locale;
88
const allowGuestProductReview = (config: StoreConfig) => config.allow_guests_to_write_product_reviews;
99
const enabledWishlist = (config: StoreConfig) => config.magento_wishlist_general_is_enabled;
10+
const getBaseMediaUrl = (config: StoreConfig) => config.base_media_url;
11+
const getLogoSrc = (config: StoreConfig) => config.header_logo_src;
12+
const getLogoWidth = (config: StoreConfig) => config.logo_width;
13+
const getLogoHeight = (config: StoreConfig) => config.logo_height;
14+
const getLogoAlt = (config: StoreConfig) => config.logo_alt;
1015

1116
const storeConfigGetters = {
1217
getCode,
@@ -16,6 +21,11 @@ const storeConfigGetters = {
1621
getLocale,
1722
allowGuestProductReview,
1823
enabledWishlist,
24+
getBaseMediaUrl,
25+
getLogoSrc,
26+
getLogoWidth,
27+
getLogoHeight,
28+
getLogoAlt,
1929
};
2030

2131
export default storeConfigGetters;

‎packages/theme/components/AddToWishlist.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
class="add-to-wishlist"
66
@click="$emit('addToWishlist')"
77
>
8-
<SfIcon
8+
<SvgImage
99
:icon="isInWishlist ? isInWishlistIcon : wishlistIcon"
10-
size="lg"
11-
color="green-primary"
12-
viewBox="0 0 24 24"
13-
:coverage="1"
10+
:label="$t('Wishlist')"
11+
width="32"
12+
height="32"
1413
/>
1514
<SfButton class="sf-button--text">
1615
{{ $t(actionText) }}
@@ -20,13 +19,14 @@
2019

2120
<script>
2221
import { defineComponent, computed } from '@nuxtjs/composition-api';
23-
import { SfIcon, SfButton } from '@storefront-ui/vue';
22+
import { SfButton } from '@storefront-ui/vue';
23+
import SvgImage from '~/components/General/SvgImage.vue';
2424
2525
export default defineComponent({
2626
name: 'AddToWishlist',
2727
components: {
28-
SfIcon,
2928
SfButton,
29+
SvgImage,
3030
},
3131
props: {
3232
component: {
@@ -64,6 +64,7 @@ export default defineComponent({
6464
.add-to-wishlist {
6565
display: flex;
6666
align-items: center;
67+
color: var(--c-primary);
6768
cursor: pointer;
6869
margin-top: 1rem;
6970
margin-bottom: 1rem;

‎packages/theme/components/AppHeader.vue‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,7 @@
66
>
77
<!-- TODO: add mobile view buttons after SFUI team PR -->
88
<template #logo>
9-
<nuxt-link
10-
:to="localePath('/')"
11-
class="sf-header__logo"
12-
>
13-
<nuxt-img
14-
src="/icons/logo.svg"
15-
alt="Vue Storefront Next"
16-
class="sf-header__logo-image"
17-
width="35"
18-
height="34"
19-
/>
20-
</nuxt-link>
9+
<HeaderLogo />
2110
</template>
2211
<template
2312
v-if="$device.isDesktop"
@@ -49,9 +38,11 @@
4938
aria-label="Account"
5039
@click="handleAccountClick"
5140
>
52-
<SfIcon
41+
<SvgImage
5342
:icon="accountIcon"
54-
size="1.25rem"
43+
:label="$t('Account')"
44+
width="1.25rem"
45+
height="1.25rem"
5546
:class="{
5647
'sf-header__icon is-active': activeIcon === 'account',
5748
}"
@@ -64,12 +55,12 @@
6455
aria-label="Wishlist"
6556
@click="toggleWishlistSidebar"
6657
>
67-
<SfIcon
68-
class="sf-header__icon"
58+
<SvgImage
6959
:icon="wishlistHasProducts ? 'heart_fill' : 'heart'"
70-
:has-badge="wishlistHasProducts"
71-
:badge-label="wishlistItemsQty"
72-
size="1.25rem"
60+
:label="$t('Wishlist')"
61+
width="1.25rem"
62+
height="1.25rem"
63+
class="sf-header__icon"
7364
:class="{
7465
'sf-header__icon is-active': activeIcon === 'wishlist',
7566
}"
@@ -87,10 +78,12 @@
8778
aria-label="Toggle cart sidebar"
8879
@click="toggleCartSidebar"
8980
>
90-
<SfIcon
91-
class="sf-header__icon"
81+
<SvgImage
9282
icon="empty_cart"
93-
size="1.25rem"
83+
:label="$t('Cart')"
84+
width="20"
85+
height="20"
86+
class="sf-header__icon"
9487
:class="{
9588
'sf-header__icon is-active': activeIcon === 'cart',
9689
}"
@@ -124,7 +117,6 @@
124117
import {
125118
SfOverlay,
126119
SfHeader,
127-
SfIcon,
128120
SfButton,
129121
SfBadge,
130122
} from '@storefront-ui/vue';
@@ -148,17 +140,20 @@ import {
148140
useUiHelpers,
149141
useUiState,
150142
} from '~/composables';
151-
import StoreSwitcher from '~/components/StoreSwitcher.vue';
152143
import CurrencySelector from '~/components/CurrencySelector.vue';
144+
import HeaderLogo from '~/components/HeaderLogo.vue';
145+
import SvgImage from '~/components/General/SvgImage.vue';
146+
import StoreSwitcher from '~/components/StoreSwitcher.vue';
153147
154148
export default defineComponent({
155149
components: {
156150
HeaderNavigationItem,
157151
SfHeader,
158152
SfOverlay,
159153
CurrencySelector,
154+
HeaderLogo,
160155
StoreSwitcher,
161-
SfIcon,
156+
SvgImage,
162157
SfButton,
163158
SfBadge,
164159
SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
@@ -230,10 +225,6 @@ export default defineComponent({
230225
&__switchers {
231226
display: flex;
232227
}
233-
234-
&__logo-image {
235-
height: 100%;
236-
}
237228
}
238229
239230
.header-on-top {

‎packages/theme/components/BottomNavigation.vue‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,70 @@
33
<div class="smartphone-only">
44
<SfBottomNavigation class="navigation-bottom">
55
<SfBottomNavigationItem
6-
:class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
7-
icon="home"
8-
size="20px"
6+
:class="{ 'sf-bottom-navigation__item--active': $route.name && $route.name.startsWith('home') }"
97
label="Home"
108
@click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
11-
/>
9+
>
10+
<template #icon>
11+
<SvgImage
12+
icon="home"
13+
:label="$t('Home')"
14+
width="20"
15+
height="20"
16+
/>
17+
</template>
18+
</SfBottomNavigationItem>
1219
<SfBottomNavigationItem
13-
icon="menu"
14-
size="20px"
1520
label="Menu"
1621
@click="toggleMobileMenu"
17-
/>
22+
>
23+
<template #icon>
24+
<SvgImage
25+
icon="menu"
26+
:label="$t('Menu')"
27+
width="20"
28+
height="20"
29+
/>
30+
</template>
31+
</SfBottomNavigationItem>
1832
<SfBottomNavigationItem
1933
v-if="isAuthenticated"
20-
icon="heart"
21-
size="20px"
2234
label="Wishlist"
2335
@click="toggleWishlistSidebar"
24-
/>
36+
>
37+
<template #icon>
38+
<SvgImage
39+
icon="heart"
40+
:label="$t('Wishlist')"
41+
width="20"
42+
height="20"
43+
/>
44+
</template>
45+
</SfBottomNavigationItem>
2546
<SfBottomNavigationItem
26-
icon="profile"
27-
size="20px"
2847
label="Account"
2948
@click="handleAccountClick"
30-
/>
31-
<!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
49+
>
50+
<template #icon>
51+
<SvgImage
52+
icon="profile"
53+
:label="$t('Account')"
54+
width="20"
55+
height="20"
56+
/>
57+
</template>
58+
</SfBottomNavigationItem>
3259
<SfBottomNavigationItem
33-
label="Basket"
34-
icon="add_to_cart"
60+
:label="$route.name && $route.name.startsWith('product') ? 'Add to Cart' : 'Basket'"
3561
@click="toggleCartSidebar"
3662
>
3763
<template #icon>
3864
<SfCircleIcon aria-label="Add to cart">
39-
<SfIcon
65+
<SvgImage
4066
icon="add_to_cart"
41-
color="white"
42-
size="25px"
43-
:style="{margin: '0 0 0 -2px'}"
67+
width="25"
68+
height="25"
69+
class="navigation-bottom__add-to-cart"
4470
/>
4571
</SfCircleIcon>
4672
</template>
@@ -51,18 +77,19 @@
5177
</template>
5278

5379
<script>
54-
import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
80+
import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
5581
import { useUser } from '@vue-storefront/magento';
5682
import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
5783
import { useUiState } from '~/composables';
5884
import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
85+
import SvgImage from '~/components/General/SvgImage.vue';
5986
6087
export default defineComponent({
6188
components: {
6289
SfBottomNavigation,
63-
SfIcon,
6490
SfCircleIcon,
6591
MobileMenuSidebar,
92+
SvgImage,
6693
},
6794
setup() {
6895
const {
@@ -98,5 +125,19 @@ export default defineComponent({
98125
<style lang="scss" scoped>
99126
.navigation-bottom {
100127
--bottom-navigation-z-index: 3;
128+
129+
&__add-to-cart {
130+
margin-left: -2px
131+
}
132+
133+
::v-deep {
134+
.sf-bottom-navigation-item {
135+
align-self: end;
136+
}
137+
138+
.svg-image {
139+
margin-bottom: var(--spacer-xs);
140+
}
141+
}
101142
}
102143
</style>

‎packages/theme/components/CartSidebar.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@
161161
class="empty-cart"
162162
>
163163
<div class="empty-cart__banner">
164-
<nuxt-img
165-
alt="Empty bag"
166-
class="empty-cart__image"
167-
src="/icons/empty-cart.svg"
164+
<SvgImage
165+
icon="empty_cart_image"
166+
:label="$t('Empty bag')"
168167
width="211"
169168
height="143"
169+
class="empty-cart__image"
170170
/>
171171
<SfHeading
172172
title="Your cart is empty"
@@ -258,6 +258,7 @@ import _debounce from 'lodash.debounce';
258258
import { useUiState, useUiNotification } from '~/composables';
259259
import stockStatusEnum from '~/enums/stockStatusEnum';
260260
import CouponCode from './CouponCode.vue';
261+
import SvgImage from '~/components/General/SvgImage.vue';
261262
262263
export default defineComponent({
263264
name: 'CartSidebar',
@@ -273,6 +274,7 @@ export default defineComponent({
273274
SfQuantitySelector,
274275
SfBadge,
275276
CouponCode,
277+
SvgImage,
276278
},
277279
setup() {
278280
const { initializeCheckout } = useExternalCheckout();

‎packages/theme/components/CurrencySelector.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@
1515
</div>
1616
</template>
1717
<script>
18-
import {
19-
SfButton,
20-
} from '@storefront-ui/vue';
18+
import { SfButton } from '@storefront-ui/vue';
2119
import {
2220
ref,
2321
computed,
@@ -29,8 +27,8 @@ import CurrenciesModal from './CurrencySelector/CurrenciesModal';
2927
export default defineComponent({
3028
name: 'CurrencySelector',
3129
components: {
32-
CurrenciesModal,
3330
SfButton,
31+
CurrenciesModal,
3432
},
3533
setup() {
3634
const {

0 commit comments

Comments
 (0)