Skip to content

Commit 40f0ce0

Browse files
jiyuujinjiyuujin
authored
Merge pull request #460 from vuejs-jp/feature/store_section
ストアセクション
2 parents 4502fee + 48a0236 commit 40f0ce0

19 files changed

+275
-8
lines changed

‎app/assets/locale/all.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default {
2222
back_top: 'トップに戻る',
2323
apply_personal_sponsor: 'チケットを購入',
2424
personal_sponsor: '個人スポンサー',
25+
pre_order: '事前注文する',
2526
},
2627
category: {
2728
platinum: 'Platinum',

‎app/components/EventPageSection.vue

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
<script setup lang="ts">
2-
import EventSection from '~/components/event/EventSection.vue'
2+
// import EventSection from '~/components/event/EventSection.vue'
33
import StoreSection from '~/components/event/StoreSection.vue'
44
</script>
55

66
<template>
7-
<section>
7+
<section class="event-wrapper">
88
<div class="event-root">
9+
<!--
910
<EventSection />
11+
-->
1012
<StoreSection />
1113
</div>
1214
</section>
1315
</template>
1416

1517
<style lang="ts" scoped>
1618
css({
17-
'section': {
18-
padding: '120px 20px 120px',
19+
'.event-wrapper': {
20+
padding: '120px 0',
1921
background: 'linear-gradient(180deg, #F17C67 40.63%, #FFC408 100%)',
22+
display: 'grid',
23+
gridTemplateColumns: '1fr min(1280px, calc(100% - 40px)) 1fr',
2024
},
2125
'.event-root': {
22-
display: 'grid',
23-
gap: 'calc({space.8} * 5)',
24-
maxWidth: '768px',
26+
gridColumn: '2',
27+
padding: 'calc({space.8} * 5) 0',
2528
margin: '0 auto',
2629
width: '100%',
2730
fontSize: 'calc(18*{fontSize.base})',

‎app/components/event/StoreSection.vue

+143-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,145 @@
1+
<script setup lang="ts">
2+
import MarkDownText from '~/components/MarkDownText.vue'
3+
import CommentTitle from '~/components/CommentTitle.vue'
4+
import RoundButton from '~/components/button/RoundButton.vue'
5+
import { storeMenu } from '~/utils/store.constants'
6+
import { storeUrl } from '~/utils/constants'
7+
</script>
8+
19
<template>
2-
<section>StoreSection</section>
10+
<section>
11+
<div class="store-root">
12+
<div class="store-title">
13+
<CommentTitle color="vue.green" title="今年もやります" />
14+
<h3 id="store">Vue Fes Store</h3>
15+
<div class="explain"><MarkDownText path="store" /></div>
16+
</div>
17+
18+
<div class="store-menu">
19+
<div v-for="menu in storeMenu" :key="menu.name" class="store-card">
20+
<img
21+
width="308"
22+
height="308"
23+
:alt="`${menu.imgAlt}の写真`"
24+
:src="`${menu.imgSrc}`"
25+
decoding="async"
26+
/>
27+
<div class="name">{{ menu.name }}</div>
28+
<div class="price">{{ menu.price }}</div>
29+
<div class="text">{{ menu.text }}</div>
30+
<div class="supplement">
31+
<div v-if="menu.color" class="color">カラー：{{ menu.color }}</div>
32+
<div class="size">サイズ：{{ menu.size }}</div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div class="store-info">
38+
<div class="store-purchase">
39+
<div class="sub-title">
40+
<h6>購入方法</h6>
41+
<p>購入方法は以下の2種類があります。</p>
42+
</div>
43+
<div class="pre-order">
44+
<MarkDownText path="pre-order" />
45+
</div>
46+
<div class="button">
47+
<RoundButton :href="storeUrl" target="_blank" rel="noreferrer" class="button">
48+
{{ $t('words.pre_order') }}
49+
</RoundButton>
50+
</div>
51+
<div class="current-day-sales">
52+
<MarkDownText path="current-day-sales" />
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</section>
358
</template>
59+
60+
<style lang="ts" scoped>
61+
css({
62+
'.store-root': {
63+
color: '{color.vue.blue}',
64+
background: '{color.white}',
65+
padding: 'calc({space.8} * 3)',
66+
display: 'flex',
67+
flexDirection: 'column',
68+
gap: 'calc({space.8} * 3)',
69+
justifyContent: 'center',
70+
},
71+
72+
'.store-title': {
73+
display: 'grid',
74+
gap: 'calc({space.8} * 3)',
75+
textAlign: 'center',
76+
'::v-deep(h3)': {
77+
fontSize: '32px',
78+
fontWeight: 'bold',
79+
lineHeight: '1',
80+
},
81+
},
82+
'.explain': {
83+
display: 'flex',
84+
justifyContent: 'center',
85+
'::v-deep(p)': {
86+
textAlign: 'left',
87+
}
88+
},
89+
90+
'.store-menu': {
91+
display: 'flex',
92+
flexWrap: 'wrap',
93+
gap: '2em',
94+
justifyContent: 'center',
95+
},
96+
'.store-card': {
97+
width: '308px',
98+
display: 'flex',
99+
flexDirection: 'column',
100+
gap: '1em',
101+
},
102+
'.name': {
103+
fontWeight: 'bold',
104+
lineHeight: '1',
105+
},
106+
'.price': {
107+
fontSize: '22px',
108+
fontWeight: 'bold',
109+
lineHeight: '1',
110+
},
111+
112+
'.store-info': {
113+
display: 'flex',
114+
justifyContent: 'center',
115+
paddingTop: 'calc({space.8} * 5)',
116+
paddingBottom: 'calc({space.8} * 5)',
117+
},
118+
'.store-purchase': {
119+
display: 'flex',
120+
flexDirection: 'column',
121+
maxWidth: '768px',
122+
gap: '2em',
123+
'::v-deep(h6)': {
124+
fontSize: '22px',
125+
fontWeight: 'bold',
126+
lineHeight: '1',
127+
},
128+
},
129+
'.sub-title': {
130+
display: 'grid',
131+
gap: 'calc({space.8} * 1)',
132+
},
133+
'pre-order': {
134+
display: 'grid',
135+
gap: 'calc({space.8} * 1)',
136+
'::v-deep(p)': {
137+
textAlign: 'left',
138+
}
139+
},
140+
'.button': {
141+
display: 'flex',
142+
justifyContent: 'center'
143+
}
144+
});
145+
</style>

‎app/composables/useLocale.ts

+3
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export function useLocale(path: Path) {
3333
.with('personal-sponsors-text1', () => `/${locale.value}/top/personal-sponsors-text1`)
3434
.with('personal-sponsors-caption', () => `/${locale.value}/top/personal-sponsors-caption`)
3535
.with('faq', () => `/${locale.value}/top/faq`)
36+
.with('store', () => `/${locale.value}/top/store`)
37+
.with('pre-order', () => `/${locale.value}/top/pre-order`)
38+
.with('current-day-sales', () => `/${locale.value}/top/current-day-sales`)
3639

3740
// set sponsors markdown
3841
m = all.reduce((prev: any, s: Sponsor) => {

‎app/content/ja/top/current-day-sales.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<b>【当日販売】</b>
2+
3+
当日、Vue Fes Japan 2023 会場内 Vue Fes Store ブースにてお買い求めください。ただし、各商品ともに当日販売分は若干数に限られておりますので、確実にご購入いただくには事前注文がオススメです。
4+
5+
<br>
6+
当日販売の決済方法は、以下のキャッシュレス決済のみとなります。現金はご利用いただけませんのでご注意ください。
7+
8+
<br>
9+
<br>
10+
決済方法（予定）：
11+
12+
各種クレジットカード、各種交通系電子マネー、iD、QUICPay、Apple Pay、UnionPay
13+
14+
<br>
15+
※ グッズ販売における利益は、すべて Vue Fes Japan の運営、または Vue.js 日本ユーザー<br>
16+
　 グループの活動のために大切に使わせていただきます。

‎app/content/ja/top/pre-order.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<b>【事前注文】</b>
2+
3+
STORES で事前にご注文いただくと、当日 Vue Fes Japan 2023 の会場でのみお受け取りいただけます。<b>ご自宅などへの発送はいたしません</b>のでご注意ください。
4+
<br>
5+
<br>
6+
・事前注文受付期間：～ 2023 年 10 月 1 日（日）
7+
8+
・受取日時：2023 年 10 月 28 日（土） 9:30〜18:00
9+
10+
・受取場所：Vue Fes Japan 2023 会場内 Vue Fes Store ブース
11+
12+
<br>
13+
当日、お受け取りの際に注文完了メールをお見せください。

‎app/content/ja/top/store.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Vue Fes Japan 限定オリジナルグッズをお買い求めいただける Vue Fes Store が今年も登場。
2+
3+
オリジナルグッズを揃えて、Vue Fes Japan を盛り上げましょう！

‎app/pages/index.vue

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ useHead({
2525
<template v-if="showTimetable">
2626
<TimetablePageSection />
2727
</template>
28+
<EventPageSection />
2829
<template v-if="canPurchase">
2930
<TicketPageSection />
3031
<AccessSection />

‎app/public/store/nuxt-badge.png

15.8 KB
Loading

‎app/public/store/vite-badge.png

27.8 KB
Loading

‎app/public/store/vue-badge.png

16.2 KB
Loading

‎app/public/store/vue-cushion.png

50.7 KB
Loading

‎app/public/store/vue-parka.png

69.6 KB
Loading

‎app/public/store/vue-sticker.png

36.1 KB
Loading

‎app/public/store/vue-t-shirt.png

39 KB
Loading

‎app/public/store/vue-tape.png

46.7 KB
Loading

‎app/types/app.ts

+13
Original file line numberDiff line numberDiff line change
@@ -153,3 +153,16 @@ export type Team = {
153153
name: string
154154
snsLink: string
155155
}
156+
157+
/**
158+
* store
159+
*/
160+
export type StoreMenu = {
161+
imgAlt: string
162+
imgSrc: string
163+
name: string
164+
price: string
165+
text: string
166+
color?: string
167+
size: string
168+
}

‎app/utils/constants.ts

+2
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ export const childCareUrl =
5151
export const calendarUrl =
5252
'https://calendar.google.com/calendar/render?action=TEMPLATE&text=Vue%20Fes%20Japan%202023&dates=20231028T010000Z/20231028T093000Z'
5353

54+
export const storeUrl = 'https://vuejs-jp.stores.jp'
55+
5456
export const urlBasePath = isProd ? '/2023' : ''
5557

5658
export const vuefesTwitterID = '@vuefes'

‎app/utils/store.constants.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { StoreMenu } from '~/types/app'
2+
3+
export const storeMenu: StoreMenu[] = [
4+
{
5+
imgAlt: 'Vue Fes Tシャツ',
6+
imgSrc: 'store/vue-t-shirt.png',
7+
name: 'Tシャツ',
8+
price: '¥2,500',
9+
text: 'Vue Fes Japan 2023 のオリジナル T シャツです。サイズはS・M・L・XLの4種類。前面のみのプリントです。',
10+
color: 'ネイビー',
11+
size: 'S / M / L / XL',
12+
},
13+
{
14+
imgAlt: 'Vue Fes パーカー',
15+
imgSrc: 'store/vue-parka.png',
16+
name: 'パーカー',
17+
price: '¥5,500',
18+
text: 'Vue Fes Japan 2023 のオリジナルパーカーです。サイズは S、M、L、XL の4種類。前・背面プリントです。',
19+
color: 'グレー',
20+
size: 'S / M / L / XL',
21+
},
22+
{
23+
imgAlt: 'Vue Fes アクリルピンバッジ（Vue.js）',
24+
imgSrc: 'store/vue-badge.png',
25+
name: 'アクリルピンバッジ（Vue.js）',
26+
price: '¥600',
27+
text: 'Vue.jsのロゴを使ったミニサイズのアクリルピンバッジです。',
28+
size: 'W19×H17mm',
29+
},
30+
{
31+
imgAlt: 'Vue Fes アクリルピンバッジ（Nuxt）',
32+
imgSrc: 'store/nuxt-badge.png',
33+
name: 'アクリルピンバッジ（Nuxt）',
34+
price: '¥600',
35+
text: 'Nuxtのロゴを使ったミニサイズのアクリルピンバッジです。',
36+
size: 'W19×H14mm',
37+
},
38+
{
39+
imgAlt: 'Vue Fes アクリルピンバッジ（Vite）',
40+
imgSrc: 'store/vite-badge.png',
41+
name: 'アクリルピンバッジ（Vite）',
42+
price: '¥600',
43+
text: 'Viteのロゴを使ったミニサイズのアクリルピンバッジです。',
44+
size: 'W18×H18mm',
45+
},
46+
{
47+
imgAlt: 'Vue Fes ステッカー',
48+
imgSrc: 'store/vue-sticker.png',
49+
name: 'ステッカー',
50+
price: '¥300',
51+
text: 'Vue.js、Nuxt、Vite、Vue Fes Japanのロゴが集まった特製ステッカーです。',
52+
size: 'W200×H122mm',
53+
},
54+
{
55+
imgAlt: 'Vue Fes クッション',
56+
imgSrc: 'store/vue-cushion.png',
57+
name: 'クッション',
58+
price: '¥5,000',
59+
text: '表面Vue.js、裏面Vue Fes Japanのロゴのふかふかクッションです。素材は、触り心地が良いブランケットのような生地です。',
60+
size: 'W360×H360mm',
61+
},
62+
{
63+
imgAlt: 'Vue Fes マスキングテープ',
64+
imgSrc: 'store/vue-tape.png',
65+
name: 'マスキングテープ',
66+
price: '¥1,100',
67+
text: 'マスキングテープ(15mm幅)です。',
68+
size: 'W15mm',
69+
},
70+
]

0 commit comments

Comments
 (0)