Creating a Sales Page: The Layout

When you work with a Repeater, you have to loop over its elements:

<span class="language-xml">&lt;%</span><span class="language-ruby"> current\_page.content(<span class="hljs-symbol">:problem</span>).each <span class="hljs-keyword">do</span> |<span class="hljs-params">p</span>| </span><span class="language-xml">%&gt;
&lt;h2&lt;%=</span><span class="language-ruby">p.content(<span class="hljs-symbol">:title</span>)</span><span class="language-xml">%&gt;&lt;/ph2
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&lt;%=</span><span class="language-ruby">p.content(<span class="hljs-symbol">:summary</span>)</span><span class="language-xml">%&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
&lt;%</span><span class="language-ruby"> <span class="hljs-keyword">end</span> </span><span class="language-xml">%&gt;</span>

You can also wrap this with an if statement if you're not sure whether a bit of content is present:

<span class="language-xml">&lt;%</span><span class="language-ruby"> <span class="hljs-keyword">if</span>(current\_page.content(<span class="hljs-symbol">:problem</span>).present? </span><span class="language-xml">%&gt;
...
&lt;%</span><span class="language-ruby"> <span class="hljs-keyword">end</span> </span><span class="language-xml">%&gt;</span>

I find that working with partials is much easier, because you can plug them in where you need them. They can work like components in a Vue or React app as well.
For instance, my "hero" partial doesn't need to access the current_page stuff, you can pass the page to it, like this:

<span class="language-xml">&lt;%=</span><span class="language-ruby"> render <span class="hljs-string">&quot;hero&quot;</span>, <span class="hljs-symbol">locals:</span> {<span class="hljs-symbol">page:</span> current\_page.content(<span class="hljs-symbol">:problem</span>).first } </span><span class="language-xml">%&gt;</span>

A bit verbose, but it does separate the hero from the implementation details.