sutty-base-jekyll-theme/_includes/donacion.html
2021-10-27 16:12:18 -03:00

125 lines
4.9 KiB
HTML

{% comment %}
Traer la donación pasada como parámetro o la que se haya establecido por
defecto para el layout correspondiente.
product = producto
page = post que incluye esta donación
icon = ícono del botón
class = clases extra para el botón
boton = texto opcional para el botón
{% endcomment %}
{%- assign product = include.product | default: include.page -%}
{%- assign donacion = include.page.donacion | default: product.donacion -%}
<input data-controller="open" data-action="donacion" type="checkbox" id="donacion" class="d_toggler sr-only">
<label class="btn-block" for="donacion">
<span class="btn {{ include.class }} btn-block">
{{ include.boton | default: donacion.boton }}
{% if include.icon %}
<i class="{{ include.icon }}"></i>
{% endif %}
</span>
<div class="telon d_share-box"></div>
</label>
<form
data-pay-what-you-can-target="form"
{% include_cached pay_what_you_can_controller.html product=product url=include.page.pdf.path %}
style="z-index: 1011"
class="d_share-box pointer-event-none d_toggled d-flex align-items-center justify-content-center"
itemscope
itemtype="https://schema.org/Offer">
<meta itemprop="sku" content="{{ product.sku }}" />
<meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#DirectDownload" />
<meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
<div class="box inside background-white pointer-event-auto row no-gutters align-items-center justify-content-center p-5">
<div class="row">
<div class="col-md-9 black font-weight-light lead text-md-justify hyphens-md e-content">
{{ donacion.content | markdownify }}
</div>
<div class="col-md-3 d-flex justify-content-center">
{% if include.page.image.path %}
<picture>
<source srcset="{{ include.page.image.path | thumbnail: nil, 370 }}" media="(max-width: 767px)" />
<img class="cover shadow w-200px" src="{{ include.page.image.path | thumbnail: nil, 300 }}" loading="lazy" />
</picture>
{% else %}
{% include_cached logo_horizontal.svg %}
{% endif %}
</div>
<div class="col-md-3 mb-3 mb-md-0">
<h2>{{ site.i18n.donacion.monto }}</h2>
<label class="sr-only" for="price">{{ site.i18n.donacion.monto }}</label>
<input id="price" name="price" type="number" class="form-control" min="1" value="1" data-name="price" data-action="pay-what-you-can#store" required/>
</div>
<div class="col-md-3 mb-3 mb-md-0">
<div class="row">
<div class="col-6">
<input id="currency-ars" type="radio" class="sr-only" name="currency" value="ARS" data-name="currency" data-action="pay-what-you-can#store" required/>
<label for="currency-ars" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
<span class="btn border mb-3">ARS</span>
{% include mp-logo.svg %}
</label>
</div>
<div class="col-6">
<input id="currency-usd" type="radio" class="sr-only" name="currency" value="USD" data-name="currency" data-action="pay-what-you-can#store" required/>
<label for="currency-usd" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
<span class="btn border mb-3">USD</span>
{% include pp-logo.svg %}
</label>
</div>
<div class="col-12 text-center">
{% comment %}
Este input invisible es para que Bootstrap pueda mostrar el
error si querés mandar el formulario sin elegir una moneda.
{% endcomment %}
<input type="radio" class="d-none" name="currency" value="" />
<div class="invalid-feedback">
{{ site.i18n.donacion.currency }}
</div>
<p data-controller="cart-paypal-confirmation"></p>
</div>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-block mb-2" data-action="pay-what-you-can#pay">
<span class="hide-when-disabled">{{ donacion.boton }}</span>
<span class="show-when-disabled">
<span class="sr-only">{{ site.i18n.donacion.espera }}</span>
<i class="fa fa-fw fa-spinner fa-spin"></i>
</span>
</button>
{% if include.page.pdf.path %}
<div class="d-flex align-items-center justify-content-between">
<a
download
href="{{ include.page.pdf.path | uri_escape }}"
class="btn btn-transparent border black btn-block">
{{ site.i18n.libro.download }}
</a>
</div>
{% endif %}
</div>
<div class="col-md-3"></div>
<div class="col-12">
{{ site.i18n.donacion.medios | markdownify | replace: '<p>', '<p class="mb-0 mt-3"><small>' | replace: '</p>', '</small></p>' }}
</div>
</div>
</div>
</form>