例えばレンタルDVDのように商品ごとに定められた利用泊数に応じてレンタルしたり、レンタカーのように利用者が利用期間を自由に選択してレンタルするといったように、商材や提供サービスによってレンタル期間の決め方は異なります。レンタル・サブスク専用クラウド型ECサイト構築ASPのaishipRENTALでは、標準機能として前者（商品ごとに店舗側が決めた利用期間をもとにレンタル）の機能をご用意しておりますが、後者（利用者側が自由に利用期間を選択してレンタル）についても設定を工夫することで対応方法がございます。オンライン上でレンタルサービス展開する場合に必要な、利用期間の前後に発生する発送期間や返却期間も加味した上で、実現可能な設定方法をまとめました。

本記事では標準機能の内容は端的にまとめ、応用カスタマイズとして設定できる方法について詳しく解説していきます。

レンタル利用期間を設定（標準機能）

aishipRENTALでは、標準機能として「レンタルスケジュール設定」をご用意しており、商品ごとに「発送日」「お届け日」「ご利用日」「返却日」を設定できます。これらの設定をもとに、該当商品の在庫を確保できる日を算出し、商品ページ内のレンタルカレンダーに反映されます。これにより利用者はレンタル可能日を視覚的に確認でき、レンタル利用したい希望日を選択するだけで、簡単にレンタルすることが可能です。

例）レンタル商品の利用期間を7泊8日で固定で設定。
利用者はレンタル希望の開始日を選択するだけで、発送日やお届け日、返却日が自動的に計算されます。

レンタル利用期間の延長設定（標準機能）

商品ごとに設定した「レンタルスケジュール設定」をベースにして、利用者が追加で利用したい期間（日数）を任意に選択できる設定が延長設定です。もちろん、延長により発生する追加料金を加算することも可能です。店舗側が、最小のレンタル期間を定めておき、その期間以上でレンタル予約を受け付ける運用が可能です。

例）レンタル商品の利用期間を7泊8日で固定で設定。また、延長日を1日単位で設定。
利用者はレンタル希望の開始日を選択するだけで、発送日やお届け日、返却日が自動的に計算されます。
また、延長日を指定すると、利用期間が延長され、返却日に自動反映されます。

利用者がレンタル利用期間を自由に選択する設定（応用カスタマイズ）

ここからが本記事の本題です。レンタル利用期間（泊数）を利用者側に決めてもらいたい場合、これからご説明する方法にて設定を進めていきます。

例）レンタル利用泊数を1泊2日：11,000円、2泊3日：16,500円、7泊8日：33,000円の中から利用者が自由に選択できるように設定。
選択した利用泊数に応じて「発送日」「お届け日」「ご利用日」「返却日」が自動計算されます。
また、レンタル利用泊数に応じて料金の変動も可能です。

完成イメージが付きやすいよう、デモページをご用意しました。

画面キャプチャはカレンダー上で「2022年10月5日」を選択し、2泊3日でレンタルする際に表示される内容となっております。
キャプチャ内の①～④箇所は、今回のポイントとなる箇所ですので、設定方法を詳しく解説していきます。
設定にあたりJavaScriptを利用した内容が含まれますが、仕組みをご理解頂けましたら、ご自由にカスタマイズして頂けるかと思います。

1.レンタル商品を登録する

まずは商品を登録します。種類は「レンタル商品」を選択し、必須事項を設定していきます。「販売価格」は税込みで11,000円になるように設定し、保存します。

レンタルスケジュール設定

デモサイトでは、最小レンタル期間を1泊2日としますので、「レンタル開始日より1日間ご利用」「レンタル開始日より 1日後に返却」と設定します。
※x,yの日程は問いません。実際にレンタル発送に必要な日数を設定頂けます。デモページでは1日前に発送、1日前にお届けの設定にしています。

延長設定

延長設定では上記のように設定します。「1日延長」は2泊3日用の設定で、「6日延長」は7泊8日用の設定になります。
「2～5日延長」は0円で設定しますが、延長日数に応じた在庫を抑えるためにこのように設定しています。

2.JavaScriptを設定する

レンタル商品登録にて設定した内容を1泊2日：11,000円、2泊3日：16,500円、7泊8日：33,000円として商品ページに表示されるように設定していきます。

テキスト置換する

画面キャプチャの①の箇所は、本来、延長日数を選択するプルダウンに対する項目名となりますが、JavaScriptを使って置換します。
「任意の文字」の箇所には例えば「レンタル泊数を選択する」のように自由に文言を設定頂けます。

 <script>
$(function(){
	$('.sysRentalExtendDays, select[name="rental_extend_date"] option').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/レンタル期間を延長する/g,'任意の文字')
		);
	});
});
</script>

プルダウンメニューを編集する

画面キャプチャの②の箇所は、本来、延長日数を選択するプルダウンとなりますが、JavaScriptを使ってその内容を書き換え、不要なメニューを非表示にします。

 

<script>
$(function(){
$('select[name="rental_extend_date"] option:contains("延長しない")').text('1泊2日：11,000円');
$('select[name="rental_extend_date"] option:contains("1日延長")').text('2泊3日：16,500円');
$('select[name="rental_extend_date"] option:contains("6日延長")').text('7泊8日：33,000円');
$('select[name="rental_extend_date"] option:not([value="1"]):not([value="6"]):not([value="0"])').wrap('<span class="selector-hide">');
});
</script>

「延長しない」は「1泊2日」、「1日延長」は「2泊3日」、「6日延長」は「7泊8日」と表示されるようにして、それぞれの料金を表示させます。また、「2～5日延長」は非表示に設定します。

レンタルカレンダーに利用泊数ごとの価格を反映させる

画面キャプチャの③の箇所、レンタルカレンダー内に表示される価格を、利用拍数ごとに切り替える設定をします。画面キャプチャは2泊3日を選択している時のもになるため、カレンダー内に16,500円が表示されておりますが、利用泊数を変更すると価格も連動して表示されるようにします。

<script>
$(function(){
  $('select[name="rental_extend_date"]').change(function() {
  	var extraction_val = $('select[name="rental_extend_date"]').val();
  	if(extraction_val == '0') {
        var price = document.getElementsByClassName("sysRentalSchedulesValidPrice");
        for (var i = 0; i < price.length; i++) {
            price[i].innerHTML = "11,000円";
        }
  	}else if(extraction_val == '1') {
        var price = document.getElementsByClassName("sysRentalSchedulesValidPrice");
        for (var i = 0; i < price.length; i++) {
            price[i].innerHTML = "16,500円";
        }
  	}else if(extraction_val == '7') {
        var price = document.getElementsByClassName("sysRentalSchedulesValidPrice");
        for (var i = 0; i < price.length; i++) {
            price[i].innerHTML = "33,000円";
        }
  	}
  });
});
</script>

カレンダー設定方法

画面キャプチャの③の箇所の色設定は管理画面上で行えます。

「ご利用日」と「延長日」を同色に設定することで、利用期間を同色で表示できます。
また、カレンダー表示月数を「2か月」以上に表示しておくと、翌月以降のカレンダーも同一ページ内に表示させることが可能です。

商品テンプレートを設定する

画面キャプチャの④の箇所、価格の表示は、商品テンプレート編集画面愛の表示項目「フォーム」の詳細設定画面にある「小計」を利用します。
表示項目には「価格」もご用意しておりますが、「価格」では延長料金が反映されない為、今回の設定を行う場合は使用しません。
なお、「小計」の文言は自由に変更可能です。

まとめ

いかがでしたでしょうか。レンタル・サブスク専用クラウド型ECサイト構築ASPのaishipRENTALでは、このような設定に対応した機能をご用意している他、レンタルECの運営に必要な機能を取り揃えております。宜しければこちらの記事もご確認ください。