radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator Another

Start a new topic
Answered

Show preview before add to cart

 Hi there,


Our client wants to display the designed product before add to cart performed ie to view the preview of designed product in product detail page like the screenshot attached. Is that possible?


jpg
(182 KB)

Best Answer

 Hi,


variable.php =>Check line no 121

class-frontend-product.php => Check line no 334 to 341

php
php
(7.44 KB)

1 person has this question

Hi Sushant,


While waiting for an answer, i do this : 
put  
<img src="<?php echo $_POST['fpd_product_thumbnail']; ?>" />

 in the  "woocommerce/templates/notices/sucess.php" file.


When the user add to the cart the product, he'll see the preview in the sucess box..


It's the only thing i found till now.


Best regards,

RINVIL Jean

Hello RINVIL,

I need preview option. I also added separate feature request 1 Month ago. But nobody has replied for my request.

Thanks,
Sushant

 

Hi,


So nobody need preview ?...

Hi,


Thanks for your  update but it still doesn't work for me.
I compared our 2 files, and it looks like different

Which version you have? I join my files here



php
php
(5.31 KB)
OK. Thanks for the update. I will check and let you know. :)

Regards,
Sushant

 

Answer

 Hi,


variable.php =>Check line no 121

class-frontend-product.php => Check line no 334 to 341

php
php
(7.44 KB)

Hi, 


So no one found a solution to get this preview before ? :(


Thanks,

Actually alert is not getting inside if(jQuery('.fpd-lightbox-enabled').size() > 0) function...so thats why it is not working, have you added code in if(jQuery('.fpd-lightbox-enabled').size() > 0) function?


 

Hi,

I added alert but alert is not showing anything. It will be not reaching into the function.

Is it working on you end? can you share screenshot of the frontend where you have implemented?

Thanks,
Sushant

 

Hi,

var src3=fancyProductDesigner.getViewsDataURL('png', 'transparent', 0.3)[0];
alert(src3); //ADD THIS ALERT AND CHECK THE CONTENT OF SRC3

The above alert should show base 64 png image data. We have to add this in img src.

 

Hi Krishna,


I also added your code but its not working from my side. I added which you have mentioned correctly. 


do you have any other solution?


Thanks,

Sushant

Hi Yes it's what I do but it seems it's in class-frontend-product.php that the problem is
Hi,

You have to add

<div id="design_preview_div" style="display:none" > <label for="design_preview_label" class="labelmargin">Design Preview:&nbsp;&nbsp;&nbsp;&nbsp;</label> <img id="design_preview" /> </div>

 

in the file where woocommerce template single.php or in variable.php => wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php before the code

<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

  

$modalWrapper.on('click', '#fpd-modal-done', function(evt) {
								////////////////////////////////////////////////////////////////CUSTOM CODE ////////////////////////////////////////////////////////////////
								var src3=fancyProductDesigner.getViewsDataURL('png', 'transparent', 0.3)[0];

								if(src3!='')
								{ 
								document.getElementById('design_preview_div').style.display="block"; 
								document.getElementById('design_preview').setAttribute( 'src',src3); 
								}
								////////////////////////////////////////////////////////////////CUSTOM CODE ////////////////////////////////////////////////////////////////
								
								jQuery('#fpd-modal-cancel').click();

								if(<?php echo intval(fpd_get_option('fpd_lightbox_add_to_cart')); ?>) {
									$cartForm.find(':submit').click();
								}

								evt.preventDefault();

							})

  I exactly put it here

Hi ! Thanks for the answer, but where do you exactly put your code ?

Because it doesn't work for me

Login or Signup to post a comment