---- dataentry integration ----
type                           : integration #do not change this line
supports-foxycart-version-from :  #Minimum required FoxyCart version for this to work
supports-foxycart-version-to   :  #Last FoxyCart version that supports this (leave empty if unknown)
systems                        : HiFi #the system(s) that the integration is for, separated with commas if more than one
name                           : HiFi Tutorial #the name of the integration
description                    : A tutorial for integrating FoxyCart with Hifi sites
tags                           : hifi, cms #tags, separated by commas. don't include the "system" here.
date_dt                        : 2011-07-11 #the date in YYYY-MM-DD format
version                        :  #if you have a version for your code, enter it here
developer_url                  :  #if you'd like a link back to your site, stick it here
----
== hifi ======

<WRAP important round>
//**Please note:**//
The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please [[http://forum.foxycart.com/|post in our forum]], but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.
</WRAP>

===== About HiFi =====
[[http://www.gethifi.com/|HiFi]] is a ground-breaking content management platform. Design beautiful websites with web standards and zero design constraints.

===== Setting up Store page and custom fields =====
{{ :integration:custom_fields.jpg?500 }}

**Assumptions:**
  * We're going to assume that you know at least a little bit about HiFi. Please familiarize yourself with their [[http://docs.gethifi.com/|Documentation]] before continuing.

  - Create a new page using the "Blog" option (in this tutorial we will call it "Store")
  - Go to Developer/Custom Fields to create a new fieldset called "Product Settings"
  - Click on "Edit" for "Product Settings" and turn "Applies to self" to "Off" then click "Save Fieldset"
  - Create the following field:<code>Field Type:  Text
Field Label:  Price</code> Remember, you can add as many variables as you would like (ie: code, color, size)    
  - Under "Related Pages", choose "Store", and then click "Save Fieldset"

===== Setting up Store Overview Template =====
  - Go to Developer > Themes > DESIRED THEME
  - Add a folder called "url" in the "feed" folder
  - Add a new template file called "store.html" in the "url" folder
  - Add the following code to the "store.html" template file:
<code html>
<!--EXTEND YOUR TEMPLATE FILE-->
{% extends "inside.html" %} 

<!--ADD CONTENT TO SPECIFIED BLOCK-->
{% block main %}

     <ul>
     {% for post in items %}
     
     <li>
     <a href="{{ post.url }}" title="{{ post.title }}">
     <img src="{{ post.media[0].url|imagesize({ width:200, height:200, crop:true }) }}"  alt="{{ post.title }}">
     <div>{{ post.title }}</div>
     </a>
     </li>

     {% endfor %}
     </ul>

{% endblock main %}</code>
This creates an unordered list of products by displaying product image and product name.  Each product is linked to product detail page.

===== Setting up Product Detail Template =====
  - Add a sub-folder called "url" under Page > Post
  - Add a new template file called "store.html" in the "url" folder
  - Add the following code to the "store.html" template file:
<code html>
<!--EXTEND YOUR TEMPLATE FILE-->
{% extends "detail.html" %} 

<!--ADD CONTENT TO SPECIFIED BLOCK-->
{% block main %}

     <!--PRODUCT IMAGE-->
     <img class="product_image" src="{{ this.media[0].url|imagesize({ width:190, height:190, crop:true }) }}"  alt="{{ this.title }}">     

     <!--PRODUCT NAME-->
     <h1 class="product_name">{{ this.title }}</h1>

     <!--PRODUCT PRICE-->
     <div class="product_price">${{ this.custom.product_settings.price }}</div>

     <!--PRODUCT CONTENT-->
     <div class="product_detail">{{ this.content }}</div>

     <!--ADD TO CART LINK-->
     <a href="https://YOURSTORE.foxycart.com/cart?name={{ this.title }}&price={{ this.custom.product_settings.price }}&category={% for cat in hifi.get({type: 'category', count: 1, orderBy: 'title'}) %}{{ cat.title }}{% endfor %}">Add To Cart</a>

{% endblock main %}</code>