You can allow customers to save files directly to their Dropbox account from the download page.
Depending on your preference, you can add:
- Save to Dropbox for each individual file.
- Save All to Dropbox for all files in an order.
- Or both.
How to set it up
Add the Dropbox JavaScript SDK (required)
1. Navigate to Settings → Library & Account Settings → Select your theme → Edit Code.
2. Open layout.liquid and add the following code:
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="<key>"></script>
Replace <key> with your Dropbox App Key, available from Dropbox's developer documentation.
Option 1: Add a "Save to Dropbox" button for each file
Open file.liquid and add:
<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>
Option 2: Add a "Save All to Dropbox" button
Open line_item.liquid.
1. At the top of the file, add:
<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 %}
2. At the bottom of the file, add:
<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");
button.innerHTML = "Save All to Dropbox";
}
}
</script>
3. Finally, add the following where you'd like the button to appear:
<span style="margin-left: auto;" id="download-all"></span>
You can read more in Dropbox's official developer documentation.
