Running a store through Microsoft Office Live?
Hello, I have a Microsoft Office Live Essentials account and I am trying to figure out the best way to run an online store.
Currently the way I am trying to make my store is by adding 1 page for every product, and then constantly trying to keep my price updated everywhere on my website which is turning into a nightmare. For one product everytime I update the price I have to update it on its page and paypal button, and every where else I reference to the product.
So if I have 4 products on my webpage thats four extra pages to manage and since I need to update the price every week that would be around 20 places I have to change, and they would not all be the same number. So as you can see this isn't a very effective way to try and run a competitive online store.
How I'd like to do it is if there is some way I can use data modules or something similar, so that I can update the price in one place in a database and then everywhere else like on a product showcase or similar just references to the one entry in the product database and updates it automatically. Also I'd like to make it so I can have one skeleton product page and then use data modules to load in all the product data to fill in one product page that can represent countless and fully updated products.
If you have any idea how to make this work using Live Essentials please help me. If it can't be done using Office Live then what are my other options?
Thanks,
Brandon Kite
Hi Brandonkite,
There are a few options you may explore to solve this problem. Some are easier, some are harder.
A relatively easy solution is to create a linked javascript file and store it in your documents library of your web site. Put the data about the products into an object or an array in the javascript file. You should also create funtions to write the HTML for your product listings and paypal links using document.write() commands. Then, on each page that you are showing this information, you will need to add an HTML module from the Modules dropdown in page editor. In the HTML, you need to link to the script file (http://<yoursite>/documents/products.aspx) and also include a small script block to execute the functions that write out the HTML.
Another perhaps more complex way of managing your products list is to create a new list in a Business Applicaton that contains the product data and the HTML for the paypal links. You can then use the data sharing feature to publish that data onto multiple pages. The nice thing is you can manage all of your data in a database-like way in the Business Application list. However, the data sharing feature does not have a lot of layout flexibilty yet and is somewhat difficult to configure. Here's a video I did a few months ago about it.
Given the scenario you described, personally, I'd probably do the low-fi javascript file route. NOTE!!! Almost forgot to mention this... Office Live has a caching mechanism for files with the extension ".js". You should probably consider naming your javascript files with an extension other than .js, or else when you save changes, our proxies will hold onto the old copy for I think 24 hours and you won't see your changes immediately. See this discussion for more ways to work-around our javascript caching mechanism.
[Edit Aug, 4, 2007]
When I use extension .jsx, it crashes Internet Explorer. Nothing shows up when I use this code
<SCRIPT LANGUAGE="JavaScript" SRC="http://geektronic.net/documents/Catalog.js">
document.write(E2140BOX[3])
</SCRIPT>
Nothing even shows up when I put in:
document.write("Hello World").
[Original post]
Thank you for your input. I just finished learning HTML and Javascript so now I will try this out and let you know how it works out.
One other thing, how would I go about only having to use one product page, (eg. http://mypage.net/product.aspx/) and just make that page show any product depending on what link connected to that page? So for example in the product catalog someone clicks on any thumbnail and it takes them to the product.aspx page and shows the info for the product they clicked on.
Your response would be greatly appreciated!
Brandon Kite.
Hi Brandon,
For the first issue, you can't have a script tag that has both a SRC attribute and then also script content within the script tags. You can only do one or the other. You should probably do something like this:
<script language='javascript' src="http....catalog.jsx"></script>
<script language='javascript>
drawCatalog("productID");
</script>
The second question you ask about making a product page show only a single product would require you to architect your script to take parameters. There are a variety of ways you could do this with javascript such as having global variables in script on every page that the catalog functions inspect before writing out the HTML. Another way is to create a function in the common catalog.js file that accepts a parameter from each page that calls it. Depending on the value of the param, it knows what to write out to the page. In the example above, the drawCatalog() function takes some sort of ID for the product, and that drawCatalog function would contain the document.write calls, rather than putting them right into the page.
Hope this helps.
Ok so I modified the script like this:
<SCRIPT LANGUAGE="JavaScript" SRC="http://geektronic.net/documents/Catalog.jsx"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
document.write(E2140BOX[3])
</SCRIPT>
It works now, but only in Opera browser and in Internet Explorer it crashes 
Brandon Kite
You should have a ";" after the document.write() command.
Other than that, I don't have a lot of ideas about the IE crash. My only other suggestion would be rather than passing the array as a parameter to document.write, you could try passing just a plain string such as document.write("hello world"); See if that still crashes. If it does, it would seem that IE does not like it when you pass in an array to document.write(). Try extracting the string to a variable first and pass the variable.
Ok I know it's not a script problem now because when I test my script offline using external script calling it works in Internet Explorer just fine.
I think it may have something to do with microsoft office live, is there some kind of trick I don't know about? I just don't understand why the external script handling in combination with IE and MS Office Live causes instability in IE. It works fine in other browsers but in IE an error occurs on the page when I try external scripts in MS Office Live. But when testing, not on MS Office Live it works perfectly.
Plain javascript strings work fine like document.write("Hello World") but for some reason I can't use the external scripts. I even tried testing a file call test.js that only has:
var test="Test"
and it still crashes so I don't think its an array problem.
When I do try it locally on my computer however it asks me to allow the website access, perhaps there is some security issue when trying to use an external script on the MS Office Live server and with IE.
But I will continue to try new stuff.
-edit
I tried the exact same code I've been using on a friends webserver and it worked flawless in IE. What is the deal with MS Office Live?
Brandon, can you please explain what you mean by 'external script' and provide an example? That is a term I am unfamiliar with.
http://www.tizag.com/javascriptT/javascriptexternal.php
OK, I see, same thing we've been talking about.
Honestly, I'm having a bit of a hard time following what you are doing. You have a web page that attempts to reference a JS file, and both the page and the script file are on the same Office Live domain. And at some point when loading or working with that page, the browser is crashing.
Can you boil the issue down to the most simple script and post it here, both the web page snippet and the full contents of the js file? I can try to repro on my account.
Web code snippet (Tested and seen only to work in Opera):
<SCRIPT LANGUAGE="JavaScript" SRC="http://yoursite/documents/Catalog.jsx"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
document.write(E2140BOX[3])
</SCRIPT>
Catalog.jsx file:
var E2140BOX=new Array;
E2140BOX[0]="Intel Dual-Core Processor E2140 Retail";
E2140BOX[1]=" $76.85";
E2140BOX[2]="<ul><li><b>Dual Core</b></li> <li><b>Enhanced Halt State (C1E)</b></li> <li><b>Enhanced Intel Speedstep Technology</b></li> <li><b>Execute Disable Bit 1</b></li> <li><b>Intel EM64T 2</b></li> <li><b>Intel Thermal Monitor 2</b></li></ul>";
E2140BOX[3]="CPU Speed: 1.60<br /> <br />GHZ Bus Speed: 800 MHZ<br /> <br>L2 Cache Size: 1 MB<br /> <br />Package Type: LGA775<br /> <br />Manufacturing Technology: 65 nm<br /> <br />Thermal Design Power: 65W<br />"
note: I've also tried just a test .js file without an array and it did not work either.
Brandon,
I am a horrible, horrible person. You are right, I have led you right into a bug in IE with my suggestions.
The Office Live HTML Module is written out dynamically to the browser. Because of the way IE handles (or does not handle) <SCRIPT> tags with external SRC attributes that are dynamically written to the page, the array is not being created by the time you try to document.write it out. When I tried your code, my browser (which is hooked up w/Visual Studio 05 script debugger) throws an exception saying basically that the array doesn't exist. Sounds like you get a slightly different behavior, but it's probably the same problem.
There is a work-around to this issue in IE by adding the "defer" attribute to the SCRIPT tag, although that also requires you to make some other changes to the way the data is written out using something like the onload event for the document. I made those changes and got it working in IE using some of the other strategies I mentioned earlier in this dicussion, HOWEVER, now it doesn't work in Firefox. 
I think there may be some way to hack it to get it to work in Firefox also, but I'm wondering whether the external JS file implementation has reached the point of diminishing returns... special case browser code, timers, etc. etc. It's getting pretty ugly.
The other alternative I did not mention earlier was to put the Store data in an XML file in your Documents directory, and then use the XMLHttpRequest object to obtain, parse and display the data on your web page dynamically. I did not suggest this previously because Firefox/Opera are slightly different from IE. Also, I have not tested this, so can't guarantee this will work either. You may want to try this out. Do a search on "XMLHttpRequest" to learn more and maybe try out a simple example to see if it works.
I may tinker a little more with the external javascript concept, but I'm not super hopeful at this point.
Chris
Alright well it sounds like Javascript is old fashion anyways. What about good ol' php? I know that should be compatible with all the browsers right?
Anyways it won't take me long to learn XML.
edit-
W3 schools has a way to make it work for firefox,opera safari, and IE.
edit-
OK so I got my page to load in an external XML file sucessfully in both Opera and IE.
In technology, what's old is new is frequently an accurate statement. Javascript is usually an old reliable way to import logic and data from remote locations, and is currently being used in emerging client-side solutions such as mashups and JSON. For example, it has been adopted as the means to distribute the web APIs for Microsoft Virtual Earth SDK. Pretty cool stuff, so don't write it off just because it's been around. External JS files get around a lot of the cross-domain warnings you generally get in browsers, which is really nice.
Glad to hear the XML route is a little more successful for you.
PHP is a server side technology, and Office Live is not supporting it on our servers at this time. My understanding is that it is all executed on the server, and you as the author are responsible for writing the HTML that the PHP processing dishes out to the browser. So even with PHP, it is still up to the author/coder to make sure it is cross-browser compliant.
Alright so after looking through some of the XML tutorials, I'm having a difficult time trying to figure out how I would use select information from a large XML file as a database to
point to the specs, price and name etc. for particular products out of a whole bunch of data inside the data base besides knowing the exact XML tag number.
sheesh I didn't know setting up a store would take all this work. Hey isn't there some kind of store manager you guys are working on? When will it come out? I'm wondering if I should just wait for you guys to implement that feature instead of trying to figure all this out.
