thuecat/Resources/Private/Partials/Frontend/ContentElement/Offers.html
Carlos Pozo 46df4f4028
Improve detail view templates
Adapt detail view template for Bootstrap usage.
Provide proper out-of-the-box integration.
2022-03-08 08:27:18 +00:00

80 lines
4.3 KiB
HTML

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="offers">
<f:if condition="{offers -> f:count()} > 1">
<f:then>
<f:render section="MultiOffers" arguments="{offers: offers, uid: uid}" />
</f:then>
<f:else>
<f:render section="SingleOffer" arguments="{offers: offers}" />
</f:else>
</f:if>
</div>
<f:section name="MultiOffers">
<div class="accordion" id="accordionOfferPrices">
<f:for each="{offers}" as="offer" key="key" iteration="iterator">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#offerPriceGroup-{key}-{uid}" role="button" aria-expanded="false" aria-controls="offerGroup-{key}-{uid}">
<f:if condition="{offer.title}"><f:then>{offer.title} <span class="ps-1">({f:translate(id: 'content.price.type.{offer.type}', default: offer.type, extensionName: 'Thuecat')})</span></f:then><f:else>Preisgruppe</f:else></f:if>
</button>
</h3>
<div class="accordion-collapse collapse" id="offerPriceGroup-{key}-{uid}">
<div class="accordion-body row">
<f:if condition="{offer.description}">
<div class="description col-md-4">
<p><small>{offer.description}</small></p>
</div>
</f:if>
<div class="prices col-md-8">
<div class="row">
<f:for each="{offer.prices}" as="price">
<div class="price-item col-md-5">
<strong>{price.title}</strong>
<span>{price.price -> f:format.currency(decimalSeparator: ',', thousandsSeparator: '.', decimals: 2, currencySign: price.currency)}</span>
<small>{f:translate(id: 'content.price.rule.{price.rules.0}', default: price.rule, extensionName: 'Thuecat')}</small>
<f:if condition="{price.description}">
<p><small>{price.description}</small></p>
</f:if>
</div>
</f:for>
</div>
</div>
</div>
</div>
</div>
</f:for>
</div>
</f:section>
<f:section name="SingleOffer">
<f:for each="{offers}" as="offer" key="key">
<div class="offer-group">
<div class="content">
<h3>{offer.title} <span class="ps-1">({f:translate(id: 'content.price.type.{offer.type}', default: offer.type, extensionName: 'Thuecat')})</span></h3>
<div class="row">
<f:if condition="{offer.description}">
<div class="description col-md-4">
<p><small>{offer.description}</small></p>
</div>
</f:if>
<div class="prices col-md-8">
<div class="masonry-prices row">
<f:for each="{offer.prices}" as="price">
<div class="price-item col-md-5">
<strong>{price.title}</strong>
<span>{price.price -> f:format.currency(decimalSeparator: ',', thousandsSeparator: '.', decimals: 2, currencySign: price.currency)}</span>
<small>{f:translate(id: 'content.price.rule.{price.rules.0}', default: price.rule, extensionName: 'Thuecat')}</small>
<f:if condition="{price.description}">
<p><small>{price.description}</small></p>
</f:if>
</div>
</f:for>
</div>
</div>
</div>
</div>
</div>
</f:for>
</f:section>
</html>