layout de producto

_data/layouts/cart.yml

@@ -156,6 +156,30 @@ remove:
   default:
     es: 'Quitar del carrito'
     en: 'Remove product'
+length_unit:
+  type: 'string'
+  required: true
+  label:
+    es: 'Unidad de medida de los productos'
+    en: 'Measurement unit for products'
+  help:
+    es: ''
+    en: ''
+  default:
+    es: 'mm'
+    en: 'mm'
+weight_unit:
+  type: 'string'
+  required: true
+  label:
+    es: 'Unidad de medida para el peso de los productos'
+    en: 'Measurement unit for products weight'
+  help:
+    es: ''
+    en: ''
+  default:
+    es: 'gr'
+    en: 'gr'
 back:
   type: 'string'
   required: true

_data/layouts/product.yml

@@ -94,8 +94,8 @@ width:
     es: 'Ancho'
     en: 'Width'
   help:
-    es: 'En milímetros'
+    es: 'En la unidad de medida que configuraste en el carrito'
-    en: 'In millimeters'
+    en: 'In measurement units configured in cart'
 height:
   type: 'number'
   writable: 'once'
@@ -103,17 +103,17 @@ height:
     es: 'Alto'
     en: 'Height'
   help:
-    es: 'En milímetros'
+    es: 'En la unidad de medida que configuraste en el carrito'
-    en: 'In millimeters'
+    en: 'In measurement units configured in cart'
 depth:
   type: 'number'
   writable: 'once'
   label:
-    es: 'Profundidad (Lomo)'
+    es: 'Profundidad'
     en: 'Depth'
   help:
-    es: 'En milímetros'
+    es: 'En la unidad de medida que configuraste en el carrito'
-    en: 'In millimeters'
+    en: 'In measurement units configured in cart'
 weight:
   type: 'number'
   required: true

_layouts/product.html

@@ -0,0 +1,110 @@
+---
+layout: default
+---
+
+<article
+  itemscope itemtype="http://schema.org/Product"
+  class="w-100 pb-5 h-entry">
+  <div class="m-auto row no-gutters justify-content-center">
+    <div class="col-10 col-lg-6">
+      <picture>
+        <img
+          itemprop="image"
+          class="img-fluid"
+          src="{{ page.image.path | thumbnail: 316 }}"
+          alt="{{ page.image.description | default: page.title }}" />
+      </picture>
+
+      <div class="w-lg-50">
+        <h4 class="sr-only">{{ site.i18n.libro.ficha }}</h4>
+
+        <ul class="border-bottom border-tl list-unstyled pt-5 gray-600">
+          <li>
+            <time
+              class="dt-published"
+              itemprop="datePublished"
+              datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_local: '%B %Y' }}</time>
+          </li>
+
+          {% if page.width > 0 %}
+            <li itemprop="width" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.width.label[site.lang }}</span>
+              <span itemprop="value">{{ page.width }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.height > 0 %}
+            <li itemprop="height" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.height.label[site.lang }}</span>
+              <span itemprop="value">{{ page.height }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.depth > 0 %}
+            <li itemprop="depth" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.depth.label[site.lang }}</span>
+              <span itemprop="value">{{ page.depth }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.weight > 0 %}
+            <li itemprop="weight" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.weight.label[site.lang }}</span>
+              <span itemprop="value">{{ page.weight }}</span>
+              <span itemprop="unitText">{{ site.cart.weight_unit | default: site.data.layouts.cart.weight_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+        </ul>
+
+        <div itemprop="offers">
+          <div
+            class="d-flex align-items-center justify-content-between mb-3 ml-1"
+            {% include_cached cart_controller.html product=page %}
+            itemscope itemtype="https://schema.org/Offer">
+
+            <meta itemprop="sku" content="{{ page.sku }}" />
+            <meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
+            <meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#Mail" />
+
+            {% if page.in_stock %}
+              <meta itemprop="availability" content="https://schema.org/InStock" />
+            {% else %}
+              <meta itemprop="availability" content="https://schema.org/OutOfStock" />
+            {% endif %}
+
+            <p>
+              <span itemprop="price" data-stock-price>{{ page.price | floor }}</span>
+              <span itemprop="priceCurrency" data-stock-currency>{{ site.cart.currency }}</span>
+            </p>
+
+            <button
+              data-action="cart#add"
+              {{ page.in_stock | value_if: 'disabled' }}
+              class="btn btn-primary btn-block">
+              <span class="hide-when-disabled">{{ site.cart.add }}</span>
+              <span class="show-when-disabled">{{ site.cart.out_of_stock | default: site.data.layouts.cart.out_of_stock.default[site.locale] }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-10 col-lg-6 black mt-5 mt-lg-0">
+      <header>
+        <h1 class="p-name" itemprop="name headline">{{ page.title }}</h1>
+        <p class="lead p-summary" itemprop="description">{{ page.description }}</p>
+      </header>
+
+      <div class="font-weight-light gray-600 lead text-md-justify hyphens-md e-content" itemprop="abstract">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+
+  <span hidden itemprop="identifier">{{ page.uuid }}</span>
+  <a hidden class="u-url" itemprop="url" href="{{ page.url | absolute_url }}">{{ page.url | absolute_url }}</a>
+  <meta itemprop="keywords" content="{{ page.categories | join: ',' }}{% unless page.categories == empty %},{% endunless %}{{ page.tags | join: ',' }}"/>
+</article>

_sass/helpers.scss

@@ -37,6 +37,18 @@ $directions: (top, right, bottom, left);
       &::-webkit-scrollbar { display: none; }
     }
 
+    :enabled {
+      .show-when-disabled#{$infix} {
+        display: none !important;
+      }
+    }
+
+    :disabled {
+      .hide-when-disabled#{$infix} {
+        display: none !important;
+      }
+    }
+
 /// Un elemento cuadrado
 ///
 /// @example html