dsd business internet

Building a carsaleswebsite with

Form2Content

René Kreijveld ! @renekreijveld

J and Beyond 2015, may 29th 2015

1

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, readingmovies, huntingdog training with Mila, my Bracco Italiano

2

dsd business internet3

Mila

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

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

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

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

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

dsd business internet

www.form2content.com• 2 versions: LITE (free) and PRO (paid) • PRO: more options, bigger content types, more

field typeshttp://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

dsd business internet10

dsd business internet

www.form2content.com• Couponcode:

J!ANDBEYOND2015• 25% discount for all extensions • Valid until july 24th

11

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

dsd business internet

Category setup

13

dsd business internet

Content type: Car

14

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

dsd business internet

Add fields

16

• description - multi-line text (editor) • images - image gallery

dsd business internet

Content type fields

17

dsd business internet

Menu item Cars for Sale

18

dsd business internet

Menu item Edit cars

19

dsd business internet

Demo car entry• http://carsales1.demo/

20

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

dsd business internet

Default intro template

22

dsd business internet

Desired layout

23

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

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

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

dsd business internet27

Intro template

dsd business internet28

Main template

dsd business internet

Apply new template• Modify content type • Modify the already entered content item Show me

29

dsd business internet30

Details button

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

dsd business internet

Putting it all together• Multiple cars • Added database lookup for Brands • Added the Form2Content search • Added Edit article button pluginhttp://carsales3.demo

32

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

dsd business internet

Questions?

34