Only for advanced users.
Maybe you know, currently the maximal size for the uploaded images limited by 1.5 Megabytes.
For the customers that require to upload larger files, it is possible to integrate the Custom Product Builder with the Uploadery app (https://apps.shopify.com/uploadery). See below the instructions of how to integrate CPB with the Uploadery.
1. Preface
Please, give your unique names for the following items. Use lowercase letters and underscore instead of spaces.
YOUR_UPLOADARY_FIELD_NAME
YOUR_UPLOADARY_CLASS_NAME
2. Uploadery App
- Please, create tag or collection or product type for all custom products with the uploadary app. Install Uploadery with this instruction - https://docs.theshoppad.com/article/9-install-uploadery
- Create new Uploadery Set according to instructions: ttps://docs.theshoppad.com/article/10-create-upload-fields-for-products
- Set Field Name as YOUR_UPLOADARY_FIELD_NAME
- Set Class Name as YOUR_UPLOADARY_CLASS_NAME
3. The Custom Product Builder
Please, add a new category: https://buildateam.zendesk.com/hc/en-us/articles/360026106591-Create-a-New-Custom-Product
After that:
- Set category type as input field -> text area
- Add extra class "custom-uploadery-connected"
- Create a choice (only one)
- Set choice label as YOUR_CPB_CHOICE_LABEL
- set Input Max Length "255"
- check Option "In Stock"
4. The template
Please, add to snippet called 'customproductbuilder-initializer.liquid' after
the tag with id="product-builder" following code:
<div id="uploadery-container" style="display:none;"></div>
5. Insert JavaScript code
Change the first step items on yours and add the following javascript code to template 'customproductbuilder-initializer.liquid' or to 'customproductbuilder.js'
;(function($) {
function _triggerEventOnInput(elem, enteredValue, eventName = 'input') {
var input = elem;
var lastValue = input.value;
input.value = enteredValue;
var event = new Event(eventName, { bubbles: true });
var tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
}
const uploadery = {
uploaderyContainer: false,
uploadedFileUrl: '',
connectedInput: false,
init() {
const that = this
this.uploaderyContainer = $('#uploadery-container').detach().show()
new MutationObserver(function() {
const hidden = that.uploaderyContainer.find('input[type="hidden"]')
const previousValue = that.uploadedFileUrl
if(hidden.length !== 0) that.uploadedFileUrl = hidden.val()
else that.uploadedFileUrl = ''
if(previousValue !== that.uploadedFileUrl) _triggerEventOnInput(that.connectedInput[0], that.uploadedFileUrl)
}).observe(this.uploaderyContainer[0], {childList: true, subtree: true})
this.updateDOM()
document.body.addEventListener('CPB_ON_UPDATE_CURRENT_TAB', this.updateDOM.bind(this))
document.body.addEventListener('CPB_ON_OPTIONS_UPDATE', this.updateDOM.bind(this))
},
updateDOM() {
const uploaderyConnectedCategory = $('.cpb-category.custom-uploadery-connected').eq(0)
if(uploaderyConnectedCategory.length === 0 || uploaderyConnectedCategory.attr('data-custom-uploadery-connected') === 'true') return
uploaderyConnectedCategory.attr('data-custom-uploadery-connected', true)
this.connectedInput = uploaderyConnectedCategory.find('textarea').eq(0).hide()
uploaderyConnectedCategory.append(this.uploaderyContainer)
}
}
document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', function() {
uploadery.init()
})
})(jQuery)
6. Configure Shopping Cart To Display Custom Product Information
Please modify your cart template accordingly with the instructions - https://buildateam.zendesk.com/hc/en-us/articles/360025937852-Configure-Shopping-Cart-To-Display-Custom-Product-Information
Please add next to the
{% for p in item.properties %}
the following code lines:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{% if p.last contains 'uploadery' %}
<a href="{{ p.last | split: '(' | first }}" target="_blank">View your uploaded file</a>
{% else %}
{{ p.last | split: '(' | first }}
{% endif %}
{% endif %}
Integration is complete.
if you need help with the Uploadery app integration, please e-mail to the support@buildateam.io
Comments
0 comments
Please sign in to leave a comment.