|
A Beginners Guide as to how to simly add .PDF documents and videos to your Magento detailed product page and CMS page:
HOW TO ADD .PDF DOCUMENTS
1) Where to upload the .PDF document
By default, all uploaded product images are stored in the /public_html/media/catalog/product/ folder. A logic place to store the pdf documents, would then be to create a pdf folder under the product folder. If you choose to add a folder for each product brand, the ‘any_pdf_document.pdf’ can be stored here:
http://mydomain.com:2222/CMD_FILE_MANAGER/domains/mydomain.com/public_html/media/catalog/product/pdf/productbrand_1/any_pdf_document.pdf
2) How to find the url to a uploaded .PDF document
If you want to link to the document from any web page, the url reference will then be: “http://www.mydomain.com/public_html/media/catalog/product/pdf/productbrand_1/any_pdf_document.pdf”
I prefer to sort the documents by product (brand), to make it more structured.
Please note that you can store your Documents in any folder in the public_html area, for example you might consider to make your own pdf and video folders direct under the public_html folder, like this:
http://mydomain.com:2222/CMD_FILE_MANAGER/domains/mydomain.com/public_html/pdf/
To link to the same pdf document, use this url: http://mydomain.com/public_html/pdf/
http://mydomain.com:2222/CMD_FILE_MANAGER/domains/mydomain.com/public_html/video/
And to link to the video, use this url: http://mydomain.com/public_html/video/
If you prefer to sort your documents and videos by product brand, it will look like this:
http://mydomain.com:2222/CMD_FILE_MANAGER/domains/mydomain.com/public_html/pdf/brand/
To link to the pdf document, use this url: http://mydomain.com/public_html/pdf/brand/
That will look like this in the url address bar: http://mydomain.com/pdf/brand/
http://mydomain.com:2222/CMD_FILE_MANAGER/domains/mydomain.com/public_html/video/brand/
And to link to the video, use this url: http://mydomain.com/public_html/video/brand/
That will look like this in the url address bar: http://mydomain.com/video/brand/
3. How to link to a .PDF document within Magento
To link to my_document.pdf on the detailed product page or on a cms page, you may use this code:
<h4>Downloads / Support / Product Videos:</h4> <a href="http://www.mydomain.com/pdf/brand/my_document.pdf" target="_blank" title="Download Product User Manual” onMouseOver="window.status=’Product User Manual; return true” onMouseOut="window.status=’ ‘“><b>User Manual</b></a> (528 Kb) .pdf Adobe Reader document
If you add the code to your product under the ‘Product Information, Decriptions, Short Decription’, you have now added a link to a pdf product document (that opens in its own window) on the detailed product page. With Modern Theme Layout installed, the link will appear below the ADD TO CART button (please see the enclosed screen photo).
You can also easily add a CMS page that display a collection of Document links, by creating a new ‘Product Documents Title’ in the CMS section, under the ‘Manage Pages’.
HOW TO ADD VIDEOS
A) WHERE TO STORE THE VIDEOS
In order not to slow down my own web site, I have uploaded my videos to google video, and store them as unlisted. (you can open a free account here: http://www.video.google.com).
The Upload area state that they accept AVI, MPEG, Quicktime, Real and Windows Media. However, also .fvi flash video seems to work great.
Any other video hosting service that will take your video format will probably work great.
B) HOW TO GET THE DOCID FROM GOOGLE
After you have uploaded the video, you should replay the video to check that it has been uploaded properly and is ready.
As you replay the video, you can obtain the embed video, that will look similar to this:
<embed id="VideoPlayback" style="width:400px;height:326px" allowFullScreen="true" flashvars="fs=true" src="http://video.google.com/googleplayer.swf?docid=-4102452462673192857&hl;=no" type="application/x-shockwave-flash"> </embed>
You will need the docid (in this example: -4102452462673192857) for your our own code below. Make sure you also use the -sign if your id shows that:
C) HOW TO LINK TO THE CMS PAGE THAT WILL DOWNLOAD THE VIDEO
This time, I am linking to a CMS page from the detailed product page.
This code will do the job:
<a href="http://www.mydomain.com/product1-video" target="_blank" title="Product Video | Product Name | More explanations” onMouseOver="window.status=’Product Video | Product Name | More explanations’; return true” onMouseOut="window.status=’ ‘“><b>Product Name - More explanations</b></a> (0,6 Mb) Flash Video format
D) DOWNLOADING THE VIDEO FROM THE CMS SECTION
In the CMS, General Information, I add a new page for each video. Each CMS page get a unique url identifier, such as my product1-video.
Under the ‘Content’ field, add this code to open up a new window and allow for playback of the flash video:
<body style="margin: 0px; padding: 0px">
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-4102452462673192857&hl;=no" flashvars="autoPlay=true"> </embed>
</body>
</html>
Under the ‘Custom Design’, I have chosen 1-column Layout. The playback window for the video now looks like the main web window (see the attached screen photo).
I am sure this can be done both better and easier. Hopefully some programmers can comment.
And still, I have no idea how to make my own tab on the detailed product page, besides the ‘Product Description | We Also Recommend | Product Tags | Additional Information’ tabs , that in my case I would name ‘Downloads / Support / Product Video.
Image Attachments
 
Click thumbnail to see full-size image
|
