1

I'm working on building an inventory list within the AMP structure, as the rest of our site is built with AMP, and need to be able to filter some of my data for usability purposes. Here's a link to what I'm currently working on: Inventory List.

I have been using the Product Browse Page example on the AMP by Example website as my guideline for how to go about this (Product Browse Page). I can't however seem to get my data to filter at all. I would expect that when I choose 'Wheel Loader' from my select menu that the item in my inventory list would disappear.

Here is my initial code chunk that sets up the 'Machine Type' select menu, I also have two more layers to this filtering that I currently have commented out as I try to get this one working.

     <amp-state id="inventory">
                <script type="application/json">
                    {
                        "Type": "all",
                        "listSrc": "https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM"
                    }
                </script>                
            </amp-state>
            <amp-list height="60" layout="fixed-height" src="https://www.craigattachments.com/json/inv-dropdowns.json">
                <template type="amp-mustache">
                    <label for="Type">Machine Type</label>
                    <select id="Type" name="Type" class="inv-dropdown" on="change:AMP.setState({inventory: {Type: event.value,listSrc: 'https://www.craigattachments.com/json/inventory.json?Type='+ event.value +'&_=RANDOM'}})">
                         <option value="all">Select your machine type</option>
                        {{#type}}
                        <option value="{{name}}">{{name}}</option>
                        {{/type}}
                    </select>
                </template>
            </amp-list>

I am then trying to use the above code to filter my list (below) which is populated using my inventory.json file. I have shortened the file for testing purposes, but it will eventually be populated by going through our ERP systems API.

    <amp-list width="auto" height="150" layout="fixed-height" src="https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM'" [src]="inventory.listSrc">  
                <template type="amp-mustache">
                    <div class="inv-list-row">
                        <div class="inv-list-item inventory">{{SerialNo_SerialNumber}}</div>
                        <div class="inv-list-item inventory">{{Part_PartNum}}</div>
                        <div class="inv-list-item inventory">{{Part_PartDescription}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialBrand}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialSubBrand}}</div>
                        <div class="inv-list-item inventory">{{Type}}</div>
                    </div> 
                </template> 
            </amp-list>

Any insight on what I may be missing so that this will actually filter my data on change of the select menu? I'm assuming it is a referencing issue to the 'Type' item in my JSON data, but am not sure how to go about making that connection.

Edit: May 16th, 2018

Finally got it working. Decided to drop 'Model' for now but will add functionality for it later.

GitHub Link to Code

Craig Scott
  • 892
  • 4
  • 14

1 Answers1

1

It looks like the filtering would need to happen on the server/API end based on the provided Type parameter. The fetch calls are happening on the Inventory List link when the type is changed and it is setting the Type correctly in the URL, but it was returning the same JSON for both types when I tested it. The AMP bit of it looks right to me.

smlync
  • 369
  • 9
  • 15
  • This may not be exactly what you meant, but I tried splitting my JSON file into two files based on Type (one Excavator.json and one Wheel Loader.json) and that seems to work. The API to our ERP system is fairly weak so I doubt I can do much on it's end but I can at least get the data out and manipulate it with some PHP. I'll work through the rest of the details of this and once I get it working I'll post my code in my original post and accept your answer. Thanks! – Craig Scott May 03 '18 at 16:21
  • I finally got something working. In the midst of doing this, web access to the ERP server got nuked for security reasons so I had to write a PowerShell script to grab the code and upload it through a scheduled task that runs daily. I also wrote a cronjob to do most of my JSON file re-working and splitting. Inventory list runs better this way as our ERP system tends to be slow. Now that it is on the web server I plan on eventually converting this to server side filtering. Had a deadline to make though so for now this works. Front-end guy is working on making it look good now. – Craig Scott May 16 '18 at 16:54