Проблема для генерации HTML с XSL и XML - PullRequest
Новая
       5

Проблема для генерации HTML с XSL и XML

0 голосов
/ 10 апреля 2020

Я получил следующий код в 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>

Мне нужно преобразовать XML в 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>

Я пытаюсь сделать это с умножает XSL-файлы. Я не понимаю, как создать эти две части (div для заголовка, раздел для контента) только с одним файлом XSL. Вторая проблема заключается в том, что я не знаю точно, как работают xsl: for-each и xsl: template match = ''. Если кто-то может помочь мне с простым примером, будьте добры.

Извините, если я написал что-то не так, я из Испании, и я не знаю много английского sh.

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Спасибо zx486, чтобы ответить мне. Я могу решить мою последнюю проблему с этим кодом: 

<?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>

0 голосов
/ 11 апреля 2020

Я не уверен, что это поможет вам, но вам просто нужно обернуть HTML в шаблон, чтобы получить желаемые значения с xsl:value-of из XML. Но сначала вам нужно привести в соответствие ваш HTML код X HTML (что по сути означает закрытие всех тегов).

Тогда XSLT-1.0 может выглядеть следующим образом: 

<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>

Последняя часть его вывода: 

      ...
      <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...