typo3: social icons in fluid template with typoscript

Question

I'll start with the snippets I'm trying to make work ...

I define the social accounts in constants.ts:

myExtension.configuration {

    socials {
        # cat=myExtension/socials/05; type=string; label=Facebook account:
        facebook = facebook.com/
        # cat=myExtension/socials/10; type=string; label=Twitter account:
        twitter = twitter.com/
        # cat=myExtension/socials/15; type=string; label=Google Plus account:
        googlePlus = plus.google.com/
        # cat=myExtension/socials/20; type=string; label=Youtube account:
        youtube = youtube.com/
    }
}

I declare the variable in page.ts

page = PAGE
page {
    # Page Main template
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:myExtension/Resources/Private/Templates/Main.html
        variables {    
            socials = TEXT
            socials.value = {$myExtension.configuration.socials}
        }
    }
}

then I try to use it in a template:

<f:render section="socials" />


<f:section name="socials">
  <ul class="list-inline hidden-print">
    <f:for each="{socials}" as="social" key="icon">
      <li>
        <a href="{social}">
          <i class="fa fa-{icon} fa-fw">
        </a>
      </li>
    </f:for>
  </ul>
</f:section>

I'm not yet that good with typo3 so it might be very simple, or the question very stupid ... I did not even figure out how to debug properly (so that I could first of all figure out how to be sure of the variable array 'socials')...

Answer 1

First you need to grab your constants one by one (as suggested by j4k3) - or skip that part altogether and directly define the value like this:

page = PAGE
page {
    # Page Main template
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:myExtension/Resources/Private/Templates/Main.html
        variables {    
            facebook = TEXT
            facebook.value = facebook.com/
            twitter = TEXT
            twitter.value = twitter.com/
            googlePlus = TEXT
            googlePlus.value = plus.google.com/
            youtube = TEXT
            youtube.value = youtube.com/
        }
    }
}

Then, to avoid duplicate code you can access the values by first mapping them on the fly and then iterating like this:

<f:alias map="{socials: {facebook: facebook, twitter: twitter, googlePlus: googlePlus, youtube: youtube}}">
  <f:render section="socials" arguments="{socials: socials}"/>
</f:alias>



<f:section name="socials">
  <ul class="list-inline hidden-print">
    <f:for each="{socials}" as="social" key="icon">
      <li>
        <a href="{social}">
          <i class="fa fa-{icon} fa-fw">
        </a>
      </li>
    </f:for>
  </ul>
</f:section>