So, I've got a new project on my hands for a client. The site is for finding and booking speakers (motivational, financial, politics, etc) and, my client wants to make it so site visitors can click a button and add a speaker to "My Speakers List". Then, when a site visitor looks at their list of chosen speakers, there will be a form (Gravity Forms) that will auto-populate with a subject line that includes the names of their chosen speakers - maybe a hidden field instead of populating the subject line.

I've already built out the custom post type for the speakers using Toolset so, all good there.

So, how can I allow site visitors add custom posts (speakers) to a list (like adding products to a shopping cart) and then, fill out and submit a form that inquires as to the selected speakers' availability?

So, I've got a new project on my hands for a client. The site is for finding and booking speakers (motivational, financial, politics, etc) and, my client wants to make it so site visitors can click a button and add a speaker to "My Speakers List". Then, when a site visitor looks at their list of chosen speakers, there will be a form (Gravity Forms) that will auto-populate with a subject line that includes the names of their chosen speakers - maybe a hidden field instead of populating the subject line.

I've already built out the custom post type for the speakers using Toolset so, all good there.

So, how can I allow site visitors add custom posts (speakers) to a list (like adding products to a shopping cart) and then, fill out and submit a form that inquires as to the selected speakers' availability?

• custom-post-types
• custom-taxonomy
• plugin-gravity-forms

1 Answer 1

When I've investigated your example page, they sent an ajax like process to server and server return with a js code for the header (I've added below). Also, you can use Javascript & LocalStorage functionality for this situation.

response from their server

$('.domain-session-collection-count').html('1\n').fadeIn().show();
$("#collection_manager").html('<a class=\"btn btn-success pt-1 pb-1 border mb-1 btn-block f-s-15\" data-remote=\"true\" href=\"/my_speaker_list/remove_speaker/17093\">Added To List<\/a>\n');

$('#collection-action-17093').html('  <a data-remote=\"true\" href=\"/my_speaker_list/remove_speaker/17093\">\n    <button class=\"full-width remove\">\n      <i class=\"fa fa-check\"><\/i>\n    <\/button>\n<\/a>').fadeIn().show();
$(".speaker-add-remove").html("<a class=\"btn btn-success pt-1 pb-1 border mb-1 btn-block f-s-15\" data-remote=\"true\" href=\"/my_speaker_list/remove_speaker/17093\">Added To List<\/a>\n");
$("#speaker-add-remove-nav").html("  <a class=\" pt-1 pb-1 text-success pl-2 pr-2 text-center\" style=\"width: 110px;\" data-remote=\"true\" href=\"/my_speaker_list/remove_speaker/17093\">Added to List<\/a>\n");

When visitor/customer click your button, you can add CPT post id into a LocalStorage value, If they click one more people you can update LocalStorage value. After that, you can easily read this value and you can get info via WordPress Ajax with these ids. Also, you can create hidden input to your form with these ids.

This operation can easily be done with basic Javascript and above average WordPress Ajax knowledge.