How to integrate the Custom Product Builder with the Uploadery app

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 [e-mail]