Using only jQuery and CiviCRM to create Members Only Pricing

There have been several hook() or Drupal module based solutions for "members only" pricing for events or for other 'discounts' related to memberships.

I take a different approach by using only jQuery and blocks in Drupal 6.  For those who use Drupal 7 you can adapt this code with Drupal 7's new javascript namespace and Joomla folks could even make use of this in custom TPL files.

The whole concept of this code is that any 'member only' fee label must contain a specific word or phrase, in my example this word is "Member".  Staff must be trained to do this - it is relatively simple to do so.

How it works:

1. Place this code in a block, selecting "full HTML" or "unfiltered" input type, and assign the block to an inconspicuous region in your theme

2. Show the block only on certain pages, such as: civicrm/event/register

3. Show the block only to anonymous users in the block visibility settings

That's it!  Fee levels containing the word "Member" will be hidden.

<script>
cj(document).ready(function() {
    cj("input[name=amount]").each(function() {
      var thisPrice = cj(this).attr('id');
      cj("label[for='"+thisPrice+"']:contains('Member')").hide();
      cj("label[for='"+thisPrice+"']:contains('Member')").prev("#"+thisPrice).hide();
    });
});
</script>

Ways you can customize and enhance this

1. Change the word "Member" to a phrase of your choosing

2. Hide only the radio button, not the label, to 'entice' people to join. Delete the first line with hide() at the end

3. Activate this code only on certain pages by placing the unique id of the page in the if() statement near the top. That would look like this:

<script>
cj(document).ready(function() {
// add the id numbers of the pages you want below
if ( 
  document.location.href.indexOf('id=1') > 0 ||
  document.location.href.indexOf('id=2') > 0 ) {	
    cj("input[name=amount]").each(function() {
      var thisPrice = cj(this).attr('id');
      cj("label[for='"+thisPrice+"']:contains('Member')").hide();
      cj("label[for='"+thisPrice+"']:contains('Member')").prev("#"+thisPrice).hide();
    });
  }
});
</script>

4. Show the member pricing not simply to authenticated users, but to only users who are memembers

• Activate the CiviMember > Roles Sync script
• Change the visibility settings of the first block to be seen by all, thus hiding member pricing for everyone
• Make a second block with visibility settings only for your exclusive Member > Roles
• Copy and paste the same code, but change hide() to show(), thus re-showing member prices only to members
• Place this second block just below the first block

<script type="text/javascript">

    (function($) {

    $(document).ready(function() {


//This is our custom jQuery code

   

$("#priceset").find("label:contains('Members')").each(function(){

            var id = $(this).attr('for');

            if (id) {

                $(this).prev().remove();

                $(this).remove();

                    }

            });

    $("#priceset").prepend("<h3>If you are a member, log in for member prices</h3>");

//This is the end of our custom jQuery code

  }); 

  }) (jQuery);

</script>