Dynamic rendering of sublayouts

Question

I have a dropdown list which contains:

1. product a
2. product b
3. product c

If I have chosen "product a" it should render the corresponding sublayout for product a

Current code:

1. I have item called basket
2. In the basket item I have added the presentation details of the products(a,b,c)
3. In the website I have rendered all the sublayout and hiding the hiding the unwanted sublayout

Pseudo code:

var a = get the dropdown list select item  
if(a.Value == "product a")
{  
    showDivWithPlaceholderOfProductA.Visible = true;  
    showDivWithPlaceholderOfProductB.Visible = false;
    showDivWithPlaceholderOfProductC.Visible = false;
}
else if(a.Value == "product b")
{
    showDivWithPlaceholderOfProductB.Visible = true;
    showDivWithPlaceholderOfProductC.Visible = false;
    showDivWithPlaceholderOfProductA.Visible = false;
}
else
{
    showDivWithPlaceholderOfProductC.Visible = true;
    showDivWithPlaceholderOfProductA.Visible = false;
    showDivWithPlaceholderOfProductB.Visible = false;
}

Drawback of current implementation:
The above code is rendering the all of the sublayouts and then showing / hiding the required sublayout.

How to change it:
1. I need to render only the required sublayout instead of hiding/showing
2. Can any one suggest better idea for rendering the sublayout based on the above scenario?

Answer 1

There are different ways in which you can achieve this.

OPTION 1

Like you have specified, you have already loaded the required sublayout, then using the hide and show feature, you toggle the visibility of the sublayout based on the selected item.

OPTION 2

Also, as Adarsh specified, you can make use of JavaScript to perform a call to the server to retrieve the sublayout.

OPTION 3

You may also use the Rule engine to toggle the sublayout visibility. You will require to create a custom condition and when the condition is satisfies, it will toggle the visibility.

OPTION 4

Another way to do this is as follows: Bind a change event on the select input as shown below:

<select id="product" name="product" OnSelectedIndexChanged="productSelection_SelectedIndexChanged" runat="server" placeholder="Select Product">
  <option value="{sublayoutIdForProductA}">Product A</option>
  <option value="{sublayoutIdForProductB}">Product B</option>
  <option value="{sublayoutIdForProductC}">Product C</option>
</select>

Then, the code behind will be like this:

protected void productSelection_SelectedIndexChanged(object sender, EventArgs e)
{
     //SelectedValue has the value of the Sublayout Id of the product
     var selectedProduct = product.SelectedValue;

     var productSublayout = Sitecore.Context.Database.Items.GetItem(new ID(selectedProduct));

     //Get Sublayout directory path
     var sublayoutDirectoryPath = productSublayout.Fields["Ascx file"].Value;

     var product = new Sublayout
     {
         Path = $"~{sublayoutDirectoryPath}",
         Cacheable = true,
         VaryByData = true,
         VaryByParm = true
     };
     this.phProductRendering.Controls.Clear();

     this.phProductRendering.Controls.Add(product);
}

Note that, I am usng theID of the sublayout in the option value so that when retrieved from the code behind, you only require to perform a call to retrieve the sublayout.

This allows to be more dynamic as if tomorrow you have more product in the select input, you will not require to update the code.

Moreover, you only require 1 placeholder to render the different products based on the selection.

Answer 2

You can make use of ajax. This way you will not be loading all sublayouts on page load. Bind your dropdown to a JS on change event to make the AJAX call.

Create a new item in sitecore for to intercept the ajax call. Let's say the item is ProductIdentifier. In this item you will have to configure a new sublayout (GetProductSublayout) in the presentation details. GetProductSublayout will be doing the processing to determine which sublayout to display and return the html

The Ajax call can be something like this

function (url, postData) {
        var data = { "itemId": item_Id_Of_Product_selected , "sublayout_id": id_of_sublayout };
        $.ajax({
            type: 'POST',
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            data: JSON.stringify(data),
            success: function(data)
            {
                    // add the data to the body of the page
            }
        });
    };

The url will refer to the url of the item ProductIdentifier. You will have to deserialize the parameters passed and then do the processing to determine the sublayout.

You can also take a look at this blog Ajax For Lazy Load