Answered

Show preview before add to cart

Krishna Priya

started a topic almost 10 years ago

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

sample.jpg

(182 KB)

Efbi
said over 9 years ago

I'm searching exactly the same thing, it's important for me to show a preview before the user add to cart his product !
I
K

Krishna Priya
said over 9 years ago

Hi,

I added the design preview like the above in the onclick event of fpd-modal-done function. I used the following

wp-content\plugins\fancy-product-designer\inc\class-frontend-product.php

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

And in variable.php file template, use the following ,

<div id="design_preview_div" style="display:none" > <label for="design_preview_label" class="labelmargin">Design Preview:    </label> <img id="design_preview" >
Efbi
said over 9 years ago

Hi ! Thanks for the answer, but where do you exactly put your code ?
Because it doesn't work for me

Efbi

said over 9 years ago

$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

K

Krishna Priya
said over 9 years ago

Hi,

You have to add

<div id="design_preview_div" style="display:none" > <label for="design_preview_label" class="labelmargin">Design Preview:    </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' ); ?>
Efbi
said over 9 years ago

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

Sushant Sanjay Khadilkar
said over 9 years ago

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
K

Krishna Priya
said over 9 years ago

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.
S

Sushant Sanjay Khadilkar
said over 9 years ago

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
S

Sushant Sanjay Khadilkar
said over 9 years ago

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?
Efbi
said over 9 years ago

Hi,

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

Thanks,
K

Krishna Priya
said over 9 years ago

Hi,

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

php
class-fronte...
(48.2 KB)
php
variable.php
(7.44 KB)
S

Sushant Sanjay Khadilkar
said over 9 years ago

OK. Thanks for the update. I will check and let you know. :)

Regards,
Sushant
Efbi
said over 9 years ago

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
class-fronte...
(48 KB)
php
variable.php
(5.31 KB)

« Previous
1
2
Next »

enable JavaScriptChatBot