stmllr.net

Combining Fluid ViewHelpers and TypoScript in TYPO3 - 5 basic examples

by on stmllr.net

Here comes another blog article about TYPO3 after a long time of absence. This time I introduce the Fluid cObject ViewHelper, which brings together the power of TypoScript and Fluid. I will demonstrate the usage of this ViewHelper in five basic examples.

1. Simple usage of the cObject ViewHelper: A breadcrumb menu

Any website with hierarchical pages should have a breadcrumb menu.
The TypoScript in this example creates a breadcrumb menu by using a HMENU of type rootline. The Fluid ViewHelper gets the result from this cObject and displays it in the template.

Fluid:

<f:cObject typoscriptObjectPath="lib.breadcrumb" />

TypoScript:

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0|-1
  1 = TMENU
  1 {
    NO.linkWrap = | >>
    CUR = 1
    CUR.doNotLinkIt = 1
  }
}

Result:

Home >> Learning TYPO3 >> Fluid examples 

2. Passing static values from Fluid to TypoScript: Let TypoScript calculate some numbers

Let's assume that you have some math homework and need to calculate some numbers.
All we need to do is to tell Fluid our arithmetic problem in the "data" parameter. This value is passed to TypoScript as the current value, where we do the calculation. The result of this calculation is returned to the template.

Fluid:

20 + 22 = <f:cObject typoscriptObjectPath="lib.math" data="20+22" />

TypoScript:

lib.math = TEXT
lib.math {
  current = 1
  prioriCalc = 1
}

Result:

20 + 22 = 42

This is a very simple demonstration. To make this more comfortable, you would probably use the form ViewHelper to have a form field to enter the calculation task.

3. Passing dynamic values from Fluid to TypoScript: Render a video with flashplayer, using an URL from an object property.

In this example we have a website with a video podcast. We want to show the video of each podcast episode using a flashplayer (like youtube does for example). The videos itself are stored as mp4 files somewhere in the cloud. So all we need to have is the URL of the video as a property of the episode object.

Fluid:

<f:cObject typoscriptObjectPath="lib.flashPlayer" data="{episode.url}" />

TypoScript:

lib.flashPlayer = SWFOBJECT
lib.flashPlayer {
  file.current = 1
  width = 400
  height = 300
  type = video
  layout = ###SWFOBJECT###
  video.player = typo3/contrib/flashmedia/flvplayer.swf
  forcePlayer = 1
}

Result:

Video Player 

4. Alternative notations for passing dynamic data: Again a Flash video of a podcast

We use the same example like above, but introduce some alternative notations. This should help to get an idea about how Fluid notation can look like.

Fluid:

A. <f:cObject typoscriptObjectPath="lib.flashPlayer" data="{episode.url}" />

B. {episode.url -> f:cObject(typoscriptObjectPath: 'lib.flashPlayer')}

C. <f:cObject typoscriptObjectPath="lib.flashPlayer">{episode.url}</f:cObject>

D. <f:cObject typoscriptObjectPath="lib.flashPlayer"><f:cObject typoscriptObjectPath="lib.alternativeVideoUrl" /></f:cObject>

TypoScript:

lib.flashPlayer = SWFOBJECT
lib.flashPlayer {
  file.current = 1
  width = 400
  height = 300
  type = video
  layout = ###SWFOBJECT###
  video.player = typo3/contrib/flashmedia/flvplayer.swf
  forcePlayer = 1
}
lib.alternativeVideoUrl = TEXT
lib.alternativeVideoUrl.value = http://www.example.com/my_video.mp4

Explanation of the Fluid notation:

A. The first Fluid notation is taken from the above example. It represents the shorthand XML notation.

B. The second one looks a bit complicated on the first sight. But it should give you an impression that you can "chain" multiple ViewHelpers.

C. The third example represents the XML notation with starttag and endtag and the value in between.

D. The forth notation points to the fact, that you can pass nested ViewHelpers as data. (refered as the renderChildren feature). In our case, the data which is passed to the lib.flashPlayer TS object is taken from another TS object. Take into account, that any spaces and linebreaks also get passed and could cause unwanted effects.

5. Passing whole objects to TypoScript: Show the price of a product only when the product is available.

In the last example, we have a product object with a some properties like price, availability, description etc. The two properties which are of interest here are price and availability. We only want to show the price, if the product is available.

Fluid:

<f:cObject typoscriptObjectPath="lib.productPrice" data="{product}" />

TypoScript:

lib.productPrice = TEXT
lib.productPrice {
  field = price
  fieldRequired = available
  wrap = Price: |
}

Result:

Price: 99,- $

What we do here is to pass the full object to the cObject ViewHelper instead of only one property. This makes it possible to use all properties of the product object in the TypoScript cObject. In the above example we check if there's a value in the "product.available" property. Only if this condition is true, we show the product.price. Of course this task could also be solved by using the if/then/else ViewHelper.

Summary

The cObject Viewhelper combines the power of Fluid with TypoScript. Before you think about writing your own ViewHelper to solve a task, you should think about solving this task with TypoScript. Especially if you york with people which are new to Fluid, but TypoScript gurus. Not to forget that TypoScript Objects are far more configurable for admins than PHP code of Fluid ViewHelpers are. If you know some more tricks with TypoScript and Fluid, please share it with us and write a comment.

Tags

Comments

  1. Sebastian Kurfürst

    Hey,

    nice article :-) Just a short question: I don't get what you mean with the example 4) -- I cannot really imagine why this should work.

    Greets,
    Sebastian

  2. Steffen

    Hi Sebastian,

    thanks for your comments.

    I am not sure which of the notations your refer to in example 4.
    I changed the article a bit to make it more clear what my intentions are. Technically all examples should work, since I tested them before posting. Please note that I removed linebreaks in notation D to make clear that any character matters.

  3. Markus Oberndörfer

    Hi Steffen,

    regarding example 5. What if you want to access an object storage field inside of your product object. For example your product contains a sub-object productmanager and you want to access the name of this manager.

    field = product.manager.name doesn't seem to work.

    Best regards
    Markus

  4. Steffen

    It should correctly read:
    field = manager.name

    But this will also not work. I guess there's a limitation in TypoScript getData, which is not able to handle nested objects/arrays in the way you tried to.

    Maybe there's a way to juggle this kind of data. If anyone knows, please post. I'd also be interested.

  5. Peter

    Hi Steffen,

    Number 5 does not work for me, ist only works with some modifications:



    lib.productPrice = TEXT
    lib.productPrice {
    current = 1
    required = 1
    wrap = Price: |
    }

    In my tests this works with subobjects too.

  6. Steffen

    @Peter

    What TYPO3 version did you use for testing example 5? The article bases on TYPO3 4.4. Maybe something changed in 4.5? Could you please test this?

  7. Steffen

    If you need to pass properties from several objects, put them into an array. For example:

    You want to link the product title {product.title} to a certain page. This page is configured on a global scope in TypoScript settings {settings.order.pid}:

    ## Fluid
    <f:cObject
      typoscriptObjectPath="lib.product"
      data="{title: product.title, orderPid: settings.order.pid}"
    />
    
    ## TypoScript
    lib.product = TEXT
    lib.product {
      field = title
      wrap = Click to buy our new |
      typolink.parameter.field = orderPid
    }

  8. Patrick Schriner

    As nice as it may seem, I ran into memory issues with the cObjectViewhelper on TYPO3 4.5. It did some simple arithmetics, and was called maybe 100x on a page. Transforming into a custom php based viewhelper resolved my issues.

Add a comment

Comments are moderated and need to approved. Please be patient.