Problem to generate HTML with XSL and XML

0
votes

I got the next code in XML

<container>
    <id>6</id>
    <title>Producto</title>
    <body>Descripción del producto</body>
    <price>300.0</price>
    <stock>0</stock>
    <images>
        <image>images/products/product.svg</image>
    </images>
</container>

I need to convert this XML in this HTML:

<!-- Central section -->
<div class="title">
    <h1>Title</h1>
</div>
<section class="central-margin">
    <div class="container central-content">

        <!-- Carousel images -->
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="image-1" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="image-2" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="image-3" alt="First slide">
                </div>
            </div>
        </div>

        <!-- Product info -->
        <div class="product-content">
            <div class="description">
                Description
            </div>
        <div class="data">
            <form action="">
                <label>Precio:<span class="float-right">300 €</span></label><br>
                <label>Stock:<span class="float-right">0</span></label><br>
                <input type="text" name="id" value="6" hidden>
                <input type="submit" class="btn btn-primary w-100" value="Comprar">
            </form>
        </div>
    </div>
</section>

I try to do it with multiples XSL files. I dont understand how to create this two parts (the div for title, section for content) with only one XSL File. My second problem is that I dont know exactly how "xsl:for-each" and "xsl:template match=''" works. If someone can help me with a simple example with be nice.

Sorry if i wrote something wrong, im from spain and I dont know much english.

Thanx for the help.

2
htmlxmlxslt
I forgot to say if it is more simple changing the product XML file I can do it. Thats is not a problem rigth now. All fo this is for learn the TwoStepView on a signature. - Alexander A.M

2 Answers

0
votes

I'm not sure that this will help you, but you just have to wrap the HTML into a template a get the desired values with xsl:value-of from the XML. But first, you have to make your HTML code XHTML conform (that essentially means closing all tags).

Then the XSLT-1.0 could look like this:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes"/>

    <xsl:template match="/">
        <!-- Central section -->
        <div class="title">
            <h1>Title</h1>
        </div>
        <section class="central-margin">
            <div class="container central-content">

                <!-- Carousel images -->
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="image-1" alt="First slide" />
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="image-2" alt="First slide" />
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="image-3" alt="First slide" />
                        </div>
                    </div>
                </div>

                <!-- Product info -->
                <div class="product-content">
                    <div class="description">
                        <xsl:value-of select="/container/body" />
                    </div>
                </div>
                <div class="data">
                    <form action="">
                        <label>Precio:<span class="float-right"><xsl:value-of select="/container/price" /> €</span></label><br />
                        <label>Stock:<span class="float-right"><xsl:value-of select="/container/stock" /></span></label><br />
                        <input type="text" name="id" value="6" hidden="true" />
                        <input type="submit" class="btn btn-primary w-100" value="Comprar" />
                    </form>
                </div>
            </div>
        </section>
    </xsl:template>

</xsl:stylesheet>

The last part of its output is:

      ...
      <div class="product-content">
         <div class="description">Descripción del producto</div>
      </div>
      <div class="data">
         <form action="">
            <label>Precio:<span class="float-right">300.0 €</span>
            </label>
            <br/>
            <label>Stock:<span class="float-right">0</span>
            </label>
            <br/>
            <input type="text" name="id" value="6" hidden="true"/>
            <input type="submit" class="btn btn-primary w-100" value="Comprar"/>
         </form>
      </div>
   </div>
</section>
0
votes

Thanx to zx486 to answer me. I can solve my last problem with this code:

<?xml version="1.0" encoding="UTF-8"?>


<xsl:template match="/">
    <xsl:comment> Central section </xsl:comment>
    <div class="title">
        <h1>
            <xsl:value-of select="/container/title"/>
        </h1>
    </div>
    <section class="central-margin">
        <div class="container central-content">

            <xsl:comment> Carousel images </xsl:comment>
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <xsl:for-each select="/container/images/image">

                        <xsl:choose>
                            <xsl:when test="position()=1">
                                <div class="carousel-item active">

                                    <xsl:element name="img">
                                        <xsl:attribute name="class">
                                            <xsl:text>d-block w-100</xsl:text>
                                        </xsl:attribute>
                                        <xsl:attribute name="src">
                                            <xsl:value-of select="."/>
                                        </xsl:attribute>
                                    </xsl:element>

                                </div>
                            </xsl:when>

                            <xsl:otherwise>
                                <div class="carousel-item">

                                    <xsl:element name="img">
                                        <xsl:attribute name="class">
                                            <xsl:text>d-block w-100</xsl:text>
                                        </xsl:attribute>
                                        <xsl:attribute name="src">
                                            <xsl:value-of select="."/>
                                        </xsl:attribute>
                                    </xsl:element>

                                </div>
                            </xsl:otherwise>
                        </xsl:choose>

                    </xsl:for-each>
                </div>
            </div>

            <xsl:comment> Product info </xsl:comment>
            <div class="product-content">
                <div class="description">
                    <xsl:value-of select="/container/body" />
                </div>
            </div>
            <div class="data">
                <form action="">
                    <label>Precio:<span class="float-right">
                            <xsl:value-of select="/container/price" /> €</span>
                    </label>
                    <br />
                    <label>Stock:<span class="float-right">
                            <xsl:value-of select="/container/stock" />
                        </span>
                    </label>
                    <br />
                    <input type="text" name="id" value="6" hidden="true" />
                    <input type="submit" class="btn btn-primary w-100" value="Comprar" />
                </form>
            </div>
        </div>
    </section>
</xsl:template>