Building a Car Sales website with Form2Content

Building a Car Sales website with Form2Content

• 1.
  dsd business internet Buildinga carsales
 website with 
 Form2Content René Kreijveld ! @renekreijveld
 
 J and Beyond 2015, may 29th 2015 1
• 2.
  dsd business internet RenéKreijveld • Webdeveloper at dsd business internet
 php | html | css | mysql | javascript | jquery | linux • Social media:
 ! https://twitter.com/renekreijveld
 " https://nl-nl.facebook.com/rene.kreijveld
 # https://instagram.com/renekreijveld
 http://www.slideshare.net/renekreijveld
 $ https://github.com/renekreijveld
 % https://www.linkedin.com/in/renekreijveld • Personal: play drums, music, reading
 movies, huntingdog training with Mila, my Bracco Italiano 2
• 3.
  dsd business internet3 Mila
• 4.
  dsd business internet Form2Content •Content Construction Kit (CCK) • Many field types • Data collection through data entry forms • Store collected data with a predefined layout into a Joomla article • Data can be altered later, the Joomla article is then refreshed • Result: very structured and consistent Joomla articles without HTML knowledge for the editor 4
• 5.
  dsd business internet Contenttypes • Define the type of content • Contain default settings for the Joomla article
 (title/category/metadata etc.) • Define the fields in the content type • Example content types:
 
 Blogpost, News article, Event description; Car, Client profile 5
• 6.
  dsd business internet Fieldtypes (bold = pro version) • Checkbox • Database lookup (single) • Database lookup (multi) • Date picker • Display list • E-mail • File upload • Geo coder • Hyperlink 6 • IFrame • Image • Image gallery • Info text • Multiselect (checkbox) • WYSIWYG editor • Textarea • Textfield • Select list
• 7.
  dsd business internet Templates •There are three kinds of templates: • Template for the article intro text • Template for the article main text • Template for the data entry form • Template language: Smarty, combined with HTML, CSS, Javascript 7
• 8.
  dsd business internet Smarty •Template engine for PHP • {if} … {else} … {/if} • {foreach} … {/foreach} • {php} … {/php} • Date/time functions • Variables • And more, see: http://www.smarty.net 8
• 9.
  dsd business internet www.form2content.com •2 versions: LITE (free) and PRO (paid) • PRO: more options, bigger content types, more field types
 
 http://www.form2content.com/faqs/f2c-pro-lite- comparison-chart • Extra extensions: f2c search, submit mailer, 
 edit article button, related articles plugin & more • € 35,- 6 months / € 50,- 12 months 9
• 10.
  dsd business internet10
• 11.
  dsd business internet www.form2content.com •Couponcode:
 
 J!ANDBEYOND2015
 • 25% discount for all extensions • Valid until july 24th 11
• 12.
  dsd business internet Carsaleswebsite • Every car is described in one article • Articles go into category “For Sale” or “Sold” • Properties: brand, type, registration id, transmission, fuel, year, milage, price, description, pictures • Frontend contentmanagement with Form2Content • Three additional extensions:
 Akeeba Backup, JCE, NoNumber Modals 12
• 13.
  dsd business internet Categorysetup 13
• 14.
  dsd business internet Contenttype: Car 14
• 15.
  dsd business internet Addfields 15 • brand - text • type - text • transmission - single select list (dropdown) • fuel - single select list (dropdown) • year - single select list (dropdown) • milage - text • price - text
• 16.
  dsd business internet Addfields 16 • description - multi-line text (editor) • images - image gallery
• 17.
  dsd business internet Contenttype fields 17
• 18.
  dsd business internet Menuitem Cars for Sale 18
• 19.
  dsd business internet Menuitem Edit cars 19
• 20.
  dsd business internet Democar entry • http://carsales1.demo/ 20
• 21.
  dsd business internet Contenttemplates • Default intro template is for the intro text • Default main template is for the main text • Great tool to find all fields in the template • Templates are stored in:
 
 /media/com_form2content/templates
 • Helpful: template cheat sheet 21
• 22.
  dsd business internet Defaultintro template 22
• 23.
  dsd business internet Desiredlayout 23
• 24.
  dsd business internet Templatebasics • {$JOOMLA_TITLE} - Article title • {$JOOMLA_ARTICLE_LINK} - Link to article • {$JOOMLA_CATEGORY_ID} - Category ID article • {ldelim} - Left delimiter { (plugins) • {rdelim} - Right delimiter } • Select list/Radio buttons
 {$FIELDNAME} - Chosen value
 {$FIELDNAME_TEXT} - Displayed value 24
• 25.
  dsd business internet Templatebasics • Image gallery:
 {$FIELDNAME} - Pad naar folder met foto’s
 {$FIELDNAME_PATH_ABSOLUTE}
 {$FIELDNAME_PATH_RELATIVE}
 {$FIELDNAME_URL_ABSOLUTE}
 {$FIELDNAME_URL_RELATIVE} • {$FIELDNAME_URL_ABSOLUTE}thumbs/ {$FIELDNAME_IMAGES[0].FILENAME} - 
 First image 25
• 26.
  dsd business internet Templatebasics • {foreach from=$FIELDNAME_IMAGES item=GALLERYIMAGE}
 <a href="{$FIELDNAME_URL_ABSOLUTE} {$GALLERYIMAGE.FILENAME}">
 <img src="{$FIELDNAME_URL_ABSOLUTE} thumbs/{$GALLERYIMAGE.FILENAME}">
 </a>&nbsp;
 {/foreach} • Template cheat sheet 26
• 27.
  dsd business internet27 Introtemplate
• 28.
  dsd business internet28 Maintemplate
• 29.
  dsd business internet Applynew template • Modify content type • Modify the already entered content item
 
 Show me 29
• 30.
  dsd business internet30 Detailsbutton
• 31.
  dsd business internet Detailsbutton • The View details button is not needed in full article view. • This can be fixed by adding a small css snippet:
 
 • This snippet is added to the intro template. • We then need to refresh the articles. • Modify template
 31
• 32.
  dsd business internet Puttingit all together • Multiple cars • Added database lookup for Brands • Added the Form2Content search • Added Edit article button plugin
 
 http://carsales3.demo 32
• 33.
  dsd business internet Finalthoughts … • With F2C you can accomplish very structured and consistent frontend article editing. • Modify a template and very easy update all your articles. • Frontend: you will need Mootools. • You can create templates for the forms. Combined with jQuery you can create very powerful dynamic forms. • You have seen just the basics :-) 33
• 34.
  dsd business internet Questions? 34