How to integrate the Custom Product Builder with the Uploadery app

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 
 YOUR_CPB_OPTION_LABEL

 

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 "Text Monogram Field"
• Create an Option (only one)
• Set option label as YOUR_CPB_OPTION_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"></div>
<form action='/cart/add' style="display: none;">
<button type="submit"></button>
</form>

 

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'

<script>
 ;(function($){
 function triggerReactChangeEvent(element, value) {
 var node;
 if(element instanceof jQuery) {
 if(element.length == 0) return;
 node = element[0];
 } else if (element instanceof window.HTMLElement){
 node = element;
 }
 var inputTypes = [
 window.HTMLInputElement,
 window.HTMLSelectElement,
 window.HTMLTextAreaElement
 ];
 if ( inputTypes.indexOf(node.__proto__.constructor) > -1 ) {

const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
 const event = new Event('input', { bubbles: true });

setValue.call(node, value);
 node.dispatchEvent(event);
 }
 }
 var $elements = {
 builder: null,
 uploadary: null, 
 };
 var selectors = {
 uploadFileValue : '.cpb-category-input [placeholder="YOUR_CPB_OPTION_LABEL"]',
 clickabledImgs: '.cpb-option-type-img, .cpb-option-type-img img',
 clickabledColor: '.cpb-option-type-color', 
 dropdowns: '.cpb-option-type-select',
 inputs: '.cpb-input-group input, .cpb-option-type-inputLong input, .cpb-option-type-multiple input, .cpb-option-type-input input',
 //TODO options selectors 
 };
 var values = {
 fileName: '',
 fileUploadedPath: ''
 }
 
 var updateUploadedValue = function() {
 if(values.fileUploadedPath.length > 0) { return; }
 var el = $elements.builder.find(selectors.uploadFileValue);
 triggerReactChangeEvent(el, values.fileUploadedPath);
 };
 
 var initUpdateListeners = function() {
 $elements.builder.on('click', selectors.clickabledImgs, updateUploadedValue);
 $elements.builder.on('click', selectors.clickabledColor, updateUploadedValue);
 $elements.builder.on('change', selectors.dropdowns, updateUploadedValue);
 $elements.builder.on('change', selectors.inputs, updateUploadedValue);
 //TODO add else listeners
 };
 
 var checkUploadaryValue = function() {
 var $hidden = $elements.uploadary.find('#YOUR_UPLOADARY_FIELD_NAME');
 if($hidden.length == 0) return false;
 values.fileUploadedPath = $hidden.val();
 updateUploadedValue();
 initUpdateListeners();
 return true;
 };
 
 var setUploadary = function() { 
 var $textField = $elements.builder.find(selectors.uploadFileValue); 
 $textField.closest('.option-type-input').css('display', 'none');
 $elements.uploadary = $('#uploadery-container');
 if($elements.uploadary.length == 0) {
 return;
 } 
 var $uploadayLabel = $elements.uploadary.find('label.YOUR_UPLOADARY_CLASS_NAME');
 //REMOVE TEXT LABEL IF YOU WISH
 $uploadayLabel.contents().filter(function(){
 return this.nodeType === 3;
 }).remove(); 
 //TODO HERE YOUR CUSTOM UPLOAD BUTTON STYLES
 //INSERT UPLOADARY ELEMENT TO THE CATEGORY 
 $elements.uploadary.css('display', 'block').detach()
 $textField.closest('.cpb-category-options-container').append($elements.uploadary); 
 //YOU CAN USE THE CUSTOMER FILE NAME
 $elements.uploadary.find("input[type=file]").on('change',function(){
 if (this.files && this.files.length > 0) {
 values.fileName = this.files[0].name;
 } 
 });
 $(document).on('uploadSuccess', function(e){
 var cnt = 10000; 
 var uploadTimer = setInterval(function() {
 cnt--;
 if(checkUploadaryValue() || (cnt < 0)) clearInterval(uploadTimer);
 }, 100);

}); 
 };
 var initCPB = function() {
 $elements.builder = $('#product-builder');
 setUploadary();
 };
 var cpbLoaded = function() {
 if ($('#react-tabs-2').length > 0) {
 initCPB();
 } else {
 window.requestAnimationFrame(cpbLoaded);
 } 
 }; 
 })(jQuery);
</script>

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]