1. Отредактируйте XSL-шаблон фильтра и блок:
<xsl:if test="../../filter = 4">
<!-- Отображаем флажки -->
...
</xsl:if>
Замените на:
<xsl:if test="../../filter = 4">
<!-- Отображаем флажки -->
<xsl:variable name="nodename">property_<xsl:value-of select="../../@id"/></xsl:variable>
<div>
<label class="checkbox-inline" for="property_{../../@id}_{@id}">
<input type="checkbox" value="{@id}" name="property_{../../@id}[]" id="property_{../../@id}_{@id}">
<xsl:if test="/shop/*[name()=$nodename] = @id">
<xsl:attribute name="checked">checked</xsl:attribute>
</xsl:if>
<!-- <label for="property_{../../@id}_{@id}">
<xsl:value-of disable-output-escaping="yes" select="value"/>
</label>-->
</input>
<span><xsl:value-of select="value"/></span>
</label>
</div>
<!-- <br/> -->
</xsl:if>
2. Отредактируйте макет и добавьте стили:
.checkbox-inline span {
position: relative;
z-index: 11;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 18px;
min-width: 18px;
font-weight: normal;
}
.checkbox-inline span::before {
font-family: fontAwesome;
font-weight: bold;
font-size: 13px;
color: #333;
content: " ";
background-color: #fafafa;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border-radius: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
height: 18px;
line-height: 16px;
min-width: 18px;
margin-right: 10px;
margin-bottom: 2px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.checkbox-inline input:checked ~ span::before {
display: inline-block;
content: '\f00c';
background-color: #f5f8fc;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
border-color: #333;
}
.checkbox-inline {
padding-left: 0;
}
.checkbox-inline input {
opacity: 0;
left: -9999px;
z-index: 12;
width: 18px;
height: 18px;
cursor: pointer;
}
