酒類や煙草類、成人向けの商材をECサイトで販売する場合に、商品購入時に義務付けられいる「年齢認証」をサイト内に設置する方法について、お問い合わせをお受けすることが度々あり、今回その設置方法をまとめることにしました。aishipシリーズにて用意しているテンプレートマスターをベースにデモサイトをご用意しておりますので、動作確認頂きながら解説していきます。
この方法は年齢認証の他にも、一般的な物販サイトにおいても個人情報の取り扱いに関する規約や返品規約に関する同意チェック、レンタルECにおけるレンタル規約の同意チェック等の用途としても使用可能です。
設定方法
１．商品ページに遷移した時点で年齢確認用のモーダルウィンドウを表示
早速ですが、デモサイトをご覧ください。以下のリンクをクリックすると商品ページに遷移します。
デモサイト：商品ページ
商品ページに遷移した時点でモーダルウィンドウが表示されましたでしょうか。
「はい」をクリックすると、モーダルが消え商品情報が表示され、商品をカートに入れる操作が可能となります。
「いいえ」をクリックすると、指定したリンク先（今回の場合はサイトのTOPページ）に遷移するように設定しています。
このモーダルウィンドウはCSS、JSを使用して以下のように設定しています。
▼作成例(HTML)
※aishipシリーズで作成する場合は、このHTMLを機能パーツで作成し、年齢確認が必要な商品ページのレイアウトに設置します。
<div class="overlay"> <div class="btn_area"> <p class="ttl">年齢確認</p> <p>20歳以上ですか？</p> <button>はい</button> <a href="<#サイトURL>" class="no">いいえ</a> </div> </div>
▼作成例(CSS)
※aishipシリーズで作成する場合は、サイト管理 > ユーザーCSS編集ご利用ください。
.overlay {
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
z-index: 1
}
.btn_area {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2
}
.btn_area .ttl {
font-weight: bold
}
.btn_area p {
padding: 15px
}
.btn_area button,
.no{
display: block;
margin: 0 auto;
background: #333;
color: #fff;
padding: 20px 40px;
border: none;
width: 150px;
}
.btn_area button:hover {
background: #777
}
button{
cursor: pointer;
}
▼作成例(JS)
※aishipシリーズで作成する場合は、サイト管理 > ユーザーJS編集ご利用ください。
$(function(){
$(".overlay").show();
$(".btn_area button").click(function(){
$(".overlay").fadeOut();
});});
２．商品をカートに入れた後、購入手続きへ進む前にチェックボックスを表示する方法
デモサイト：商品ページ
サンプル商品をカートに入れた後の画面のページ上部に「私は20歳以上です。」のチェックボックスが表示されましたでしょうか。チェックを入れないと「ご注文手続きへ」ボタンを押せないよう、disabledを挿入するJSを設定します。
なお、同ページ下部の「ご注文手続きへ」ボタンの箇所には、同じロジックのチェックボックスで文言を変えて、「利用規約に同意します」としています。利用規約へのリンクを設置することも可能です。
また、上記でご紹介した「商品ページに遷移した時点で年齢確認用のモーダルウィンドウを表示」と組み合わせて設置することも可能です。
▼作成例(HTML)
※aishipシリーズで作成する場合は、カート管理 > カートページ フリーエリア(上部)/フリーエリア(下部)をご利用ください。
<div class="test" style="text-align:center;"> <input type="checkbox" id="check" name="check" /> <label for="check">私は20歳以上です。</label></div>
▼作成例(JS)
※以下の内容にはaishipシリーズのカートにて使用中のid、class属性が含まれております。
<script>
$(function() {
$('.sysNextSubmit').attr('disabled', 'disabled');
$('#sysBasket .sysFreeAreaBottom').insertAfter('.sysItemListArea');
$('#check').click(function() {
if ( $(this).prop('checked') == false ) {
$('.sysNextSubmit').prop("disabled", true);
} else {
$('.sysNextSubmit').prop("disabled", false);
}
});
if($('input').hasClass('sysNextSubmit')){
$('#sysBasket .sysFreeAreaBottom').show();
}
});
</script>
３．商品オプション選択肢を使う方法
デモサイト：商品ページ
CSSやJSに不慣れな場合は、商品オプションの機能を使って同意を得ることも可能です。
※aishipシリーズで作成する場合は、商品管理 > 登録商品編集 > 該当商品の編集画面内 > 商品オプションより設定ください。商品ごとの設定となりますが、CSVでの一括更新にも対応しております。
まとめ
いかがでしたでしょうか。ECサイトの機能にて年齢認証や規約同意チェックの機能がなくても今回ご紹介したようなCSSやJSを活用することで解決することが可能です。ECサイト内にてどのように表示させたいかを明確にした上で、本記事の内容を参考に設定して頂けましたら幸いです。
