Link to a pop-up window with size-chart

[TomPuja]

Hello all!

 

Our shop sells clothes and I wish to have a link to pop-up window with sizes in every product page, next to size options. Could you please give an idea how I can make it?

 

Thank you in advance!

[vekia]

where you've got these sizes defined? cms page? maye on image?

it will be the same for all products? or different for certain of them?

[TomPuja]

Hi!

 

Yes, at the moment I have them in CMS cause I couldn't find how to make an image.

 

In the best case, I would love to have size-charts different, i.e. depending on manufacturer.

In the worst case I was considering to put all size-charts into one, but then it means that customer has to find out himself. Whereas, I'm striving to make it as easy as possible.

 

Thank you!

[vekia]

If i were you i will add fancybox script to iframe

then in each product page i will create a button top open chart in iframe page

 

take a look here: http://www.prestashop.com/forums/topic/280224-solved-thickbox-broken-after-update/page-2

 

it's a valuable topic about adding own fancybox with iframe, this is the best option i think

please let me know what you think about it

[TomPuja]

Hi!

 

Thanks for the tip!

 

Unfortunately, I am not that advanced yet

So for the moment I just added a link and I am very happy that I managed to put it exactly in a place I wanted

 

Although, you could give me a hint how I could make it a pop-up window cause now it loads in a main frame and customer has to click BACK on browser in order to continue shopping.

 

Thank you in advance!

[vekia]

in my opinion popup is a bad idea, why? many of browsers blocks popups by default, it mean that your customers will have got troubles to display it in popup.

 

the best solution: fancybox.

 

you can also use target="_blank" then link will appear in new browser tab

[TomPuja]

Yes, I agree...

 

Would it be possible to post what exact script I should enter into products.tpl?

[vekia]

where you've got your size chart ? can you post link? then i will prepare full code for you

[TomPuja]

Hi!

 

Here is just random product http://nsoshoptest.tk/en/dale-of-norway/163-kongsvollen.html

and the link to sizes: http://nsoshoptest.tk/en/content/6-sizes

 

Thank you in advance!

[TomPuja]

Hello!

 

any luck what this?

 

Thanks!

[vekia]

$( document ).ready(function() {
$(".iframe").fancybox({
autoSize: false,
autoDimensions: false,
width: 630,
height: 425,
fitToView: false,
padding: 0,
title: this.title,
href: $(this).attr('href'),
type: 'iframe'
});});

you need to add this code to the product.tpl page (remember about literal tags)

then create link to sizes chart with this code:

<a href="http://nsoshoptest.tk/en/content/6-sizes?content_only=1" class="iframe">Sizes Chart</a>

effect after click on button:

[TomPuja]

It works!

 

Thank you indeed!

[bbgun91]

Actually, what TomPuja wanted basically is a popup window, not a fancybox, lightbox, notification modal or things like this.

The problem with fancy box is that you hide the content which is behind. For a size chart especially, it is quite important for people to have the size chart on a separate window.

The Popup won't be blocked by the browser from the moment the window is opened from the user's action of pressing a button or a link (At the inverse of advertising popups where the popup opens by itself).

 

an example with simple code : w3schools' fiddle example

 

for more examples : w3schools

 

I tested on FF25, Chrome 31, IE11 on a PC and on each browser it worked well without being blocked by the browser.

[vekia]

You think that popup like that is a solution? definitely not. 

popups like that were atractive ten years ago, not now, when you can do in attractive modern way.

This is why terms and conditions links also use fancybox.

moreover many browsers has got plugins to block popup windows.

[new_12]

i want to open a new tab as popup.so,here my code

 

$path=$this->context->link->getModuleLink('invoice', 'showinvoice');

<a href="'.$path.'" target="_blank" >popup</a>

 

 

when i click popup it open new tab.and the url is

"http://localhost/prestashop_1.6.0.2/index.php?fc=module&module=invoice&controller=showinvoice"

 

code inside this controller is:-

<?php

class InvoiceShowInvoiceModuleFrontController extends ModuleFrontController

{

public function initContent()

     {

        parent::initContent();

       $this->setTemplate('display.tpl');

     }

}

?>

 

I WANT TO DISPLAY MY tpl FILE INSIDE THIS NEW TAB.but,it show some error like

 

 

Oops, something went wrong.

Try to refresh this page or feel free to contact us if the problem persists.

 

 

 

ANYONE PLZ HELP ME

[vekia]

hello

 

and when you open controller url in browser as other urls, does it  work then?

[new_12]

i didnt get u...i want to open tpl file in new tab.that all i want..

[new_12]

yes..when i echo some msg inside this controller it will display in browser..when i use tpl file it show some kind of error as i mentioned above

[new_12]

kk....

any solutions for this prb?

[skechav]

kk....

any solutions for this prb?

Hello new_12,

 

Nice try to implement  your code..But If I didn't got it the wrong way you want a window that opens on a new browsers' tab which will contain an invoice inside..Why should you bother to open it on a new browsers tab really? I respect the fact that you want to implement it your way not matter what..but consider that (As Vekia said) popup windows and new tabs may be very annoying for people using mobile devices such as smart phones and tablets (especially those running with small screen resolutions and sizes..

 

In case I got it wrong (its too late and I m feeling sleepy) and you want to display a size chart on products page, I propose using a quite simple way to implement it. Finally, you will have a size chart button in a tabed row on products page which opens on a fancybox.

 

If you want to achieve it first take a backup of your tpl file.

 

Then follow Vekias steps on this site in order to have the tabs on your products page :

 

http://mypresta.eu/en/art/prestashop-16/product-tabs.html

 

Then create a new CMS page from your admins Backoffice which will contain your size charts.Format it as you like and when you finish it go to your products.tpl file again and find the  code shown below, inside your products.tpl file

<div id="more_info_block" class="clear">
    <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
        {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
        {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
        {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
        {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
        {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}

and exactly after the last line and BEFORE the {$HOOK_PRODUCT_TAB} line paste the follow code :

{if $product->id_category_default == '23' || $product->id_category_default == '15' || $product->id_category_default == '16'}	
		{if $lang_iso=='de'}  <li> <a href="{$base_dir}content/6-odigos-megethon?content_only=1&TB_iframe=true&width=700&height=470&thickbox=true" class="iframe"> Größe </a></li>
		{else $lang_iso=='en'}<li> <a href="{$base_dir}content/6-odigos-megethon?content_only=1&TB_iframe=true&width=700&height=470&thickbox=true" class="iframe">Size chart</a></li>
		{/if}
{/if}

you can remove the {if $product ->id_category_default == '23' || $pro...... {/if}  routine line if you don't want to filter the buttons appearance based on the choosen category  (23 or 15  or 16 etc )

 

Anyway, I hope this will help you or someone else in here

 

I wish you good luck!

 

 

PS : don't forget to change the content/6-odigos-megethon part above with the link to your cms sizechart page

 

final result :

Edited October 14, 2014 by skechav (see edit history)

[kokosmin]

Where in product.tpl should I insert the code?

 

You say something about literal tags, found them at line 120, but that's incomplete information.

 

PS 1.6

$( document ).ready(function() {
$(".iframe").fancybox({
autoSize: false,
autoDimensions: false,
width: 630,
height: 425,
fitToView: false,
padding: 0,
title: this.title,
href: $(this).attr('href'),
type: 'iframe'
});});

Edited October 16, 2014 by kokosmin (see edit history)

[vekia]

you have to create script with code you mentioned:

<script>
{literal}
HERE
{/literal}
</script>

[kokosmin]

Thank you, that works.

 

I set this up for images. I see 3 settings for auto-size, but puting them all to „true” doesn't wrap the fancybox near the image.

 

Pic attached.

And link

http://fabricadetricouri.ro/2015/tricouri/8-tricou-heavy-new-bumbac-200-gmp.html

[skechav]

Thank you, that works.

 

I set this up for images. I see 3 settings for auto-size, but puting them all to „true” doesn't wrap the fancybox near the image.

 

Pic attached.

And link

http://fabricadetricouri.ro/2015/tricouri/8-tricou-heavy-new-bumbac-200-gmp.html

Kokosmin,

 

while i was writting this post as I see that you finally corrected your javascript code. Your code didnt have width and height set before. Now I see it is working fine.

[skechav]

Kokosmin,

 

while i was writting this post as I see that you finally corrected your javascript code. Your code didnt have width and height set before. Now I see it is working fine.

But with settings set to true and without using a new CMS page to keep your sizechart inside...check your page for a minute  with Chrome browser...

[kokosmin]

But with settings set to true and without using a new CMS page to keep your sizechart inside...check your page for a minute  with Chrome browser...

Oh, snap. After a few refresh it appeared..

 

The message is

Resource interpreted as Document but transferred with MIME type image/png: "http://fabricadetricouri.ro/2015/img/cms/137.png

 

I hope this resource would help me

http://stackoverflow.com/questions/13985003/resource-interpreted-as-document-but-transferred-with-mime-type-image-jpeg

 

That is, adding   "type": "image" in the code.

[kokosmin]

Sorry, I dont't get what you are hinting at. I have no programming experience, just trial and error 

 

And I don't know to test   - without using a new CMS page -

[Bilegt]

where you've got these sizes defined? cms page? maye on image?

it will be the same for all products? or different for certain of them?

Hey Vekia, I have chart for CMS as well as on my sizechart.tpl file. I actually want chart for certain pages such as clothes not for accessories. do you have any solution for that?

[vekia]

you can add there if condition

{if $smarty.get.id_cms==4}
code here
{/if}

[Bilegt]

 

you can add there if condition

{if $smarty.get.id_cms==4}
code here
{/if}

Thank you for your suggestion Vekia

 

I added this onto my code

{if $product->id_category_default ==12 }
CODE
{/if}

I opened my phpadmin and looked into product table , then found out that id_category_default applied on certain products.

[nawaz@masthmysore]

@vekia

 

thanks dude