Shopify themes, liquid, logos, and UX
Hi all,
Currently I am creating a delivery picker in the cart page. It is working. However, the calendar blocked all my weekends.
My Questions:
1. In which line of the existing code I can disable and enable the delivery date?
2. Can I make it mandatory where customer cannot check out if they didn't select the delivery date?
3. Can I have a buffer of 2 days from the "on date"? Example: today is 9/11/2024, customer can only select 2 days after the current date.
Let me share the code.
theme.liquid
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
create a delivery date snippet
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<div style="width:300px; clear:both;">
<p>
<label for="date">Pick a delivery date:</label>
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
</p>
</div>
<script>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: $.datepicker.noWeekends
});
});
}
}
</script>
snippet in cart page - cart.liquid
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024