概要

設定方法

{%- unless product.has_only_default_variant -%}
	<h3 class="variant-inventory-quantity-title">在庫数</h3>
  {%- assign option_1st_previous = '' -%} 
  {%- assign option_2nd_previous = '' -%} 
  <table class="variant-inventory-quantity">
    <thead>
      <tr>
        {%- for option in product.options_with_values -%}
        <td>{{ option.name }}</td>
        {%- endfor -%}
        <td>在庫数</td>
      </tr>
    <thead>
    <tbody>
    {%- for variant in product.variants -%}
      <tr>
      {%- case product.options_with_values.size -%}
        {%- when 1 -%}
          {% for option in variant.options %}
        <td>{{ option }}</td>
          {% endfor %}
        
        {%- when 2 -%}
          {% for option in variant.options %}
            {%- if forloop.index == 1 -%}
              {%- if option_1st_previous == option -%}
        <td class="blank"></td>
              {%- else -%}
        <td>{{ option }}</td>
                {%- assign option_1st_previous = option -%} 
              {%- endif -%}
            {%- else -%}
        <td>{{ option }}</td>
            {%- endif -%}
          {% endfor %}
          
        {%- when 3 -%}
          {% for option in variant.options %}
            {%- if forloop.index == 1 -%}
              {%- if option_1st_previous == option -%}
        <td class="blank"></td>
              {%- else -%}
        <td>{{ option }}</td>
                {%- assign option_1st_previous = option -%} 
              {%- endif -%}
            {%- elsif forloop.index == 2 -%}
              {%- if option_2nd_previous == option -%}
        <td class="blank"></td>
              {%- else -%}
        <td>{{ option }}</td>
                {%- assign option_2nd_previous = option -%} 
              {%- endif -%}
            {%- else -%}
        <td>{{ option }}</td>
            {%- endif -%}
          {% endfor %}

      {%- endcase -%}
	      {%- if variant.inventory_quantity <= 0 -%}
				<td class="empty">売り切れ</td>
				{%- else -%}
				<td><a href="{{ variant.url }}">{{ variant.inventory_quantity }}</a></td>
				{%- endif -%}
      </tr>
    {%- endfor -%}
  </tbody>
  </table>
  <style>
    .variant-inventory-quantity-title {
      font-size: 13px;
      margin-bottom: 0.5rem;
    }
    .variant-inventory-quantity {
      margin-top: 0;
      width: 100%;
      border-collapse: collapse;
      border-bottom: 1px solid #CCC;
      font-size: 13px;
    }
    .variant-inventory-quantity tr {
    }
    .variant-inventory-quantity td {
      padding: 0.1rem 1rem;
      border: none;
      border-top: 1px solid #CCC;
      border-right: 1px solid #CCC;
      border-left: 1px solid #CCC;
      text-align: center;
    }
    .variant-inventory-quantity td.blank {
      border-top: none;
    }
    .variant-inventory-quantity td.empty {
      color: #CCC;
    }
    .variant-inventory-quantity thead td {
      position: sticky;
      top: 0;
      background-color: #EEE;
      border-bottom: 1px solid #CCC;
    }
  </style>
{%- endunless -%}