Saturday, March 23, 2013

Magento: How to add Download Link for Data Sheet PDFs to Product Page

Let's add a download link for arbitrary files (in this case, data sheets in PDF) to your products on Magento.
(This is relatively easy, so no need to buy an extension ...  )

To do this, we create a new attribute (Admin Panel, go to "Catalog->Attributes->Manage Attributes").

Create a new Attribute:

Attribute Code: pdf_download
Scope: Global
Catalog Input Type for Store Owner: Textfield
Default: <empty>
Apply To: (arbitrary, I chose "All Product Types")

Visible on Product View Page on Front-end: Yes
Used in Product Listing: Yes

Under "Mange Label / Options" enter "Data Sheet".

Save the new attribute.

Open "Catalog->Attributes->Manage Attribute Sets" and choose a set (I chose "Default").
Drag your new Attribute "pdf_download" from the right column into the General group and save.

Open a Product from your Catalog and hopefully you'll find the new attribute "Data Sheet".

Now, create a folder "files" in your Web Server's document root (e.g. var/www/files or apache/htdocs/files). Copy your data sheet pdf there:

  var/www/files/datasheet.pdf

We can now specify the link to our data sheet in the "Data Sheet" text field in Magento's backend:

  Data Sheet: <a href="http://localhost/files/datasheet.pdf"> Data Sheet </a>

Refresh Magento's Index and Cache and navigate to your product on the front page. You should now see a table titled "Additional Information" with the link to our data sheet.

This approach has two problems, however: If we move our shop to a different server, we would need to adjust the attribute for all our products with a downloadable data sheet. Further, we always have to speficy the full link which is tedious.

We can do better than that.
Let's mess with some Magento internals and modify "attributes.phtml".
(don't forget to make a backup of this file in case something goes wrong!)
Search for attributes.phtml, in my case it was
app/design/frontend/base/default/template/catalog/product/view/attributes.phtml

Search for this block at the end of the file:

and change it to:
That's it (for now & testing purposes). You can now replace the text for the attribute

   Data Sheet: <a href="http://localhost/files/datasheet.pdf"> Data Sheet </a>

with the much simpler

Data Sheet:  datasheet.pdf

Please test if that works. Now, let's get rid of the hard coded url (http://localhost). To do that, first put the pdfs in a subfolder of magento, i.e.

  var/www/magento/files/datasheet.pdf

Now change the line
into
You're done.

8 comments:

  1. Awesome!!! You have no idea how many websites and different things I tried before I got one that actually worked! You are D man!!! Thank You!!!!

    ReplyDelete
  2. ah cool, thanks! Glad I could help :-)
    I think there should even be a better way than to use the Store URL directly, something like

    helper ( ’ core / url ’) -> getCurrentUrl () ; ? >"

    But I have to admit, didn't test that yet ...

    - thomas

    ReplyDelete
  3. after pressing the download link on my product page, just forwarded to a dead link. I saved the pdf in my public folder and used that link in my product page. Since two days I tried endless configurations, but could not link to my pdf. Could you advice what to key in exactly after I know the directory path on my website host server.

    ReplyDelete
  4. How to add multiple links?
    This would be great!

    ReplyDelete
  5. That is cool, but I'm using magento 1.9.0.0 and rwd theme, it isn't having any effect.

    ReplyDelete
  6. I used your base code and adapted it to my needs. thx a lot it helped me
    tested it in magento 1.9.2

    ReplyDelete