Code Samples
Basic Example: Native
<div style="margin-bottom: 4rem; margin-top: 2rem">
<spektrix-gift-vouchers client-name="demo2">
<div>
<h2>spektrix-gift-vouchers:Native</h2>
</div>
<div>
<label for="amount">
Amount
<input type="text" name="amount" placeholder="amount" data-amount>
</label>
</div>
<div>
<label for="sendDate">
Send Date
<input type="date" name="sendDate" data-send-date>
</label>
</div>
<div>
<label for="toname">
To:
<input type="text" name="toname" data-to-name>
</label>
</div>
<div>
<label for="fromname">
from:
<input type="text" name="fromname" data-from-name>
</label>
</div>
<div>
<label for="message">
message:
<input type="text" name="message" data-message>
</label>
</div>
<div>
<label for="deliveryType">Delivery type </label>
<select name="deliveryType" data-delivery-type>
<option value="CustomerEmail" selected>Customer Email</option>
<option value="OtherEmail">Other Email</option>
</select>
</div>
<div>
<label for="deliveryEmail">
delivery email address:
<input type="text" name="deliveryEmail" data-delivery-email-address>
</label>
</div>
<button data-submit-gift-voucher>Buy Gift Voucher</button>
<div data-success-container style="display: none;">Insert success content/markup here</div>
<div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-gift-vouchers>
</div>
Basic Example: Using Flatpickr date picker plugin
This example works with dates by placing the data-send-date
attribute on directly on its corresponding input. You can find more details about this approach here and further details on the Flatpickr plugin here
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>flatpickr("#datepicker", {})</script>
<div style="margin-bottom: 4rem; margin-top: 2rem">
<spektrix-gift-vouchers client-name="demo2" forward-to="https://system.spektrix.com/demo2/website/basket.aspx" id="vouchery">
<div>
<h2>spektrix-gift-vouchers:Flatpicker</h2>
</div>
<div>
<label for="amount">
Amount
<input type="text" name="amount" placeholder="amount" data-amount>
</label>
</div>
<div>
<label for="sendDate">
Send Date
<input id="datepicker" type="text" readonly data-send-date>
</label>
</div>
<div>
<label for="toname">
To:
<input type="text" name="toname" data-to-name>
</label>
</div>
<div>
<label for="fromname">
from:
<input type="text" name="fromname" data-from-name>
</label>
</div>
<div>
<label for="message">
message:
<input type="text" name="message" data-message>
</label>
</div>
<div>
<label for="deliveryType">Delivery type </label>
<select name="deliveryType" data-delivery-type>
<option value="CustomerEmail" selected>Customer Email</option>
<option value="OtherEmail">Other Email</option>
</select>
</div>
<div>
<label for="deliveryEmail">
delivery email address:
<input type="text" name="deliveryEmail" data-delivery-email-address>
</label>
</div>
<button data-submit-gift-voucher>Buy Gift Voucher</button>
<div data-success-container style="display: none;">Insert success content/markup here</div>
<div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-gift-vouchers>
</div>
Basic Example: Pickadate
This example works with dates by setting the sendDate
property on the component directly using JS from an event fired by the Pickadate plugin. You can find more details about this approach here and further details on the Pickadate plugin here
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.date.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
var pickadateComponent = document.getElementById('pickadateexample');
var pickadateInput = document.getElementById('pickadate');
var $inputDate = $("#pickadate").pickadate();
var picker = $inputDate.pickadate('picker');
picker.on({
set: function (thingSet) {
var newDate = new Date(picker.get());
pickadateComponent.sendDate = newDate;
}
});
</script>
<div style="margin-bottom: 4rem; margin-top: 2rem">
<spektrix-gift-vouchers client-name="demo2" id="pickadateexample">
<div>
<label for="amount">
Amount
<input type="text" name="amount" placeholder="amount" data-amount>
</label>
</div>
<div style="position:relative">
<label for="sendDate">
Send Date
<input id="pickadate" type="text" name="sendDate" data-send-date>
<div>
</label>
</div>
<div>
<label for="toname">
To:
<input type="text" name="toname" data-to-name>
</label>
</div>
<div>
<label for="fromname">
from:
<input type="text" name="fromname" data-from-name>
</label>
</div>
<div>
<label for="message">
message:
<input type="text" name="message" data-message>
</label>
</div>
<div>
<label for="deliveryType">Delivery type </label>
<select name="deliveryType" data-delivery-type>
<option value="CustomerEmail" selected>Customer Email</option>
<option value="OtherEmail">Other Email</option>
</select>
</div>
<div>
<label for="deliveryEmail">
delivery email address:
<input type="text" name="deliveryEmail" data-delivery-email-address>
</label>
</div>
<button data-submit-gift-voucher>Buy Gift Voucher</button>
<div data-success-container style="display: none;">Insert success content/markup here</div>
<div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-gift-vouchers>
</div>