前にテーブル表を作成しました。
https://neo.astrowave.jp/blog/10184/
テキストの固定部分があったり、セルへのテキストを適用する登録も慣れないと、機能を仕込んだ本人も間違います。
少し複雑かもしれないと思いました。
簡単な表の作成はできないかな。
やっぱり単純なのがいいです。
作成したコードはもちろんAIさんに協力してもらいました。
【設置】メタフィールドを登録する
商品の登録の時に、表のための「メタフィールド」を入力する運用にしたいです。
今回は以下の2つです。
- シンプル表のタイトル
- シンプル表の数値
以下のようにシンプルに作成したいです。
作成方法は前回と同じです。
「定義を追加する」ボタンを押して登録をしていきます。
liquidのコードで使用します「ネームスペースとキー」は、以下のようにしました。
タイトルはsimple_tableにしました。半角英字で好きな文言にします。
数値はsimple_table_sizeに。
商品管理のページへ行ってください。
作成したメタフィールドが、商品管理にできているハズです。
以下のように登録しました。
そうすると以下のようにテーブル表が。
【共有】表のためのliquidのコードとcss
「カートボタン」のソースコードがあるliquidファイルを編集します。
「カートボタン」のソースがある場所の辺りで、以下のコードを貼り付けてください。
■ product-template.liquid
{% #### simple--表の育成 #### %}
{% if product.metafields.custom.simple_table and product.metafields.custom.simple_table_size %}
<div class="size-table-div-simple">
<div class="size-table-row header">
{% assign size_titles = product.metafields.custom.simple_table.value | remove: '"' | remove: '[' | remove: ']' | split: ',' %}
{% for title in size_titles %}
<div class="size-table-cell">{{ title | strip }}</div>
{% endfor %}
</div>
{% assign sizes_list = product.metafields.custom.simple_table_size.value | remove: '"' | remove: '[' | remove: ']' | split: ' ' %}
{% assign rows = sizes_list[0] | split: ',' %}
{% for j in (0..rows.size) %}
<div class="size-table-row">
{% for i in (0..size_titles.size) %}
{% assign values = sizes_list[i] | split: ',' %}
{% if j < values.size %}
<div class="size-table-cell">{{ values[j] }}</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}※こんな感じでHTML出力してほしい。
<div class="size-table-div-simple">
<div class="size-table-row header">
<div class="size-table-cell">US</div>
<div class="size-table-cell">UK</div>
<div class="size-table-cell">JP</div>
<div class="size-table-cell">EU</div>
</div>
<div class="size-table-row">
<div class="size-table-cell">4</div>
<div class="size-table-cell">5</div>
<div class="size-table-cell">6</div>
<div class="size-table-cell">7</div>
</div>
<div class="size-table-row">
<div class="size-table-cell">3.5</div>
<div class="size-table-cell">4.5</div>
<div class="size-table-cell">5.5</div>
<div class="size-table-cell">6.5</div>
</div>
<div class="size-table-row">
<div class="size-table-cell">22</div>
<div class="size-table-cell">23</div>
<div class="size-table-cell">24</div>
<div class="size-table-cell">25</div>
</div>
<!-- 追加の行をここに挿入していきたい -->
</div>
テーブルの構造としてどうなのかな？
表としての表示の見た目が合っていれば合格でいいのでわぁ。
読み取りのSEO的な部分では、疑問が残ります。
■css
.size-table-div-simple {
display: table;
width: 100%;
border-collapse: collapse;
border-top: 1px solid #6c6c6c;
border-bottom: 1px solid #6c6c6c;
table-layout: fixed; /* 均等割にするために追加 */
}
.size-table-div-simple .size-table-row {
display: table-row;
}
.size-table-div-simple .size-table-cell {
display: table-cell;
padding: 2px;
text-align: center;
border-right: 1px solid #6c6c6c;
border-left: 1px solid #6c6c6c;
margin: 0;
box-sizing: border-box;
}
.size-table-div-simple .size-table-row.header {
background-color: #E6E6E6;
border-bottom: 1px solid #6c6c6c;
}
.size-table-div-simple .size-table-row.header .size-table-cell {
font-weight: 400;
}
.size-table-div-simple .size-table-row:hover {
background-color: #E6E6E6;
}
.size-table-div-simple .size-table-cell:hover {
}
.size-table-div-simple .size-table-row.header .size-table-cell {
padding: 5px;
}シンプル表の専用cssです。
以上になります。メモでした。