Product Item

<article class="product-item {% if on_sale %}has-discount{% endif %}">
    <product-item-wrapper v-slot="{ showExtra, toggleExtra }">
        <a href="#" class="product-item__thumb">
            <img src="https://placehold.co/425x405" alt="Product Name">
            {% if on_sale %}
                <span class="product-item__promo">55% de descuento</span>
            {% endif %}
            <img src="{{ '/assets/img/product-badge.png' | path }}" alt="" class="product-item__badge">
        </a>
        <div class="product-item__content">
        <div class="product-item__content-main">
            <h3 class="title">
                <a href="#">{{ name }}</a>
            </h3>
            <span class="product-item__price-full">{{ full_price }}</span>
            {% if on_sale %}
                <span class="product-item__price-discount">{{ discount_price }}</span>
            {% endif %}
            <a href="#" class="product-item__add-to-cart button">Agregar al carrito</a>
        </div>
        <button class="product-item__extra-toggle button button--link" @click="toggleExtra">
            <span v-if="!showExtra">Ver Descripción +</span>
            <span v-else>Ocultar Descripción -</span>
        </button>
        <div v-show="showExtra" class="product-item__content-extra">
            <product-rating :rating="{{ rating }}">
                <p>(1,025 personas)</p>
            </product-rating>
            <div class="content">
                <b>Un descanso superior</b>
                <ul>
                    <li>Cobertura con iones de plata antimicrobianos</li>
                    <li>Tela tejido de punto higroscópica</li>
                    <li>Doble panel de resortes Pocket (independencia de movimiento)</li>
                    <li>Capa de Zebra 35 HR</li>
                    <li>Marco de Zebra 35 HD</li>
                    <li>Garantía del colchón 10 años</li>
                </ul>
            </div>
        </div>
    </div>
    </product-item-wrapper>
</article>