Page 1 of 1

size chart popup window question ('solved' by workaround)

Posted: Wed Mar 13, 2013 7:47 pm
by max2tall
Hi, (using OC 1.5.4.1 & Shoppica 2)

I've made images for size charts & added a link in product description to have it popup on products page.

see e.g. http://www.babyplace.com.sg/ocs/index.p ... uct_id=118

click on 'size chart' & a new window appears ok.

My question is: how do I make the popup show more like a picture than a windows window... without all the browser stuff around it; like the images I see on many sites (but not the 'blanket' effect).

Especially the way the popup goes away when you click on the main page, rather than having to close the new window.

I am not a programmer; is there some way to do it from within the ckeditor?

Thanks :)

Re: size chart popup window question

Posted: Wed Mar 13, 2013 11:10 pm
by yiyinlah
Why don't you use this module instead?
http://www.opencart.com/index.php?route ... on_id=9594

It's easier & cleaner I guess ;)

Btw, I'm from SG too! Cheers!

(^_^)

Re: size chart popup window question

Posted: Thu Mar 14, 2013 11:11 am
by max2tall
Hi YY,

& tnx for the thought, but doesn't work in this case.

If you try the link given, you'll see it's quite a few changes to standard Sh2 & product tabs have been removed.

How's your OC shop working out? what's the site?

Cheers.

Re: size chart popup window question

Posted: Thu Mar 14, 2013 4:08 pm
by grgr
You'll need to put the colorbox code back in to the bottom of the product.tpl or footer.tpl

Code: Select all

$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
and then change the link in the ckeditor to <a class="colorbox" href=".....

Re: size chart popup window question

Posted: Thu Mar 14, 2013 5:33 pm
by max2tall
Hi & thanks grgr,

do I need to put those code lines inside div things?

I also don't know where in the footer to put, have attached an image of the last few lines of the footer.

also, the "... after href= , does that mean the link to the image file?

sorry for the dumb questions, but I really don't understand this stuff.

Re: size chart popup window question

Posted: Thu Mar 14, 2013 5:51 pm
by max2tall
hi again,

I tried pasting into the bottom of the footer & then looked to see where to change the link in ckeditor, but in all the tabs under edit link, I have no idea where to do it.

Re: size chart popup window question

Posted: Thu Mar 14, 2013 6:39 pm
by grgr
add to footer:

Code: Select all

<!-- end of FOOTER -->

<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script>

on the ckeditor, click on the 'Source' button

find your link, change from
<a title="show size chart" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=262,left=800,height=212,top=780'); return false;" href="http://www.babyplace.com.sg/ocs/image/d ... 01-009.png">
to
<a class="colorbox href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</a>

Re: size chart popup window question

Posted: Thu Mar 14, 2013 7:37 pm
by max2tall
thanks grgr,

I tried it,
but strange things happen to the simple line of code pasted in under source in ckeditor:

I copied & pasted the line you gave, but as soon as it's saved, it turns itself into:

<p><a class="colorbox data-cke-saved-href=" http:="" www.babyplace.com.sg="" ocs="" image="" data="" sizecharts="" BSL001-009.png"="" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</p>

& what was "size chart' as a link (when not showing source) became:
<a class="colorbox data-cke-saved-href=" http:="" www.babyplace.com.sg="" ocs="" image="" data="" sizecharts="" BSL001-009.png"="" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart

gratefut but confused.

Re: size chart popup window question

Posted: Thu Mar 14, 2013 8:28 pm
by grgr
missing a quote after colorbox:
<a class="colorbox" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</a>

Re: size chart popup window question

Posted: Thu Mar 14, 2013 9:04 pm
by max2tall
'misquoting' huh :)

So we have some progress, but it's coming up as a full new window now,
see http://www.babyplace.com.sg/ocs/index.p ... uct_id=118
your new version is below my hopefully soon to be deleted old version.
How do I make it a small borderless image positioned like my old version & go away all by itself when I click on the main page pls ?
Thanks for holding my hand on this grgr :)

Re: size chart popup window question

Posted: Fri Mar 15, 2013 1:06 am
by grgr
Can't see the script on the page, but anyway, you probably need to add the following to the header as well:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />

Re: size chart popup window question

Posted: Fri Mar 15, 2013 1:15 am
by yiyinlah
Hello dear,

I'm still in the midst of a 2013 revamp! Haha!
Wanna give the best to my customers before re-launching again..
I always set a time aside every year to revamp the webby ;)

Btw hun, another way to work around this is to add the size chart as a picture so customers can just click on the picture to see, instead of putting it in description? I mean this could be the last resort if things can't get working for you.

Cheers!

Re: size chart popup window question

Posted: Fri Mar 15, 2013 10:50 am
by max2tall
Hi grgr

still just makes a new page.

Here's the code added into header.tpl
in header.png

code added to header position - in header.png (10.36 KiB) Viewed 2168 times

here's the ckeditor source view:
descsource1.png

ckeditor source view - descsource1.png (37.24 KiB) Viewed 2168 times

I guess there needs to be some "left=800; etc " type stuff somewhere right? I've no idea how, I've looked around & just get confused.
hope you're still up for this.

@ yinyin: thanks, but no, doing that puts all the ugly tabs & stuff back in again that I took out.

Re: size chart popup window question

Posted: Fri Mar 15, 2013 11:34 am
by max2tall
update:

totally fedup & given up. What should be a simple thing requires ridiculous amount of programming.

Have taken your idea yinyin after all, by selecting 'images under preview' instead of in separate tab (didn't know I could do that before ;) the job gets done quickly & easily YAY & Thanks :)

& thanks for your efforts grgr :)

Re: size chart popup window question ('solved' by workaround

Posted: Sun Mar 17, 2013 1:10 am
by yiyinlah
Haha sweet! It's neat! (^_^)
And you're very much welcome! hehe.. Check your PM ;)