i'm a newbie. first sorry for my English. I'm here trying to make a website with wordpress and have some difficult time when i trying to modify a plugin function because i have no basic skill on programming, even a pro need time to edit another developer code.
But i'm here to learn, i have stuck on this function for like 1 month with out any progress and no results.
So, i have two plugin, one name "fancy product designer" is a Woocommerce Product editor where customer can create their own customized product on your site, and second one is "Dokan" is a multi marketplace, where a customer can act like a seller, build their own product, their price, named the product and etc.
Now, i want to integrate both plugin, where customer who want to sell in my site, they need to create their product via "Fancy Product Designer", and then Fill the information of that product (name, price, desc) on Dokan Add Product Pages. In the simple way, i want the image generated by "fancy product designer" is used as Product Featured Image on "Dokan" add product pages, where both of them is on different pages.
Because i was a newbie and no basic skill of coding, i don't know how to implement a code, what code use for, what result the code make, etc. But Here is some code needed to implement the function.
Here's some code of "Fancy Product Designer"
/**
* Creates an image of the current showing product.
*
* @method createImage
* @param {boolean} [openInBlankPage= true] Opens the image in a Pop-up window.
* @param {boolean} [forceDownload=false] Downloads the image to the user's computer.
* @param {string} [backgroundColor=transparent] The background color as hexadecimal value. For 'png' you can also use 'transparent'.
* @param {string} [options] See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
*/
this.createImage = function(openInBlankPage, forceDownload, backgroundColor, options) {
if(typeof(openInBlankPage)==='undefined') openInBlankPage = true;
if(typeof(forceDownload)==='undefined') forceDownload = false;
backgroundColor = typeof backgroundColor !== 'undefined' ? backgroundColor : 'transparent';
options = typeof options !== 'undefined' ? options : {};
format = options.format === undefined ? 'png' : options.format;
instance.getProductDataURL(function(dataURL) {
var image = new Image();
image.src = dataURL;
image.onload = function() {
if(openInBlankPage) {
var popup = window.open('','_blank');
FPDUtil.popupBlockerAlert(popup, instance);
popup.document.title = "Product Image";
$(popup.document.body).append('<img src="'+this.src+'" download="product.'+format+'" />');
if(forceDownload) {
window.location.href = popup.document.getElementsByTagName('img')[0].src.replace('image/'+format+'', 'image/octet-stream');
}
}
}
}, backgroundColor, options);
/**
I don't know if it used, but its a code to generated the views (Product Canvas/ A layer of image that later joined and become Product Image) to dataURL
/**
* Gets the views as data URL.
*
* @method getViewsDataURL
* @param {Function} callback A function that will be called when the data URL is created. The function receives the data URL.
* @param {string} [backgroundColor=transparent] The background color as hexadecimal value. For 'png' you can also use 'transparent'.
* @param {string} [options] See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
* @return {array} An array with all views as data URLs.
*/
this.getViewsDataURL = function(callback, backgroundColor, options) {
callback = typeof callback !== 'undefined' ? callback : function() {};
backgroundColor = typeof backgroundColor !== 'undefined' ? backgroundColor : 'transparent';
options = typeof options !== 'undefined' ? options : {};
var dataURLs = [];
for(var i=0; i < instance.viewInstances.length; ++i) {
instance.viewInstances[i].toDataURL(function(dataURL) {
dataURLs.push(dataURL);
if(dataURLs.length === instance.viewInstances.length) {
callback(dataURLs);
}
}, backgroundColor, options, instance.watermarkImg);
}
};
};
/**
* Creates all views in one data URL. The different views will be positioned below each other.
*
* @method getProductDataURL
* @param {Function} callback A function that will be called when the data URL is created. The function receives the data URL.
* @param {String} [backgroundColor=transparent] The background color as hexadecimal value. For 'png' you can also use 'transparent'.
* @param {Object} [options] See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
* @example fpd.getProductDataURL( function(dataURL){} );
*/
this.getProductDataURL = function(callback, backgroundColor, options) {
callback = typeof callback !== 'undefined' ? callback : function() {};
backgroundColor = typeof backgroundColor !== 'undefined' ? backgroundColor : 'transparent';
options = typeof options !== 'undefined' ? options : {};
//check
if(instance.viewInstances.length === 0) { callback('') }
$body.append('<canvas id="fpd-hidden-canvas"></canvas>');
var printCanvas = new fabric.Canvas('fpd-hidden-canvas', {
containerClass: 'fpd-hidden fpd-hidden-canvas',
enableRetinaScaling: true
}),
viewCount = 0;
function _addCanvasImage(viewInstance) {
if(viewInstance.options.stageWidth > printCanvas.getWidth()) {
printCanvas.setDimensions({width: viewInstance.options.stageWidth});
}
viewInstance.toDataURL(function(dataURL) {
fabric.Image.fromURL(dataURL, function(img) {
printCanvas.add(img);
if(viewCount > 0) {
img.setTop(printCanvas.getHeight());
printCanvas.setDimensions({height: (printCanvas.getHeight() + viewInstance.options.stageHeight)});
}
viewCount++;
if(viewCount < instance.viewInstances.length) {
_addCanvasImage(instance.viewInstances[viewCount]);
}
else {
callback(printCanvas.toDataURL(options));
printCanvas.dispose();
$body.children('.fpd-hidden-canvas, #fpd-hidden-canvas').remove();
if(instance.currentViewInstance) {
instance.currentViewInstance.resetCanvasSize();
}
}
});
And here was the "Dokan" Plugin code to add featured image (note: I dont know if it could be a problem, but dokan can only upload the featured image from wordpress media, even there's an Upload options too but the file uploaded need to be on my computer.)
featuredImage: {
addImage: function(e) {
e.preventDefault();
var self = $(this);
if ( product_featured_frame ) {
product_featured_frame.open();
return;
}
product_featured_frame = wp.media({
// Set the title of the modal.
title: 'Upload featured image',
button: {
text: 'Set featured image',
}
});
product_featured_frame.on('select', function() {
var selection = product_featured_frame.state().get('selection');
selection.map( function( attachment ) {
attachment = attachment.toJSON();
// set the image hidden id
self.siblings('input.dokan-feat-image-id').val(attachment.id);
// set the image
var instruction = self.closest('.instruction-inside');
var wrap = instruction.siblings('.image-wrap');
// wrap.find('img').attr('src', attachment.sizes.thumbnail.url);
wrap.find('img').attr('src', attachment.url);
instruction.addClass('dokan-hide');
wrap.removeClass('dokan-hide');
});
});
product_featured_frame.open();
},
removeImage: function(e) {
e.preventDefault();
var self = $(this);
var wrap = self.closest('.image-wrap');
var instruction = wrap.siblings('.instruction-inside');
instruction.find('input.dokan-feat-image-id').val('0');
wrap.addClass('dokan-hide');
instruction.removeClass('dokan-hide');
}
}
If the code i give is doesn't help you, please ask me to another function and i will look for it.
Please help me to implement the code on html or php or both too so it will redirect from one to another. I have read How to pass extra variables in URL with Wordpress before and i think it could help, so i decided to trying use a param to define a featured image is from other site, but when i trying to use it on "Dokan" add product pages with ?feat_image_id=https://imageurl.com or ?dokan-featured-image=https://imageurl.com and some param that possible (i forget what is it) but nothing happens on that page.
Thank you very much for your attentions, and for everyone who want to help me
