Razor: Retrieving variable from component template on page template

Question

---

Hi all, I've been working on a set of Razor templates that is either Site Editable with the Experience Manager and at the same time is fully responsive for several screenwidths with the Twitter bootstrap. As a result, I need to dynamically manipulate the DOM output based on what the Experience Manager editor adds or deletes but still maintain the responsive design. Part of this construction is adhering to the rules the twitter bootstrap dictates.

The twitter bootstrap allows for excellent responsive design by introducing dynamically calculated div widths using classes. A <div class="span12> uses the entire width of the wrapper, for example. A "span6" effectively uses half, with a certain margin calculated as well to allow for another div with "span6". However, this only works if the preceding class is called <div class="row-fluid">,and as long as the span<numbers> actually add up to exactly 12. The problem arises when I need to close the <div class="row-fluid"> when this number is actually reached.

To clarify: it has to output like this

<div class="row-fluid">
    <div class="span6">..code</div>
    <div class="span4">..code</div>
    <div class="span2">..code</div>
</div>

The <div class="span[#]"> are rendered with a component template, in order to allow for multiple components within the <div class="row-fluid>, which the Page Template renders.

However, from a component template level I cannot seem to retrieve the actual amount of components of this template actually exist on the Page itself. I calculate the width of the component used based on a schema option of the component itself. I use the following Component Template code to render it correctly:

@{
var spanClass = String.Empty;
if (Fields.HasField("component_width") && Fields.component_width != null) {
    if (Fields.component_width.ToLower() == "full") {
        spanClass = "span12";
    } else if (Fields.component_width.ToLower() == "half") {
        spanClass = "span6";
    } else if (Fields.component_width == "40%") {
        spanClass = "span5";
    } else if (Fields.component_width == "35%") {
        spanClass = "span4";
    } else if (Fields.component_width == "25%") {
        spanClass = "span3";
    }
}
}
<div class="@spanClass">...code

To get to my question: I need to be able to close the <row-fluid> div if the number 12 has been reached. So if one component with the options 'Full' (width) is selected, the following output code needs to appear:

<div class="row-fluid">
    <div class="span12">..code</div>
</div>

If there are two components on the page with the option "half" are selected, it must allow

<div class="row-fluid">
    <div class="span6">..code</div>
    <div class="span6">..code</div>
</div>

mind the closing div on the end. Is there some way I can reach the variable i created on the Component Template var spanClass = String.Empty; from Page Template? Something like:

@foreach (var cp in GetComponentPresentationsByTemplate("XM_Generic Content")) {
            @if (cp.Component.spanClass == "span6") {
                <div class="row-fluid">
                @cp.RenderComponentPresentation()
                @if (cp.Index == 1) {
                   </div>
                }
            }
}

I'm still getting to know Razor templates, the practicalities of Responsive design and ofcourse StackOverflow. Chances are that I completely missed something, made dumb errors in my code of just asked a silly question. By all means, let me know.

Answer 1

The package is not shared between template runtimes, so this behavior is normal (not being able to see variables set in one template from a different instance).

There are ways around this, but you should consider that perhaps there is a good reason why Tridion chose to isolate the template execution.

See here for one of the ways to go around this.

Answer 2

Standard techniques using the ContextVariables dictionary don't allow you to set something in the CT and access it from the PT. Effectively, each time a Component is rendered, the render context gets a fresh copy of the variables from the page render context. Writing back to them, therefore isn't effective. There is a technique that gets round this, which is described in detail on tridion-practice. As already noted, resorting to these kinds of techniques shouldn't be your first option, but sometimes you need to.

Answer 3

Currently, its seems, the user is defining the width position in the component field. I think, its quite typical, but if you create 5 Component Template which will call a same Razor TBB, and also define, a parameter schema on component Template where can set the width of component then afterwards you can easily call these different CTs in the page template.