WordPress.org

Support

Support » Plugins and Hacks » [Sharing] Select files first, then display the form, and finally download file

[Sharing] Select files first, then display the form, and finally download file

  • Hi,

    This is a sharing information. It is not question.
    The purpose that i write this is to share with anyone that would like to use this plugin for following scenario:

    1. When 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.
    2. Once visitor check the checkbox, a form will be display. Visitor will just fill in the form and click on submit / download.
    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/

    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
    ideaone.com.my/

    http://wordpress.org/extend/plugins/email-before-download/

Viewing 15 replies - 1 through 15 (of 27 total)
  • Plugin Author mandsconsulting

    @mandsconsulting

    Hi KMChew,
    Thanks for sharing your idea with the community and with us.
    The use case you described in your post could be very useful for some of the plugin users.
    We might think about adding this as a new feature/option to plugin.

    Great!
    As long as its helps others user, feel free to enhance/modify/copy the script.
    I just share what I had done.

    🙂
    KMChew
    ideaone.com.my

    This would be a very nice feature to have. Checkboxes on the left make much more sense…

    Here’s a workaround that doesn’t do as nice a job as KMChew’s but doesn’t require any mods to the EBD code.

    Wrap your short code in a div statement similar to the following:

    <div class=”ebdrk”>
    [email-download download_id=”171, 175″ contact_form_id=”145″]
    </div>

    Then using a custom CSS plugin (I use PC Custom CSS by Peter Coughlin – not and endorsement, just a statement of fact) add the following CSS overrides:

    /**
    * Align checkbox for Email-Before-Download
    */

    .ebdrk {
    border: 1px solid #91c184;
    margin: 0 0 10px;
    color: #5c8a50;
    padding: 0px 20px 8px 35px;
    }

    .ebdrk input[type=checkbox] {
    float: left;
    margin-right: 0px;
    margin-top: 2px;
    width: 20px;
    border-radius: 13px;
    }

    —-

    The first entry simply puts a border around the files and input form. The second entry moves the checkboxes to the left. I’ve checked it with Chrome, IE10, Firefox and Safari and it seems to work ok. Have not checked on mobile browswers yet…

    Anyway, hope this helps as an interim workaround.

    Hi rhkeahey,

    Your solutions look much better than mine!!!

    I like it very much.

    Thanks
    KMChew
    ideaone.com.my

    Hi!
    This kind of script is very interesting, but where (in which part in the php file) I have to insert the script you wrote?

    Thanx
    Elisa

    Hi Elisa,

    I assume your question is about the example I gave. Actually you don’t have to modify the plug-in. The first part simply goes in the page where you want to add the EBD short code. Just add the <div> statement before and after as shown.

    The CSS could be added in a CSS plugin (in my example PC Custom CSS). This way you don’t have to modify any plugin files, which makes upgrading much easier. Hope this helps.

    Thanks KM! My solution doesn’t do all the cool things yours does though!

    Before I starting hacking code, has anybody “cracked the code” so to speak on styling the email messages? The current messages have no line breaks, etc. I know I should start another thread, but thought I would check here first.

    Hi rhkeahey,
    I’m just wondering in which part of the email-before-download/email-before-download.php I have to insert the script Km write down (the one that goes from ‘echo ‘<script type=”text/javascript”>’;’ to ‘echo ‘</script>’;’.
    I would like that my download pages appears as this one http://indochinenatural.com/main/downloads/

    Your function rhkeahey does the same thing?

    Thank you and sorry but I’m a WP dummy 🙂

    Kmchew,
    could you please paste the entire plugin code ( so I can paste it too directly on my php file) just to help me understand where I did wrong?
    When I activate the plugin WordPress say me ” The plugin generated xxx characters of unexpected output during activation…”

    P.s: I really like the css code you wrote rhkeahey

    Thanx
    Elisa

    Elisa,

    Sorry I didn’t answer your question earlier. I’ve been looking at the code and trying to figure out why the <ebd_left /> short code (tag) that you can place in the Contact Form 7 was not working – at least when you use the “Hidden Form” option (#13) in Email Before Download. Turns out there appears to be a logic error. Line 258 of version 3.2.7 of email-before-download.php is as follows:

    $f->appendXML($chekboxes);

    This places the input type=’checkbox’ before the download file name. If you want the checkboxes on the left, the replace line 258 with the following:

    $f->appendXML($chekboxesL);

    This is a quick and dirty fix and should be used ONLY if you want to use the hidden form and want the checkboxes on the left. Or, you can leave it as-is and use the CSS solution I provided above. By using the latter you hopefully won’t get caught by changes in subsequent releases. But, on the other hand you will probably run into browser compatibility problems…

    With respect to KM’s suggestion, I’ll leave it to him to answer. I’m not sure what version he coded against and I would probably need to do some more research to answer your question correctly. So while my solution(s) don’t give you all the options as KM’s, they at least clean up the checkbox on the left problem for hidden forms.

    Plugin Author mandsconsulting

    @mandsconsulting

    Hi rhkeahey and Elisa,
    Thank you for participating in this dialogue. Users like you help us immensely during the development process and with improving our final product.

    Elisa, if you can wait at most a couple of days we are in the process of releasing the fix suggested by rhkeahey. If you require an immediate remedy, you can follow his recommendation and use CSS to temporarily resolve the issue until our official release is ready.

    Thank you very much.
    I just resolved with the css code posted by rhkeahey!

    Great works guys!!

    Hi Elisa,

    Great to know that your issue solved!
    Sorry for late reply as i am fall sick…
    My solution seem like need to hack in the php code.
    Meanwhile rhkeahey solutions seem like more easy to follow.

    Please lets me know if you still need the source code.

    Thanks
    KMChew

    Thanks for these amazing tips…. I am trying desperately to do this for a client but when I add more than one file to the short code I get this:

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: expected ‘>’ in Entity, line: 17 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: p line 17 and br in Entity, line: 17 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: form line 1 and p in Entity, line: 18 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: div line 1 and form in Entity, line: 20 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Extra content at the end of the document in Entity, line: 20 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: Invalid argument supplied for foreach() in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 247

    Fatal error: Call to a member function appendChild() on a non-object in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 261

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘[Sharing] Select files first, then display the form, and finally download file’ is closed to new replies.