Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Car Sales website with Form2Content

591 views

Published on

How to build a car sales website with frontend content management through Form2Content. Presentation for JandBeyond 2015

Published in: Internet
  • Be the first to comment

Building a Car Sales website with Form2Content

  1. 1. dsd business internet Building a carsales
 website with 
 Form2Content René Kreijveld ! @renekreijveld
 
 J and Beyond 2015, may 29th 2015 1
  2. 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. 3. dsd business internet3 Mila
  4. 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. 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. 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. 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. 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. 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. 10. dsd business internet10
  11. 11. dsd business internet www.form2content.com • Couponcode:
 
 J!ANDBEYOND2015
 • 25% discount for all extensions • Valid until july 24th 11
  12. 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. 13. dsd business internet Category setup 13
  14. 14. dsd business internet Content type: Car 14
  15. 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. 16. dsd business internet Add fields 16 • description - multi-line text (editor) • images - image gallery
  17. 17. dsd business internet Content type fields 17
  18. 18. dsd business internet Menu item Cars for Sale 18
  19. 19. dsd business internet Menu item Edit cars 19
  20. 20. dsd business internet Demo car entry • http://carsales1.demo/ 20
  21. 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. 22. dsd business internet Default intro template 22
  23. 23. dsd business internet Desired layout 23
  24. 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. 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. 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>&nbsp;
 {/foreach} • Template cheat sheet 26
  27. 27. dsd business internet27 Intro template
  28. 28. dsd business internet28 Main template
  29. 29. dsd business internet Apply new template • Modify content type • Modify the already entered content item
 
 Show me 29
  30. 30. dsd business internet30 Details button
  31. 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. 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. 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
  34. 34. dsd business internet Questions? 34

×