Phone Number - 'Click To Show'
Here is a quick tutorial on how to add a 'Click To Show' function for phone numbers posted on your classified website - using ClassiPress v3.3.
We will be hiding this field from the list that appears on the single ad page next to the ad image, and instead be placing it in the "Contact" tab on the right-hand side of the page
above the contact form.
First thing to do, is create a "Contact Number" custom field if you haven't already done so. Once you have created the custom field, click on the 'Edit Custom Field' link as we need to take note of the fields 'Meta Name'. In my case, it is
cp_contact_number (see screenshot below).
contactmeta.jpg
Note: You can call this field whatever you like - e.g. Telephone, Phone etc.
Secondly, we need to hide the contact number field from the list of fields that appear beside the ad image. To do this, we need to edit the
theme-functions.php file located in /includes directory.
Find this:
Code:
$disallow_fields = array( 'cp_price', 'cp_currency' );
Replace with:
Code:
$disallow_fields = array( 'cp_price', 'cp_currency', 'cp_contact_number' );
Note: Be sure to replace
cp_contact_number with the correct Meta Name of your custom field.
Now we need to edit the
sidebar-contact.php file which is also located in the /includes directory and add the following lines
above line 31.
Code:
<?php if(get_post_meta($post->ID, 'cp_contact_number', true)) { ?>
<p style="font-size:15px;"><strong style="color:#b22222;">Tel:</strong> <span class="telnum" data-replace="<?php echo(get_post_meta($post->ID, 'cp_contact_number', true)); ?>">XXXX-XXXX <strong style="font-size:10px;color:#b22222;">(click to show)</strong></span></p>
<?php } ?>
To quickly explain the above code, the IF statement basically means that if an ad poster has entered their contact number, it will be displayed in the tab. Otherwise, no text relating to a contact number will be shown. Also, XXXX-XXXX is what will appear in place of the actual phone number until the ad viewer clicks to reveal the actual phone number.
Here is what it will look like when hidden (left) & shown (right):
telhidden.jpg telshown.jpg
Note: Be sure to replace
cp_contact_number again with the correct Meta Name of your custom field.
To show a pointer cursor when visitors hover over the hidden number, paste the following anywhere in your
style.css file:
Code:
.telnum:hover {cursor:pointer;}
The final code we need to add is the script which shows/hides the phone number when clicked. We are using a data-replace function. Add the following script to the end of your
footer.php file:
Code:
<script type="text/javascript">
jQuery('body').delegate('span[data-replace]', 'click', function(event){
event.preventDefault();
var older_value = jQuery(this).html();
jQuery(this)
.html(jQuery(this)
.attr('data-replace'))
.attr('data-replace',older_value);
});
</script>
And that's it! Let me know if you experience any issues.
8Likes
Reply With Quote
You must be an AppThemes customer and logged in to view this response. 
