|
HemangLavana
|
November 12, 2021 at 8:40 am
I have configured tickets for sale where a client can purchase a max of 1 ticket. For such cases, would it be possible to change the current dropdown menu with values of 0 and 1 with a simple checkbox for the client to select. Ex:
https://lavana.org/events/2022-q1-veggie-shares-test/
Also for such cases, I would like to have an additional overall checkbox which can select all the ticket items for the event. In the above example, there are 6 tickets and it would really be nice if the user can select/buy one of each ticket with a single click (or have an option to select specific tickets only).
Hope my request is clear. Let me know if there is some way to achieve this.
Thanks,
Hemang.
|
|
Tony
|
November 15, 2021 at 4:03 am
Hi Hemang,
I have configured tickets for sale where a client can purchase a max of 1 ticket.
It’s important to note that your setup means the client can purchase a max of 1 from each ticket type. Its not a max of 1 ticket (we have an option for that) but 1 of each type.
For such cases, would it be possible to change the current dropdown menu with values of 0 and 1 with a simple checkbox for the client to select.
We currently don’t have an option for this within Event Espresso itself, although if you are comfortable with JavaScript you could add this in via a hook.
Here is an example:
https://gist.github.com/Pebblo/737310c7309436231008666ac27e9662
However, note that you will also need to add some form of check within that function to only added it to the events you want to use it on, for example, a custom field within the event which if set adds the above code on the single event output.
Also for such cases, I would like to have an additional overall checkbox which can select all the ticket items for the event. In the above example, there are 6 tickets and it would really be nice if the user can select/buy one of each ticket with a single click (or have an option to select specific tickets only).
This is similar to above in that we don’t have an option for it although you could extend the example I gave you above to to add this in.
|
|
HemangLavana
|
November 17, 2021 at 5:51 pm
Nice, this seems to be working well. I have some issue with the 2nd part of my question – the “Select All” option. I have been able to setup such checkbox and also when I click on it, it checks or unchecks the rest of the checkboxes. However, when I try to proceed with the “Registration”, it always complains with an error that no tickets have been selected. You may try it out yourself here:
https://lavana.org/events/2022-q1-veggie-shares-test/
Any idea what could I be doing wrong?
A related question. I wanted to replace the text in table header called “Qty” with the “Select All” checkbox. How can I do that?
|
|
Tony
|
November 18, 2021 at 3:38 am
Any idea what could I be doing wrong?
How are you adding the select all option?
Where are you adding the JavaScript to handle the click event?
A related question. I wanted to replace the text in table header called “Qty” with the “Select All” checkbox. How can I do that?
You can use the FHEE__ticket_selector_chart_template__table_header_qty hook.
Like so: https://gist.github.com/Pebblo/6c8c3c8d84b9d77608d9116bfe012dec
|
|
HemangLavana
|
November 18, 2021 at 8:17 am
Great – Qty replacement hook worked like a charm. I have changed Qty with:
function tw_ee_custom_qty_text() {
// return 'CustomQty*';
return '<input class="checkall" type="checkbox" onClick="toggle(this)"/> Select All';
}
For the select all option, I have created a javascript function:
<script>
function toggle(oInput) {
var aInputs = document.getElementsByTagName('input');
for (var i=0;i<aInputs.length;i++) {
if (aInputs[i] != oInput) {
aInputs[i].checked = oInput.checked;
}
}
}
</script>
Can you suggest how to improve this function.
|
|
Tony
|
November 18, 2021 at 8:42 am
Why not just use some jQuery to make this really simple:
jQuery('.ee-ticket-selector-ticket-qty-th input:checkbox').change(function(){
jQuery(".tckt-slctr-tbl-td-qty input:checkbox").change();
});
Whenever the select all checkbox is clicked call change on all of them, which then gets managed by the other snippet I gave you for each individual checkbox.
|
|
HemangLavana
|
November 18, 2021 at 1:01 pm
Can you provide bit more details on how can I use your jQuery. I am a newbie to this, so it would be great if you can provide details on where exactly should I place the jquery code.
|
|
Tony
|
November 18, 2021 at 5:02 pm
Just to note, when anyone starts posting code I’m going to automatically assume they know how to use it unless it’s stated otherwise 🙂
Where you currently have this code:
https://gist.github.com/Pebblo/737310c7309436231008666ac27e9662
Change it to be this one:
https://gist.github.com/Pebblo/aadb2c7349b5093d807974aabf60288b
That should do it for you.
|
|
HemangLavana
|
November 18, 2021 at 5:31 pm
Still doesn’t work. I must be missing something very simple. I have this:
https://gist.github.com/Pebblo/aadb2c7349b5093d807974aabf60288b
and this:
function tw_ee_custom_qty_text() {
return '<input class="ee-ticket-selector-ticket-qty-th" type="checkbox" /> Select All';
}
add_filter( 'FHEE__ticket_selector_chart_template__table_header_qty', 'tw_ee_custom_qty_text' );
The “Qty” table header gets replaced with a checkbox and “Select All”, but when I click on the select all checkbox, it does not seem to select the checkboxes of various tickets.
You may check out the behavior over here:
https://lavana.org/events/2022-q1-veggie-shares-test/
|
|
HemangLavana
|
November 18, 2021 at 9:25 pm
After some debugging, I finally figured out the issue. Here’s the updated code snippet that worked for me:
function tw_ee_ticket_selector_replace_qty_select_with_checkboxes() {
wp_add_inline_script(
'ticket_selector',
'jQuery( document ).ready(function($) {
$(".tckt-slctr-tbl-td-qty select").each(function(){
// Add a new checkbox for each Qty table entry
$(this).before("<input class=\'" + this.id + "\' type=\'checkbox\'>");
// Hide the original Qty dropdown menu, so that the user only sees checkbox
// For debugging purposes, comment out the following line to see the behavior
// of how selecting / unselecting checkbox updates the Qty value
$(this).hide();
// Add a change function to keep the checkbox value and hidden Qty in sync
$(".tckt-slctr-tbl-td-qty input:checkbox").change(function(){
if (this.checked) {
// When the checkbox is selected by the user, we assign the value of 1 to Qty
var select = $("#" + $(this).attr("class"));
let value = select.find("option:eq(1)").val();
select.val(value).change();
} else {
// When the checkbox is unselected by the user, we assign the value of 0 to Qty
var select = $("#" + $(this).attr("class"));
let value = select.find("option:eq(0)").val();
select.val(value).change();
}
});
});
// The following jquery applies to "Select All" feature in the header table
$(".ee-ticket-selector-ticket-qty-th input:checkbox").change(function() {
// First set the value of "Select All" to all the checkboxes
$(".tckt-slctr-tbl-td-qty input:checkbox").prop("checked", this.checked)
// Next, ensure that the boolean value of checkbox is propagated to hidden original value of Qty
$(".tckt-slctr-tbl-td-qty input:checkbox").change();
});
});'
);
}
add_action( 'wp_enqueue_scripts', 'tw_ee_ticket_selector_replace_qty_select_with_checkboxes', 11 );
There were couple of issues: (1) the checkbox selection for each individual entry was working, but unselecting it would not update the value back to 0. So I had to add the “else” clause, and (2) the jquery for “Select All” would call the change function for all checkboxes, but first its value had to be updated to match the “select all” value.
Thanks for all your help. This is now mostly working very well (few minor issues, like browsing back leaves the “Select All” value in different state, or the “Register” button should be greyed out until at least 1 ticket is selected.
|
|
Tony
|
November 19, 2021 at 9:13 am
My apologies, I’d signed off before your reply so didn’t see the above until now.
Nice work, I’m glad its working for you 🙂
|
