How to replace add to cart button with save my build button

in the customproductbuilder-initializer.liquid file add jQuery (if it's not there yet)

{{ 'https://code.jquery.com/jquery-3.0.0.min.js' | script_tag }}

also add this line of code (should be below jQuery)

{{ 'customproductbuilder.js' | asset_url | script_tag }}

create customproductbuilder.js file in the assets folder and fill it with this code:

jQuery(function($) {
var cpb = $('#product-builder');
var redirectUrl = '/pages/product-builder-results';

document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', init);

function init() {
replaceAddToCartButton();
}

function replaceAddToCartButton() { 
$('.cpb-add-to-cart-button').remove();
var container = $('.cpb-product-actions-container');
var button = $('<button>').addClass('cpb-actions-btn cpb-add-to-cart-button').append($('<span>').html('Save my build')).on('click', addProductDetails);
container.append(button);
}

function addProductDetails() {
var name = CPB.getStore().getState().Product.name;
getProductConfig(function(productBuildBase) {

var front = getViewImageURL(1000, 'front');
var back = getViewImageURL(1000, 'back') ;

window.sessionStorage.setItem('productBuild', JSON.stringify({
configId: productBuildBase.configId,
name: name,
panels: productBuildBase.panels,

front: front,
back: back

}));
window.location.href = redirectUrl + '?' + productBuildBase.configId;
}); 
}

function getProductConfig(callback) {
_cpb.saveConfig(function(res) {
var result = [];
var product = CPB.getStore().getState().Product;
var changes = product.userChanges; 
var panels = Object.keys(changes);

panels.forEach(function(panelId) {
var title = '';
product.panels.forEach(function(panel) {
if(panel.id === panelId) {
title = panel.title;
view = panel.selectedView;
}
});
var panel = {
title: title,
categories: []
}
var categories = Object.keys(changes[panelId]);
categories.forEach(function(categoryId) {
var catLayer = changes[panelId][categoryId].layer;
var selectedOption = catLayer.option;

for(var i = 0; i < product.panels.length; i++) {
if(product.panels[i].id === panelId) {
var panelObj = product.panels[i];
break;
}
}
for(var i = 0; i < panelObj.categories.length; i++) {
if(panelObj.categories[i].id === categoryId) {
var catObj = panelObj.categories[i];
break;
}
}

var category = {
title: catObj.title,
options: []
}
catObj.options.forEach(function(option) { 
if(option.id === selectedOption) {
var title = catObj.type === 'input' ? catLayer.value : option.option.data.label;
category.options.push({
title: title,
sku: option.sku
});
}
});
panel.categories.push(category);
});
result.push(panel);
});
callback({configId: res, panels: result});
}); 
}

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;
}


});

on top you can see variable called redirectUrl - this is the url you'll be redirected to after clicking the button.

There are lines in bold in the code that are getting product previews (front and back in the example).

You need to remove if some of them are not active in your product.

Or you can add other views, the names are: front, back, top, bottom, left, right

The code above creates session storage field "productBuild" where you can find information about the built product.

On the page you are redirecting to add this div:

<div class="product-build-summary--js"></div>

we will add the product info to it.

Add this code to the bottom of the page (or as a separate script)

<script>
(function($) {
var build = window.sessionStorage.productBuild;
if(!build) return false;
build = JSON.parse(build);
if(window.location.search === '?' + build.configId) showBuild();

function showBuild() {
var summary = $('<div>');
summary.append($('<img>').addClass('cpb-summary-image').attr('src', build.front));
$(build.panels).each(function(i, panel) {
summary.append('<h4>' + panel.title + '</h4>');
panel.categories.forEach(function(cat) {
summary.append('<h5>' + cat.title + '</h5>');
var ul = $('<ul>');
cat.options.forEach(function(opt) {
ul.append('<li>' + opt.title + '</li>');
if(opt.sku) ul.append('<li class="cpb-summary-sku">' + opt.sku + '</li>');
});
summary.append(ul); 
}); 

});
$('.product-build-summary--js').append(
$('<h3>').html(build.name),
summary 
);
}

$(function() {
var productField = $('#contactFormProduct')
$('#contact_form').on('submit', function(e) {
var options = '';
build.panels.forEach(function(panel) {
options += panel.title + '\n';
panel.categories.forEach(function(cat) {
options += cat.title + ': ';
cat.options.forEach(function(opt) {
options += opt.title;
if(opt.sku) options += ' [' + opt.sku + ']';
options += '\n';
}); 
});
options += '\n';
});
productField.val(options);
});
});
})(jQuery);
</script>

This part in the bottom of previous script:

var productField = $('#contactFormProduct')
$('#contact_form').on('submit', function(e) {

is to add the build information to form that can be submitted to receive this info in the admin part of the website. Change "#contant_form" (form id) and "#contactFormProduct" (textarea id) selectors to fit you form and field. Or you can remove all the part if you're not sending info to admin panel.

And this one is to show image:

summary.append($('<img>').addClass('cpb-summary-image').attr('src', build.front));

You can add other views there just by copying the line and replacing "build.front" to any other view ex.: "build.back"