Skip to content

Instantly share code, notes, and snippets.

@Kazuki-tam
Created October 13, 2019 04:13
Show Gist options
  • Save Kazuki-tam/7e23a246c22d628ce1fc124b364255df to your computer and use it in GitHub Desktop.
Save Kazuki-tam/7e23a246c22d628ce1fc124b364255df to your computer and use it in GitHub Desktop.
Algolia_vue_instant_search
<template>
<div class="wrapper">
<h1 class="heading">{{ msg }}</h1>
<ais-index
app-id=“アプリケーションID"
api-key=“APIキー"
index-name=“インデックス名"
>
<!-- 検索フォーム -->
<ais-search-box placeholder="スイーツを検索してください"></ais-search-box>
<!--//End 検索フォーム -->
<!-- 絞り込みメニュー -->
<ais-refinement-list attribute-name="category"></ais-refinement-list>
<!--//End 絞り込みメニュー -->
<!-- 検索結果ヒット -->
<ais-results>
<template slot-scope="{ result }">
<div class="card_box">
<p class="card_img"><img :src="result.image" :alt="result.image_alt"></p>
<p class="card_ttl"><ais-highlight :result="result" attribute-name="title"></ais-highlight></p>
<p class="card_price">¥{{ result.price | priceDelimiter }}</p>
<p class="card_des"><ais-highlight :result="result" attribute-name="description"></ais-highlight></p>
</div>
</template>
</ais-results>
<!--//End 検索結果ヒット -->
<!-- 検索結果0件の場合 -->
<ais-no-results>
<template slot-scope="props">
<i>{{ props.query }}</i>は見つかりませんでした。
</template>
</ais-no-results>
<!--//End 検索結果0件の場合 —>
</ais-index>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'スイーツ検索'
}
},
filters: {
priceDelimiter: function (value) {
if (!value) {
return '販売されていません'
}
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment