[eccube3]【お届け日調整プラグイン for EC-CUBE3】を触る

Reading Time: < 1 minute

メモね。

これ

3.0系|お届け日調整プラグイン for EC-CUBE3|株式会社ブラテック

付随するカレンダー機能が地味に便利。他にカレンダーないからね。

プラグインをインストールするとブロック要素が増える。エリアに突っ込むなりページに直で記述するなりすればカレンダーが表示される。

カレンダーはtableで組まれていて、祝日とか休日にclassを振ってくれてて、cssもblock内で引っ張ってくれてるからカスタマイズが簡単。

テンプレートの修正

ブラウザが補完してくれるから良いんだけどさ、気持ち悪いから直す。

businessday_calendar.twig

106行目のこれを

{% if day|date('w') == 6 %}

1	{% if day\|date('w') == 6 %}

こうする

{% if (day|date('w') == 6) or (loop.last) %}

1	{% if (day\|date('w') == 6) or (loop.last) %}

店休日カレンダーは最後の土曜日まで日が埋まってないと一番最後の「</tr>」が出力されないんですよ。
有料プラグインなのに詰めが甘いっすね。

もうひとつの定休日カレンダーは組み方が違ってて、最後の週が平日で終わってたらちゃんと空欄のtdを作ってて、trもちゃんと閉じてる。中の人違うんですかってくらいしっかり作ってる。不思議ですね。

カレンダーのデザインについて

翌月とか先月への遷移はなく、管理画面で設定した月数が吐き出される様になってる。デザインも簡素。だからそのままだとすごくしんどいんだけどめっちゃ手を入れやすいから、タブにしたりスワイプさせたりを組み込めば良いんじゃないかなって思った。装飾しやすいからすごく助かる。

そういうのを踏まえて、tableのtdをレスポンシブ対応の正方形にする例。

まずtdの中身をspanで囲う。

<td><span>1</span></td>

1	<td><span>1</span></td>

んでこうする

table tr td{
    width: calc(100% / 7);
    position: relative;
}
table tr td::after{
    content: "";
    width: 100%;
    margin-top: 100%;
    display: block;
}
table tr td span{
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

table tr td{

width: calc(100% / 7);

position: relative;

}

table tr td::after{

content: "";

width: 100%;

margin-top: 100%;

display: block;

}

table tr td span{

width: 100%;

height: 100%;

display: inline-flex;

position: absolute;

top: 0;

left: 0;

justify-content: center;

align-items: center;

vertical-align: middle;

}

これは捨てるところがないのでそのまま使うのが良いですね。
margin-top:100%;を変えたら縦横比変えられます。