Category Links for Web App

[Linda_SA]

I have created a web app that displays articles and each web app item will be assigned to a category. I would like to show category links that when clicked will bring up all articles in that category. For instance, on this page http://zoetraining.businesscatalyst.com/training-development-articles in the CATEGORIES box on the right, I would like the user to be able to click the "Coaching" link and go to a page that displays all articles assigned to the Coaching category.

If possible, can somebody please share instructions on how I can accomplish this?

Thank you,
Linda

[Liam Dilley]

Hi Linda,

You will need to set up a series of pages for them with good SEO links and for each output module list based on that classification. That is the guts of it.

[Linda_SA]

So essentially create an HTML page for each category in which I manually compile a list of articles associated with the category being displayed, and that there is no automatic way of generating such a feature, is that right?

[Linda_SA · Accepted solution]

So I found further clarification on my question by reading this page: Using Categories to organise content in Business Catalyst Essentially, you create a module web app tag that will automatically display a list of web app items from a specific category.

Within BC I open the page in which I wish to display a list of certain category items then insert my cursor in the body of the Page Content where I want the list to appear. On the right side of the page there's a section called Toolbox. From there I click on Web Apps > List of Web App Items > name of web app > Display All Items in a Category Classification. Then in the next step you choose the classification category. After that, you can customize it even further.

I do have to manually create a page for each category, but the list is automatically generated by the module web app tag I created as described above using the wizard in the Toolbox.

Hope this helps others who wish to learn how to do the same type of setup.

[Liam Dilley]

That is correct.

[topelovely]

Using Liquid, it is simple and clean: See my code. Replace accordingly. Use freely:

{module_categorylist id="199" maxLevel="1" collection="seasonGom" template=""}

        {% for item in seasonGom.items -%}

        {% unless item.name == "All Categories" -%}  // I want to remove the default All Category BC spits out

        <ul>

            <li>

        <a href="http://mysite.com/mypage?CategoryID={{item.id}}">{{item.name}}</a> // I enclose the target url in anchor tag and appended the category id of each item. Upon click it links to destination showing the items in that category. You don't need to create separate pages. You create only one page.

            </li>

        </ul>

{% endunless -%}

        {% endfor -%}

        <pre>{{ seasonGom | json }}</pre>

[topelovely]

Sorry, if my solution might have some issue, and I think help myself. I discovered when I run this code the data in the webapp items keeps showing "Item not found".  So support advise I read up {module_url} to append the parameter. But am confused as to how to do this. Can someone kindly help ammend my code to achieve this.

Thanks

[Linda_SA]

I came up with a workaround to actually do this (create category links), so that when a web visitor clicks a link it will automatically generate a list of items from a specific category and display them in a template. This actually saves me a lot of time and maintenance since now I do not need to create a separate web page for each and every category assigned to an web app item. I copy and paste the workaround code into the web page where I want to display the link.

I created a form script using only one select option, the category I wish to display. I have the form hidden from view on the page. The value of the option tag is the name of the assigned category. I only need to change out the "option" tag for each link.

Then I used CSS to make the SUBMIT button look like a link with specific text.

Here is the basic html code:

<form name="catcustomcontentform44741" method="post" onSubmit="return checkWholeForm44741(this)" action="/Default.aspx?CCID=24951&FID=350076&ExcludeBoolFalse=True&ID=/program-search-results">

    <div class="full-row" style="display:none">

        <select name="CAT_Custom_17" id="CAT_Custom_17" style="display:none;">

            <option value="Writing Skills">Writing Skills</option>

        </select>

    </div>

    <div class="full-row">

        <div class="submit_field">

            {module_ccsecurity}

            <input class="noBtn" type="submit" name="" value="View our online catalog of Writing Skills program descriptions &raquo;">

        </div>

    </div>

</form>

And here's the CSS:

.noBtn {

    font: bold 13px/23px Helvetica, Arial, sans-serif;

    text-align: left;

    color: #4782b2;

    background: none;

    margin: 0;

    padding: 0;

    border: none;

    cursor: pointer;

}