New to the community? Start here

[Hustle Pro] Hustle Trouble

Hello.
I am following the workaround described in the support forum located at here to incorporate a pdf download on Hustle opt-in submission.

The issue I am having is with the download link reverting to a navigation link from a forced download every time I reopen the pop-up to edit it.

When I enter the attribute “download” in the text editor of the success message without the additional =””, save and exit, it works fine. When I reopen the pop-up to edit it, Hustle automatically adds the =”” to the attribute so it looks like download=””. When this occurs, the forced download does not work and link reverts to navigation so the pdf opens in the browser window.
Is there a workaround for this, or a way to disable Hustle’s automated code validation which I assume is what is adding the additional =””?

Hope this makes sense. Thanks.

Thu, 11 Jun 2020 13:09:57
More Hustle Pro discussions
Hustle Pro
  • Eseoghene
    • The Bug Hunter

    Hello Lee

    Thanks for getting in touch.

    As a workaround, please add the following code to your .htaccess file after the after the <IfModule mod_rewrite.c> … </IfModule> block. This should force PDF files to download:

    <FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

    Let me know if it works.

    Kind regards,
    Ese.

  • Lee
    • Freelance WP Developer

    Following your example, if found the following code to be added for nginx servers to accomplish the same thing, although I have no way of implementing this myself on WPMUDEV hosting:

    # force pdf files to be downloaded
    location ~* (.*\.pdf) {
    types { application/octet-stream .pdf; }
    default_type application/octet-stream;
    }

    Is this something you can do for me?

  • Eseoghene
    • The Bug Hunter

    Hello Lee

    I have a couple of other suggestions:

    First Option:
    Create a template file (template-file-name.php) in your theme folder and add the following code to the file:

    <?php
// Specify wordpress template name
/* Template Name: Download PDF */

// We'll be outputting a PDF
header('Content-type: application/pdf');

// Set filename of download
header('Content-Disposition: attachment; filename="pdf-file-name.pdf"');

// Path to the file (searching in wordpress template directory)
$url = get_template_directory_uri() . "path-to-pdf-file/pdf-file-name.pdf";

readfile($url);
?>

    Replace below with your actual PDF file name;
    pdf-file-name.pdf
    and below with the actual path (e.g. /uploads/2020/06/pdf-file-name.pdf)
    path-to-pdf-file

    After saving the template file, create a new page in WordPress admin (new-page) and set the page template to the template you just created in your theme. The template name in this case is Download PDF if you do not change it.

    Now in your Hustle form, set your href value to the permalink of the page you just created in WordPress admin (i.e. Download File)

    2nd Option: Send file to user via automated email after user opts in (include link in the email body). To set automated email in your form, go to Emails -> Automated Email section at the bottom of the page. See screenshot below:
    [attachments are only viewable by logged-in members]

    Hope this helps. Let me know if you require further clarification or assistance.

    Kind regards,
    Ese.

  • Lee
    • Freelance WP Developer

    Thanks Ese.

    I will give option 1 a try as I want the download to be immediately accessible.

    It also gives me an idea regarding an add_action hook for the download trigger. If I was to add an add_action function I would want it to trigger after the email has been successfully submitted and the success message is displayed. What would be the best hustle action hook for this?

    Thanks
    Lee

  • Lee
    • Freelance WP Developer

    I’m having some trouble understanding the implementation reference material. Can anyone demonstrate how the j query script should be written?

    When the success message pops up, fire the downloadpdf.php page, thus eliminating the need to click on the download pdf button. You can see it in action here, its the Download Free Blueprint embed here https://studio6am.com

  • Eseoghene
    • The Bug Hunter

    Hi Lee

    Apologies for the delayed response.

    For my knowledge, Is there a php action hook I could use as well in my child-theme functions.php file to do an add-on function?

    You can use the hustle_form_after_handle_submit hook but triggering the download from the PHP may not work since that’s performed during an Ajax request.

    I’m having some trouble understanding the implementation reference material. Can anyone demonstrate how the j query script should be written?

    Sorry to hear about this. I have had this escalated to our SLS team and they will be in touch with an update as soon as possible.

    We appreciate your patience.

    Kind regards,
    Ese.

  • Panos
    • SLS

    Hi Lee ,

    You can give a try on this custom snippet:
    https://gist.github.com/wpmudev-sls/3ed85decff7365cb51ba7f0e548924da

    That should add a download link in the success window that appears after the popup is submitted. If you are interested in trying it out, you can download the zip, extract it and then upload file hustle-download-on-submit.php to your wp-content/mu-plugins folder. If that folder doesn’t exist you can simply create it.

    Before uploading the file you would need to edit a few things first. So open up that file with any text editor (notepad, notepad++, vs code etc) and change these lines according to your needs:

    	$module_id = 2; // The popup id
	$file_path = 'http://site.com/wp-content/uploads/file-name.pdf'; // The path of the file you need to download
	$file_name = 'a-new-filename.pdf'; // The name that the downloaded file will have on the local machine
	$link_text = "Download pdf file"; // What the download button will say
	$link_css_classes = "hustle-button-text"; // Some css class so you can customize the button (align it etc)

    Once done, save and upload as explained above. I would strongly recommend to first try this out in a test/staging site before moving it to a production site.

    Hope it helps :slight_smile:

    Kind regards!

  • Lee
    • Freelance WP Developer

    My very own plugin?! Thanks Panos, I really appreciate your effort and yes, I will download and test it out. Before I do though, just to be clear I am looking to have the file automatically download when the success window opens so the user does not have to click a button. I already have a button there that works.

    Lee

  • Panos
    • SLS

    It seems I understood that wrong, sorry for the confusion.

    I have updated the snippet:
    https://gist.github.com/wpmudev-sls/3ed85decff7365cb51ba7f0e548924da
    which you can re-download and replace the previous one

    It has an additional option :
    $auto_start_download = true; // Set to true to auto start file download after submit. Set to false in order to add a download link
    which is set to true by default. That should allow the file to be downloaded right away, after submission, without any button/link clicks involved. If that is set to false, then the download link will appear instead.

    Once again I’d like to remind you to first try this out in a staging/testing site. This is important to do with any new plugin theme and especially custom snippets.

    Kind regards!

  • Lee
    • Freelance WP Developer

    Hi Panos.

    Just wanted to let you know that it works like a charm. Can’t wait to find the time to dissect and understand your code. May I ask you any questions to help in my development?

    Thanks again. Much appreciated!

    Lee

  • Lee
    • Freelance WP Developer

    Hi again Panos.

    Question – is there a way to have both the automatic download and the link button present at the same time? I currently have a link in the success message that enables the download by calling a separate page/template, but I believe your method is cleaner and I’d prefer that the url not show in the browser, or the download accessible without the user actually submitting the hustle form.

    Thanks

  • Panos
    • SLS

    Glad to know it worked,

    is there a way to have both the automatic download and the link button present at the same time?

    You can remove the condition check for that by replacing this part :

    					if ( this.auto_start ) {
						this.download();
					} else {
						download_link.text = this.link_text;
						download_link.className += this.css_classes;
						success_wrap.appendChild( download_link );

						download_link.addEventListener( 'click', function() {
							let _this = wpmudev_hustle_after_submit;
							_this.download();
						}, false);
					}

    with :

    					this.download();

					download_link.text = this.link_text;
					download_link.className += this.css_classes;
					success_wrap.appendChild( download_link );

					download_link.addEventListener( 'click', function() {
						let _this = wpmudev_hustle_after_submit;
						_this.download();
					}, false);

    That should start the download immediately also it should show the download link in the success box.

    Can’t wait to find the time to dissect and understand your code.

    It’s done with js (vanilla except the initial trigger that had to use jquery). It fetches the file content via ajax and passes it to an “a” element and finally the downloading gets started with the createObjectURL and revokeObjectURL combination :
    https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL

    May I ask you any questions to help in my development?

    Sure, we’d be all happy to help where we can :slight_smile:

    Kind regards!