商品ごとにレンタル期間の延長や利用可能泊数を自由に設定する方法

商品ごとにレンタル期間の延長や利用可能泊数を自由に設定する方法

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

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

商品ごとにレンタル利用期間を設定(標準機能)

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

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

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

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

レンタル利用期間を利用者側に決めてもらいたい場合、これからご説明する方法にて設定を進めていきます。完成イメージが付きやすいよう、デモページをご用意しました。


ここからはデモページの通り、1泊2日:11,000円、2泊3日:16,500円、7泊8日:33,000円のレンタル期間を例として、商品ページの作成方法を解説してきます。画面キャプチャはカレンダー上で「2022年10月5日」を選択し、2泊3日でレンタルする際に表示される内容となっております。
また①~④は、今回のポイントとなる箇所ですので解説していきます。設定にあたりJavaScriptを利用した内容が含まれますが、仕組みをご理解頂けましたら、ご自由にカスタマイズして頂けるかと思います。

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

商品管理 > 商品登録

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

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

レンタル開始日より [x] 日前に発送
レンタル開始日より [y] 日前にお届け
レンタル開始日より [1] 日間ご利用
レンタル開始日より [1] 日後に返却

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

延長設定

1日延長(5,000円)
2~5日延長(0円)
6日延長(20,000円)

延長設定では上記のように設定します。「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の運営に必要な機能を取り揃えております。宜しければこちらの記事もご確認ください。

国内唯一レンタルECサイト構築システム -サブスク対応ASP

国内唯一のレンタル・サブスクECサイト構築専用のクラウド型カートシステムで、レンタルECの運営に必要な、直感的にレンタル期間を選択できるカレンダー表示や日毎の在庫/スケジュール管理などの機能を全て標準搭載しており、ドレス/着物/アウトドア用品/バッグ/家具等あらゆる業種のレンタルECサイト構築に完全対応。 また継続課金のサブスクリプションにも対応しているため幅広いサービスに最適で、導入200社以上の実績。 さらに毎月無償バージョンアップを実施しているため常に最新の状態でレンタル・サブスクECサイトを運用可能。 新規立ち上げからシステムのリプレイスまで月額29,800円より実現できます。