sutty-base-jekyll-theme/_includes/donacion.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>