Working on my product pages
The new site is coming together with a lot of help from other people I think it is on the right track and I am am learning a lot about PHP. :) I have a template for the product pages and was wondering what people think of it, the popups aren't finished but the main idea is there.
There way I did the popups is to add the code
< href="javascript:roastPopup();">more info< /a>
into the product description via the osC admin where ever you need it on the page. Then in product_info.php right above < /head> add;
< type="text/javascript">
function roastPopup(){
aWindow = window.open("http://www.beancoffeeshop.com/2.php", "t_win","toolbar=no,width=450,height=450,status=no, scrollbars=no,resize=no,menubar=no");
}
< /script>
You can change the URL to suit your needs and also the height, width, etc. If you need a second popup then you just change the "roastPopup" name and the URL and add a second function.
Any input on the page would be appreciated before I redo all of them.
posted by JavaRoasters at 9:54 a.m.
18 Comments:
Peter, it is possible to make a "generic" popup window function so that it can be used on any page of the site, and load any target url in any size target box you specify.
Try this out:
<script language="javascript" type="text/javascript">
<!--
var open_window = false;
var new_window = null;
function openwindow(url,width,height,resizable,scrollbars,posx,posy)
{
if(posx==null) posx = 20;
if(posy==null) posy = 20;
now = new Date();
new_window=window.open(url, now.getHours()+now.getMinutes()+now.getSeconds(), 'width='+width+',height='+height+',resizable='+resizable+',scrollbars='+scrollbars+',screenY='+posy+',screenX='+posx+',top='+posy+',left='+posx);
//if(navigator.appName=='Netscape')
//if(navigator.appVersion.substring(0,1)>='3')
//new_window.focus();
//if(navigator.appName=='Microsoft Internet Explorer')
//if(navigator.appVersion.indexOf('MSIE 5') != -1)
//new_window.focus();
try {
new_window.focus();
} catch(e) {}
}
//-->
</script>
What this does is let you specify the (url, width, height, resizable, scrollbars, posx, posy) in the link, so that you can use the same class for any popup window, including popup images or any filetype you want. It compensates for browser behavour differences in size also. The var open_window/var new_window and the try/catch block can be omitted- what these do is attempt to auto-focus the new popup window.
Your links would then look like this:
<a href="javascript:openwindow('/<whatever page you want>.php', 370, 300, 1, 1)">link text</a>
This is a standard php page opening in a 370 wide x 300 tall window that is resizable with scrollbars if needed. Note that the posx and posy are not stated- the function says if these are not stated then it will be 20x and 20y off the top left corner of the screen, which is a comfortable location for it to pop up.
I know its more info to put in a link, but I think the time savings of using one popup function instead of different ones for each popup speak for themselves.
3:42 p.m.
Alright, this thing sucks at posting code. You would not believe the pain in the ass it is to post some JS in a blogger comment :P
Check it out here, I put it in a simple webpage for you to read:
Generic JS Popup function
3:46 p.m.
Ooh, check the linked page- The browser compensation part is removed because its degraded and does not work now :)
3:52 p.m.
Hi Chance,
I had problems posting code to the main page, I added a space after the < and it seems to accept it then.
I had something like that but it broke me XHTML validation and so I changed it. Mine used an image instead of text for the link.
My PHP skills mostly revolve around Emmett and Google. :( I will give yours a try, what did you think of the page layout?
Peter
6:25 a.m.
Hi Chance,
Your way keeps my XHTML validation also. I don't know where I went wrong the last time I tried that. I just changed 1 of the links and it works perfectly.
placed into your js functions file on your site
What file are you referring to here? I just put it on the product_info.php page for now.
9:10 a.m.
/includes/general.js is the main javascript include for the entire site. If I remember correctly, its called in application_top.php or header.php on every single page on the site.
In theory, you could slap the script in there and make popups on any page of the site you wanted.
Two comments on your product info page:
1. The style of the product options (the dropdown) and the "product specifications" with the stars (stars!) and available grinds, etc. are very similar. I could see where it might confuse a buyer making them think they need to select something in the specifications area- you may want to do something- a hr, a border, etc, to make a distinction between the 4 specifications and the product option below.
2. On the converted popup, it looks like you did a find and replace on "br" to "br /" to make your pages xhtml valid, and as a result it made words like "brew" into "br /ew". You might want to change the way you do find and replace operations to include the entire tag, eg. "find <br> and replace with <br />" to avoid that problem in the future :)
11:13 a.m.
I think the product page design is almost finished, just have to change the "stars" to "coffee beans" before Chance has an anxiety attack. I think the layout is good as it is balanced thanks to some suggestions from Yesudo, I think it is informative with help from Chance's popup code, I think the SEO is great also thanks to Jack. It is also XHTML valid which is good also. I still have to put a quantity box on the right hand side of the page and get rid of the popup for the image.
http://www.beancoffeeshop.com/aztec-blend-p-32.html
8:51 a.m.
I think it looks great Peter- Good work.
Of course there is still one thing...
1:54 p.m.
Thanks Chance,
I am happy with the way it is turning out. :)
Emmett is working on the coffee bean images to replace the stars.
3:30 p.m.
Great post and a very important point in blogging success (whether a business or pro-blogger). Too often bloggers miss the little, consistency things that can really build a super, duper audience over time :-)
1:11 a.m.
I really enjoy reading your blog.The keyword sniping links are awesome.Keep it up.Thanks for sharing with us. Keep blogging.
4:29 a.m.
its nice to read a useful article for beginner like me. Some of points from this article are very helpful for me as I haven’t considered them yet. Keep blogging.
8:20 a.m.
Congrats Peter.... You have done a fantastic job. It really helped me a lot in my website. thanks for sharing such an innovative and interesting post with us. Keep blogging.
1:07 a.m.
Thanks for an insightful post. These tips are really helpful. Again thanks for sharing your knowledge with us.
8:33 a.m.
Its sounds really excellent. I agree with the majority of it, it seems to make sense. Great! Thanks for sharing your ideas for a successful blogging.:)
3:21 a.m.
Yes this code really work...Its helped me a lot in my website and this is a wonderful topic to share...Thanks peter..!!
2:27 a.m.
woww.......
they are really beautifull
thanx buddy....
i got what i need..
6:12 a.m.
Excellent post. You give great help. Much thanks for your time helping others.
2:38 a.m.
Post a Comment
<< Home