Building a Car Sales website with Form2Content
1 like754 views
This document discusses using Form2Content (F2C) to build a car sales website. F2C allows defining content types and fields to create structured articles without HTML knowledge. It summarizes setting up a cars content type with fields for brand, type, etc. and uploading images. Templates are used to display the field values and images in articles. The document demonstrates building a car sales site using F2C with features like search, editing articles, and database lookups.
![dsd business internet
Template basics
• 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](https://image.slidesharecdn.com/form2contentjab15-150529131509-lva1-app6892/85/Building-a-Car-Sales-website-with-Form2Content-25-320.jpg)
Building a Car Sales website with Form2Content
- 1. dsd business internet Building a 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
- 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 Content types • 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 Field types (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
- 11. dsd business internet www.form2content.com • Couponcode: J!ANDBEYOND2015 • 25% discount for all extensions • Valid until july 24th 11
- 12. dsd business internet Carsales website • 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 Category setup 13
- 14. dsd business internet Content type: Car 14
- 15. dsd business internet Add fields 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 Add fields 16 • description - multi-line text (editor) • images - image gallery
- 17. dsd business internet Content type fields 17
- 18. dsd business internet Menu item Cars for Sale 18
- 19. dsd business internet Menu item Edit cars 19
- 20. dsd business internet Demo car entry • http://carsales1.demo/ 20
- 21. dsd business internet Content templates • 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 Default intro template 22
- 23. dsd business internet Desired layout 23
- 24. dsd business internet Template basics • {$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 Template basics • 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 Template basics • {foreach from=$FIELDNAME_IMAGES item=GALLERYIMAGE} <a href="{$FIELDNAME_URL_ABSOLUTE} {$GALLERYIMAGE.FILENAME}"> <img src="{$FIELDNAME_URL_ABSOLUTE} thumbs/{$GALLERYIMAGE.FILENAME}"> </a> {/foreach} • Template cheat sheet 26
- 27. dsd business internet27 Intro template
- 28. dsd business internet28 Main template
- 29. dsd business internet Apply new template • Modify content type • Modify the already entered content item Show me 29
- 30. dsd business internet30 Details button
- 31. dsd business internet Details button • 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 Putting it 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 Final thoughts … • 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