Email before download

Email before download
Share Button

Recently just successfully integrate “email before download” features to one of my clients website : indochinenatural.com

The application need to be run as following :

1. When visitor reach the download page, it should show the list of files that allowed visitor to download. A checkbox located at the left hand side will be display. Visitor need to check on the file that they want to download.

downloads_step1
2. Once visitor check the checkbox, a form will be display. Visitor will just fill in the form and click on submit / download.

downloads_step2
3. Download button will be display. Visitor just click on the button to start download.

For the sample on how its appearance, you may visit at http://indochinenatural.com/main/downloads/

 

What are the task that i had done

Setup and installation is same as the instruction given by the official website. I am would like to share on how we do the script modification.

ASSUME You already installed and configure the contact form 7 and email-before-download plugin.
1. Add in one or more file in “Downloads” directory and remember the ID (eg 1,4)
2. Goto Contact Form 7, edit the form. Add in <ebd_left /> on top so that file listing will appear and the checkbox on left side. Wrapped the form with extra div with the property display:none. Do remember to provide one id for that wrapper. in this case is downloadinputform

Example :
<u>Files available for download</u><ebd_left />
<div id=’downloadinputform’ style=’border:1px solid #000; padding:5px; display:none;’>

3. Modification of the script:
a)Goto Plugins->Installed Plugin->Email Before Download->edit
b)Click on email-before-download/email-before-download.php
c)Add in following javascript code so that when user click on the checkbox, it will trigger the downloadinputform id to display or not display.
echo ‘<script type=”text/javascript”>’;
echo ‘function chk_form(ids_underline) {‘;
echo ‘ var switches = 0;’;
echo ‘ var ids = ids_underline.split(“_”);’;
echo ‘ for (var i = 0; i < ids.length; i++) {‘;
echo ‘ var id_value = ids[i];’;
echo ‘ var var_id = “checkid_”+id_value;’;
echo ‘ if (document.getElementById(var_id).checked == true) {‘;
echo ‘ switches = 1;’;
echo ‘ }’;
echo ‘ }’;
echo ‘ if (switches == 1) {‘;
echo ‘ document.getElementById(\’downloadinputform\’).style.display = “block”;’;
echo ‘ }’;
echo ‘ else {‘;
echo ‘ document.getElementById(\’downloadinputform\’).style.display = “none”;’;
echo ‘ }’;
echo ‘}’;
echo ‘</script>’;
d) Modify the following line
$chekboxesL .= ‘
<input type=”checkbox” name=”ebd_downloads[]” value=”‘. $dl_id . ‘”/> ‘. $d->title;

TO

$chekboxesL .= ‘
<input id=”checkid_’.$dl_id.’” type=”checkbox” name=”ebd_downloads[]” value=”‘. $dl_id . ‘” onclick=”chk_form(\”.preg_replace(“/,/”,”_”,$download_id).’\');”/> ‘. $d->title;

(Explanation : Each checkbox will provide one id as shown. Add in the onclick javascript action to that it will check whether it should display the form or not. FYI, initial stage, form display:none)

By using this, you will be able to do the same function as shown in the link that provided.

NOTE: remember to change

// add checkboxes if count is more than one
if (count($dldArray) > 1){

TO

// add checkboxes if count is more than one
if (count($dldArray) > 0){

So that, it will display the checkbox even only got 1 file.

Hopefully this helps.

If you have any question, feel free to contact me. I try my best to help.

KMChew
0126065910
ideaone.com.my

Comments are closed.