You can allow customers to easily save files to their Dropbox by adding two buttons, for each individual file or for all files in one click.
Customise the look of your delivery page by navigating to Settings > Theme > choose the theme you want to edit > Edit Code.
If you want to add a button to save each individual file and a button to save all files:
- Navigate to layout liquid to make changes and paste this code:
Remember to change <key> with the appropriate key given by Dropbox's documentation.
If you want only want to add a button to save each individual file:
- Navigate to file liquid to make changes and paste this code:
<a
href='#'
class='button sky-pilot-button inverse'
onclick="Dropbox.save('{{file.download_url}}', '{{file.filename}}', {})"
data-no-instant
>
{% render 'icons', icon: 'dropbox', classes: 'sky-pilot-action-icon' %}
Save to Dropbox
</a>
If you want only want to add a button to save all files:
- Navigate to line_item.liquid to make changes and paste this code at the top:
<script type='text/javascript'>
var files = []
</script>
{% for file in line_item.files %}
<script type='text/javascript'>
files.push({url: "{{file.download_url}}", filename: {{ line_item.product.title | json }} + "/" + {{ file.filename | json }} });
</script>
{% endfor %}
and this code at the end of the file:
<script type='text/javascript'>
if (files.length > 0) {
var button = Dropbox.createSaveButton({
files: files,
error: function(errorMessage){
if(errorMessage.indexOf("status 403") != -1)
alert('You have exceeded the limit of allowed dropbox saves');
}
});
var dall = document.getElementById('download-all')
if(dall) {
dall.appendChild(button);
$(button).removeClass("dropbox-dropin-btn","dropbox-dropin-default").addClass("button action_button");
var newText = "Save All to Dropbox";
button.innerHTML = newText;
}
}
</script>
Then add a
<span style="margin-left: auto;" id="download-all"></span>
where you want the button to display.
You can read more in Dropbox's official documentation here.
