Custom Functions For Product Pages. ConfigID, Image, SKU, Get Options.

Custom CPB Functions. Will be useful for custom development: Get ConfigID, Preview Image, Combined SKU, Selected Options etc (Social Sharing / Wishlist / CPB Gallery), Saving current custom product configuration & generate a link in the format of  yourstore.com/custom-product?configid=xxxz

1. To save and to get the URL after server-side saving, use this function. (You can test it in Developer > Console)

function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
        var hash = '';
        if(uri.indexOf('#') !== -1 ){
            hash = uri.replace(/.*#/, '#');
            uri = uri.replace(/#.*/, '');
        }
    
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        return uri + separator + key + "=" + value + hash;
    }
};

var getProductConfigUrl = function() {
    window._cpb.saveConfig(async function(res) {
        var configId = await window._cpb.saveConfig(null, false);
        var url = updateQueryStringParameter(window.location.href, 'configid', configId);
        //YOUR CUSTOM CODE HERE (In case you want to pass it over to sharing etc.
    }, false);
};

getProductConfigUrl();

2. To save fast and do not wait for server saving:

function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
        var hash = '';
        if(uri.indexOf('#') !== -1 ){
            hash = uri.replace(/.*#/, '#');
            uri = uri.replace(/#.*/, '');
        }
    
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        return uri + separator + key + "=" + value + hash;
    }
};

var getProductConfigUrl = async function() {
    var configId = await window._cpb.saveConfig(null, false);
    var url = updateQueryStringParameter(window.location.href, 'configid', configId);
    //YOUR CUSTOM CODE THERE
};

getProductConfigUrl();

To download custom product preview image:

var generateProductPreview = function() {
 var d = new Date(); 
 var name = 'preview_' + d.getTime().toString(16) + '.png';
 var link = document.createElement('a');
 link.download = name;
 link.href = window.cpbImageStorage.views.front.getSnapshot();
 link.click(); 
};
generateProductPreview();

Adding Social Sharing To Custom Product Pages

You can get information about the custom product options by the following code snippet:

var getCategories  =  function(panels) {   
    var i, j, k;
    var cat, opt;
    var result = {};
    for(i = 0; i < panels.length; i++) {
        if(! panels[i].categories) continue;
        for(k = 0; k < panels[i].categories.length; k++) {
            cat = panels[i].categories[k];
            result[cat.id] = {
                id: cat.id,
                title: cat.title,
                options: []
            };
            if(cat.options) {
                for(j = 0; j < cat.options.length; j++) {
                  opt = cat.options[j];
                  result[cat.id].options.push({
                      id: opt.id,
                      label: opt.option.data.label,
                      value: opt.option.data.value,
                      price: opt.price
                  });
                }
            }
        }       
    }
    return result;
};

$.get('https://storage.googleapis.com/custom-product-builder/YOUR_STORE_ID/PRODUCT_ID.json',
    function(data){
        console.log(getCategories(data.data.panels));     
    }, 'json'); 

You can get all chosen options using this  snippet:

your_var = window.CPB.getStore().getState().Product.layers;

You can also get combined SKUs on the Custom Product Builder page: 

window._cpb.getTotalSku()

It will return a combined SKU of the current configuration on the storefront. You can pass this function to your custom inventory software to offer advanced shipping/manufacturing notifications. 

 

Method to update a custom product text field programmatically.

function triggerReactChangeEvent(element, value) {
            var node;
            if(element instanceof $) {
            if(element.length == 0) return;
            node = element[0];
            } else if (element instanceof window.HTMLElement){
            node = element;
            }
            var inputTypes = [
            window.HTMLInputElement,
            window.HTMLSelectElement,
            window.HTMLTextAreaElement
            ];
            var index = inputTypes.indexOf(node.__proto__.constructor);
            if ( index  > -1 ) {
                var eventType = (index == 1) ? 'change': 'input';
                var setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
                var event = new Event(eventType, { bubbles: true });

            setValue.call(node, value);
            node.dispatchEvent(event);
            }
        }
        

 

Generate the preview images for front and back on mobile devices in custom resolution. javascript

function getViewImageURL(size, view) {
    if (typeof window.cpbImageStorage === 'undefined') return;
    view = view || 'front';
    size = size || 1000;
    var convaSize = $('.konvajs-content').width() || size;
    var newRatio = size / convaSize;
    var getDataURL = cpbImageStorage.views[view].getSnapshot(newRatio);
    return getDataURL;
}

example: javascript

getViewImageURL(1300, 'front');
getViewImageURL(1300, 'back');
getViewImageURL(1300, 'top');

Demo: https://1drv.ms/u/s!AhVmXKYTdHv-wTfUUBNkUJ6gjpzY