components/product_item#

Thẻ sản phẩm dùng trong mọi lưới sản phẩm: ảnh, tên, giá gạch ngang và nút thêm vào giỏ.

• Tệp giao diện: components/product_item.html

Biến đầu vào#

Component đọc biến có sẵn tại chỗ chèn. Những biến dưới đây phải tồn tại, nếu không component sẽ dựng ra khối rỗng.

Cách chèn#

{% for product in featured_products %}
  {% include 'components/product_item' %}
{% endfor %}

Đường dẫn trong {% include %} tính từ gốc bộ giao diện và không có đuôi .html.

Mã đầy đủ#

Toàn bộ tệp components/product_item.html của bộ giao diện mặc định.

{% comment %}
  Sản phẩm dùng đường dẫn riêng của chính nó: {{ product.url }}.
  Khi product.url trống (sản phẩm chưa có đường dẫn), hiển thị dạng chữ
  thay vì tạo liên kết hỏng.
{% endcomment %}
<div class="product-card">
  {% if product.url %}<a href="{{ product.url }}" class="product-card__img-link">{% else %}<span class="product-card__img-link">{% endif %}
    {% if product.cover_image_url %}
      <img src="{{ product.cover_image_url }}" alt="{{ product.title }}"
           class="product-card__img" loading="lazy">
    {% else %}
      <div class="product-card__img-placeholder">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1">
          <rect x="3" y="3" width="18" height="18" rx="2"/>
          <circle cx="8.5" cy="8.5" r="1.5"/>
          <path d="m21 15-5-5L5 21"/>
        </svg>
      </div>
    {% endif %}
    {% if product.compare_at_price %}
      <span class="product-card__badge">Sale</span>
    {% endif %}
  {% if product.url %}</a>{% else %}</span>{% endif %}
  <div class="product-card__body">
    {% if product.url %}
      <a href="{{ product.url }}" class="product-card__name">{{ product.title }}</a>
    {% else %}
      <span class="product-card__name">{{ product.title }}</span>
    {% endif %}
    <div class="product-card__price">
      {% if product.compare_at_price %}
        <span class="price">{{ product.price | money }}</span>
        <span class="price price--original">{{ product.compare_at_price | money }}</span>
      {% else %}
        <span class="price">{{ product.price | money }}</span>
      {% endif %}
    </div>
    <button type="button" class="btn btn--outline btn--sm btn--block quick-add"
            data-product-slug="{{ product.slug }}">
      Thêm vào giỏ
    </button>
  </div>
</div>

Dùng ở#

Trường được dùng#

Component chỉ đọc những trường này của Product. Sửa component để đọc thêm trường khác thì nhớ cập nhật catalog/components.yaml.

• product.url
• product.cover_image_url
• product.title
• product.price
• product.compare_at_price
• product.slug