.-.-.-.-.-

{% extends 'shop/_private/layouts' %}

{# @var product \craft\commerce\elements\Product #}

{% block main %}
  
  <div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 p-3">
        {% include "shop/_private/images/placeholder.svg" with {
          class: 'w-full h-auto rounded',
          width: 625,
          height: 300
        } %}
      </div>
      <div class="w-full md:w-1/2 p-3">
        <h1 class="text-3xl block sm:inline">
          {{- product.defaultVariant.title -}}
        </h1>

<h4 class="text-gray-500 mt-3">
          {{- 'Description'|t -}}
        </h4>

<p>
          {{ 'This is a pretend product description, placeholdering here for you to swap with something better.'|t }}
        </p>

<h4 class="text-gray-500 mt-3">
          {{- 'Variants'|t -}}
        </h4>

<form method="post">
          {{ csrfInput() }}
          {{ actionInput('commerce/cart/update-cart') }}
          {{ successMessageInput('{product} added to cart.'|t({
            product: product.title
          })) }}
          <div>
            {% for variant in product.variants %}
              {{ hiddenInput('purchasables[' ~ loop.index ~ '][id]', variant.id) }}
              <div class="flex items-center justify-between w-full">
                <div class="w-1/2">
                  <span class="inline-block mr-1">{{ variant.title }}</span>
                  <span class="inline-block font-mono text-xs text-gray-500">{{ variant.sku }}</span>
                </div>
                <div class="pl-4 text-right w-1/4">
                  {% if variant.onSale %}
                    <del class="text-sm text-gray-500">{{ variant.priceAsCurrency }}</del>
                    <br>{{ variant.salePriceAsCurrency }}
                  {% else %}
                    {{ variant.priceAsCurrency }}
                  {% endif %}
                </div>
                <div class="pl-4 w-1/4">
                  {{ input('number', 'purchasables[' ~ loop.index ~ '][qty]', product.variants|length == 1 ? 1 : 0, {
                    step: 1,
                    min: 1,
                    class: ['w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
                  }) }}
                </div>
              </div>
            {% endfor %}
            <div class="mt-3 pt-3 border-t border-gray-300 text-right">
              {{ tag('button', {
                type: 'submit',
                class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
                text: 'Add to cart'|t
              }) }}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

/srv/users/craft4/apps/craft4-newsite-space/templates/shop/products/./_product.twig