個人情報同意などに使える、サイト内のどのページからでも初回だけ表示されるポップアップを作りたいと思います。
全ページなのでtheme.liquidに直接書く方法もあると思いますが、簡単に管理できるように新規セクションで作成してみます。
セクションを新規作成
カスタマイズボタンの横にある3点ボタンから、「コードを編集」を開きます。
sections＞「新しいセクションを追加する」で空のセクションを作成します。
liquid編集
まず、jquaryを読み込ませます。CDNまたはassetsに必要なファイルを入れて読み込んでください。
次にCSSを追加します。このセクション内だけに適用されればいいので直接書いちゃいます。
{%- style -%}
.popup {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 1001;
top: 0;
left: 0;
}
.popup-content {
width: 75vw;
max-width: 750px;
height: 40vh;
background: white;
border-radius: 4px;
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.close-btn {
background-color: black;
border-radius: 2px;
color: white;
text-align: center;
cursor: pointer;
font-size: 1.2rem;
padding: 1rem 2rem;
display: block;
max-width: 10rem;
margin: 1rem auto;
width: 100%;
}
.close-btn:hover,
.close-btn:focus {
text-decoration: none;
cursor: pointer;
opacity: 0.8;
}
@media screen and (max-width: 768px){
.popup-content{
width: 80vw;
}
}
{%- endstyle -%}そしてポップアップ本体です。
<div id="popup" class="popup">
<div class="popup-content">
<div>{{ section.settings.popup_text }}</div>
<span class="close-btn">はい</span>
</div>
</div>
今回は、localStorageでユーザーが訪問済みなのか否か判断させます。さらに「はい」のボタンクリックによって、visitedがtrueになるようにしました。
<script>
const keyName = 'visited';
const keyValue = true;
if (!localStorage.getItem(keyName)) {
$('#popup').css('display', 'block');
$('.close-btn').click(function(){
$('#popup').css('display', 'none');
localStorage.setItem(keyName, keyValue);
});
} else {
$('#popup').css('display', 'none');
}
</script>最後にスキーマです。表示されるテキストはカスタマイズ画面から編集できるようにリッチテキストにします。これで改行や太字、リンクもできるので便利です。
{% schema %}
{
"name": "ポップアップ",
"class": "pop-section",
"settings": [
{
"type": "richtext",
"id": "popup_text",
"label": "テキスト"
}
],
"presets": [
{
"name": "ポップアップ"
}
]
}
{% endschema %}セクションを設置
あとはカスタマイズ画面でセクションを差し込めば完成です。
特定のページのみであればテンプレートごとに設置しますが、全ページに適用したいので共通のヘッダー内に入れました。
このようなセクションが１つできれば、Cookieにしたり、販促案内やクーポン用にカスタマイズの幅が広がりそうです。
参考：https://into-the-program.com/execution-firsttime-access/
使用テーマ：Dawn 15.1.0
