Developer 101 - Lab: Create a Featured Products Module

James Vidler

July 25, 2018 19:40

In this lab, you will be creating a Module that allows content editors to search and select from a list of available of “Products” and have them featured in a listing on the website. We will be making use of the existing Digital Content List found in Shared Content > Dynamic Page Content called “Products”. Dynamic Page Content is a special type of Shared Content that allows content lists to be used dynamically as content for a Page. Each Product has its own dynamic page and this is important, but not relevant to this exercise.

Again, you will need to have the Agility Content Manager open in a web browser and our Sample Site open in Visual Studio. At the end of the lab, you will have a list of featured “Products” and add this to the existing “home” page.

Start by navigating to Settings > Module Definitions in Agility.
Click New Module Definition.
Enter “Featured Products” as the Name and ensure the Reference Name is auto-populated.
Enter “Displays a list of Featured Products.” as the Description.
Click Save to save this module.
This module will have several properties including “Title”, “ProductsIDs”, and “Products”. Click on the Form Builder tab and click Add Field.
Enter “Title” as the Field Label and ensure the Field Name is also filled out. Set the Property Type to “Text”. Click Save & New.
Enter “Products IDs” as the Field Label and ensure the Field Name is also filled out. Set the Field Type to “Text” and mark the field as “Hidden Value” – this will hide the text field from the input form. We’ll need this later to store our selected and sorted Product IDs. Click Save & New.
Enter “Products” as the Field Label and ensure the Field Name is also filled out. Set the Property Type to “Linked Content”. Additional fields relating to Linked Content will be shown.
Set the Content Definition to “Product”.
Set the Content View to “Shared Content”. This will show an additional field called Shared Content allowing you to select a Shared Content List that exists based on the “Product” content definition. Select “Products”.
Set Render as “Search List Box”. Additional fields relating to the Search List Box will be displayed.
Click the Choose Columns link and ensure “Title” is selected.
Leave the Filter Expression field blank.
Leave the Default Search Value field blank.
Set the Save Value To Field to your hidden property you created called “Products IDs”.
The Save Text To Field property can be left blank in this case, although can be useful when wanting to store the Title of the Product in addition to its ID.
Click Save & Close.
Click on the Output Template
Select “MVC Controller Action” as the Output Type and enter “Products” as the Controller and “Featured” as the Action.
Click Save & Close on the Edit Module Definition dialogue.
Click Download API to download your latest C# classes and replace the contents of the existing API file Models/MVC4SampleSite_API.cs.
In Agility navigate to Pages and click on the page labelled “home”. Add the “Featured Products” module to the Main Content Zone.
Set the Title to “Featured Products”.
Click Save to save the module and initialize the Linked Content property.
Enter “processor” into the search field and hit Enter on your keyboard to search the Products list for any Product Title that contains “processor”.
If you don’t receive any results, change the search term and try again. You can always click on the EDIT CONTENT button to see the entire Products list.
Once you have some search results, click the autocomplete item to select the item. Note you can also select items from your Selection list and move them left/right to customize your sort order. Adding, removing, or sorting items will change the comma delimited list of IDs that are being stored in your hidden “Products IDs” field.
Once you are satisfied with your selection click Save & Close to close the module.
Next, we need to add in the appropriate Controller Action method and create our partial view for our module.
In Visual Studio open the Controller called “ProductsController”. You’ll notice we already have other Controller Action Methods here for our general Product Listing and Product Details modules. Add a new ActionResult near the bottom called “Featured” and we will pass in the Module_FeaturedProducts class as a parameter called “module”.
```
  public ActionResult Featured(Module_FeaturedProducts module)
  {
       return PartialView("~/Views/Products/FeaturedProducts.cshtml", module); 
  }
```

Before we move onto creating our PartialView called “FeaturedProducts.chsml”, let’s add some validation to this module. We only want to output this module if we have any products that were selected. If the editor didn’t select any products, or the products they selected have been unpublished or deleted then we don’t want to display something that looks like empty content on the website. To get around this, we can add some logic that only renders the partial view if we have the associated content.

public ActionResult Featured(Module_FeaturedProducts module)
{
    //check if the Products linked content is initialized and the 'Products' list still exists, 
    //then get products by our selected IDs and see if we have any
    //if we do, then display then render the view, else return nothing
    if (module.Products != null && mod-ule.Products.GetItemsByIDs(module.ProductsIDs).Any())
    {
        return PartialView("~/Views/Products/FeaturedProducts.cshtml", module); 
    }

    return null;
            
}

Create a new Partial View in Views/Products/ called “FeaturedProducts” and set the model of the view to Module_FeaturedProducts.
```
@model MVC4SampleSite.Models.Module_FeaturedProducts
```

Type in the following code into your view:

@* Adding Agility.Web.Extensions allows us to use the method GetItemsByIDs which filters the content view by our IDs *@
@using Agility.Web.Extensions
@model MVC4SampleSite.Models.Module_FeaturedProducts

<div class="featured-products">

    @* If the Title is empty, don't display anything *@
    @if(!string.IsNullOrEmpty(Model.Title)) {
    <h2>@Model.Title</h2>
    }

    <div class="row">

        @foreach(var product in Model.Products.GetItemsByIDs(Model.ProductsIDs)) 
        {

        <div class="col-md-4">
            <a href="@product.Url("~/products/product-details")">
                <h3>@product.Title</h3>
            </a>
            @if(product.ListingImage != null) { 
            <img src="@product.ListingImage.URL" class="img-responsive" />
            }
        </div>
            
        }

    </div>

</div>

Build your project and Start Without Debugging in Visual Studio. On the homepage, you should see your Featured Products module along with any products you have selected.

Comments