Webapp item not filtering correctly based on Data Source

[rjn31728799]

Hi all,

I'm having troubles getting only products who's data source fields match up with the current brand page the user is on show up. In the "Products" webapp, there is a data source field that links to the Brands webapp. The idea is to select a brand from that dropdown, and list the individual products that are marked with that brand on the particular brand page. Example: Product 1 is marked with Brand 1 and Product 2 is marked with Brand 2. So if I'm going to Brand 1's page, only products marked with Brand 1 should show up.

Here's a page that shows what I'm talking about:

Brand 1

Here's my HTML, inside of the Brand WebApp detail layout:

{module_webapps id="44839" filter="all" render="collection" collection="products" template =""}

<div class="col-md-8">

  <h3>{{this.['Name']}}</h3>

  <p>{{this.['Description']}}</p>

  <hr>

  <h3>Products</h3>

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  {% for item in products.items -%}

  {% if item.['Brand'] | strip_html == name -%}

  <div class="panel panel-default">

  <div class="panel-heading" role="tab" id="heading{{item.counter}}">

  <h4 class="panel-title">

  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{item.counter}}" aria-expanded="false" aria-controls="collapse{{item.counter}}">

  {{item.['Name']}}

  </a>

  </h4>

  </div>

  <div id="collapse{{item.counter}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{item.counter}}">

  <div class="panel-body">

  {{item.['External Links']}}

  </div>

  </div>

  </div>

  {% endif -%}

  {% endfor -%}

  </div>

  <a href="/brands" class="btn btn-default btn-sm">Back to Brands</a>

</div>

<div class="col-md-4">

  <img src="{{this.['Logo']}}?Action=thumbnail&Width=300&Height=300&algorithm=fill_proportional" alt="{{this.['Name']}}" class="img-responsive">

</div>

Even though I'm passing the liquid conditional that only products with the same data source as the webapp name should show up, but Product 1 and 2 are showing up. I can't figure out what's wrong with my logic?

[rjn31728799 · Accepted solution]

I actually just figured it out. The data source web app fields are using id numbers instead of text. I changed {% if item.['Brand'] | strip_html == name -%} to {% if item.['Brand_id'] | == itemId -%} to match the Brand data source to the Brand WebApp item ID.

[Liam Dilley]

Good you worked out your issue.

Some notes to help you as well:
{{this.['Description']}} - Do not need to do this all the time

{{Description}}

Your wrapper mode is for when you have words with spaces only. (IT is JSON output so the rules for that apply)
item.['Brand_id'] = Brand_id

The best way to see any layout or template output to know exactly what the objects and data output is:

<script>console.log({{this|json}});</script>

Viewing your browser console will give you the output you need.

When doing loops as well if you try do it in context it will help when and as you start doing bigger and more complex solutions.

for product in productlist.items etc

Hope that helps you further.

[rjn31728799]

Thank you! That makes perfect sense and I'll make those changes to make everything look a little cleaner. I'm a bit new to liquid so I'm definitely trying to learn best practices.

[Liam Dilley]

Nothing wrong with being New, Just providing the info to help