I wish to implement checkbox filtering by category using XSLT. Something like this: Filtering
In the backend, the XML file is structured as follows. I have no control over the format of this file.
<?xml version="1.0" encoding="UTF-8"?>
<!-- note that fields is populated with every single category and value-->
<fields>
<field name="category1">
<value>cat1stuff1</value>
<value>cat1stuff2</value>
<value>cat1stuff3</value>
</field>
<field name="category2">
<value>cat2stuff1</value>
<value>cat2stuff2</value>
<value>cat2stuff3</value>
</field>
</fields>
<!--categories can contain 0, 1, or more values-->
<apps>
<app id="App1">
<name>Application 1</name>
<desc>This is app 1</desc>
<category1>
<value>cat1stuff2</value>
</category1>
<category2/>
</app>
<app id="App2">
<name>Application 2</name>
<desc>This is app 2</desc>
<category1>
<value>cat1stuff1</value>
<value>cat1stuff3</value>
</category1>
<category2>
<value>cat2stuff3</value>
</category2>
<apps>
I want to have checkboxes for each value within each category. The apps that have those values are then shown. The ones who don't have those values are hidden. Just like the dell site.
This is what I have for my XSLT file so far:
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://ift.tt/tCZ8VR" version="2.0">
<xsl:output method="html"/>
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="fields">
<html>
<body>
<div id="testFilter">
<ul>
<xsl:for-each select="field">
<h2>
<xsl:value-of select="@name"/>
</h2>
<xsl:for-each select="value">
<label>
<input type="checkbox" checked="checked" >
</input>
<xsl:value-of select="current()"/>
<br/>
</label>
</xsl:for-each>
</xsl:for-each>
</ul>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="apps">
<html>
<script type="text/javascript">
<xsl:text>
<!-- stuff goes here -->
</xsl:text>
</script>
<body>
<div id="boxes">
<ul>
<xsl:for-each select="app">
<li class="">
<a>
<xsl:attribute name="href">
javascript:select('<xsl:value-of select="@id"/>')
</xsl:attribute>
<xsl:value-of select="name"/>
</a>
<br/>
<xsl:value-of select="desc"/>
</li>
</xsl:for-each>
</ul>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="app">
</xsl:template match="app>
</stylesheet>
Can you guys please help me out by letting me know where to do what? Please don't flame me too hard. I'm on an internship and taught myself HTML, CSS, XML, and XSLT this week.
Aucun commentaire:
Enregistrer un commentaire