Rent item page is created with several elements, which can be used together or separately:
Date Picker
Date picker
HTML markup:
|
1 2 3 4 |
<form class="ct-form-group ct-u-marginBottom30 input-daterange input-group" id="datepicker"> <input type="text" class="form-control" placeholder="Check In Date" name="start" title="from"/> <!-- LABEL TODO --> <input type="text" class="form-control" placeholder="Check Out Date" name="end" title="to"/> </form> |
Scripts:
|
1 2 |
<script src="../assets/plugins/datepicker/js/bootstrap-datepicker.min.js"></script> <script>jQuery('.input-daterange').datepicker({});</script> |
Radioboxes
Radioboxes
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form id="ct-js-driverCheckbox" class="ct-js-radio-group ct-widget-content"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-checkbox ct-checkbox--rounded"> <input data-price="2100" name="Driver" id="checkbox5" type="radio" checked> <label for="checkbox5" class="checkbox-inline">With driver</label> </div> </div> <div class="ct-u-displayTableCell"> <div class="ct-checkbox ct-checkbox--rounded"> <input data-price="0" name="Driver" id="checkbox6" type="radio"> <label for="checkbox6" class="checkbox-inline">Without driver</label> </div> </div> </div> </form> |
Checkboxes
Checkboxes
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<form class="ct-widget-content ct-js-checkbox-group"> <div class="ct-checkbox ct-u-marginBottom10"> <input data-price="450" name="Hostess" id="checkbox1" type="checkbox" checked="checked"> <label for="checkbox1" class="checkbox-inline">Hostess</label> </div> <div class="ct-checkbox ct-u-marginBottom10"> <input data-price="200" name="Champagne" id="checkbox2" type="checkbox" checked="checked"> <label for="checkbox2" class="checkbox-inline">Champagne</label> </div> <div class="ct-checkbox ct-u-marginBottom10"> <input data-price="725" name="Sea-food-and-caviar" id="checkbox3" type="checkbox"> <label for="checkbox3" class="checkbox-inline">Sea food and caviar</label> </div> <div class="ct-checkbox"> <input data-price="50" name="Non-alcoholic-drinks" id="checkbox4" type="checkbox"> <label for="checkbox4" class="checkbox-inline">Non-alcoholic drinks</label> </div> </form> |
Checkout Box
Checkout box
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="ct-js-checkoutBox" class="ct-widget ct-widget-pricing ct-u-marginBottom30"> <h3 class="ct-widget-header ct-widget-header--dark">Pricing <span id="datepickerOutput" class="pull-right">0 days</span></h3> <div class="ct-widget-content"> <ul id="ct-js-checkout-list" class="ct-widget-list"> <li data-name="Car-Price" data-itemPrice="350">Car price<span class="pull-right data-currency">$0</span></li> <li data-name="ct-js-driverCheckbox">Driver<span class="pull-right">0</span></li> <li data-name="Hostess">Hostess<span class="pull-right">0</span></li> <li data-name="Sea-food-and-caviar">Sea food and caviar<span class="pull-right">0</span></li> <li data-name="Non-alcoholic-drinks">Non-alcoholic drinks<span class="pull-right">0</span></li> <li data-name="Champagne">Champagne<span class="pull-right">0</span></li> <li data-name="Parking-fee">Parking fee<span class="pull-right">$90</span></li> </ul> <h4 class="ct-checkout-error"><small>Please select a date</small></h4> </div> <h3 class="ct-widget-footer">Total <span id="ct-js-checkout-price" class="ct-widget-price pull-right">$0</span></h3> </div> |
- dataItemPrice – product price per day;
Notice:
data-price – Every checkbox and radiobox should have specified this attribute, otherwise script responsible for total price calculating won’t work correctly;
data-name – For radioboxes this attribute should have the same value as form’s ID containing a group of radio inputs.
For checkboxes this attribute should have the same value as input’s [name] attribute.
Required javascript:
|
1 |
<script src="../assets/js/shop.js"></script> |