[eccube3 / twig]urlをフルパスで書く方法

やっとわかった。

何がしたかったか
WEBサイトURLを取得
汎用的な「og:image」の設定
商品画像で「og:image」を設定
おまけ：商品詳細ページでdescription設定

何がしたかったか

つまり、商品詳細ページの「og:image」で商品画像を設置したい。

WEBサイトURLを取得

相対パスばっかり吐き出すからフルパスを作らないといけない。超だるい。まあ、とりあえずこれでトップページのURLが書き出せる。

{# https://hogehoge.com/ #}
{{ url('homepage') }}

書き出されるURLは末尾に「/」がついてる。これが活用するときにすっごい厄介。

ちなみにこれでドメインを書き出せる

{# hogehoge.com #}
{{ app.request.host }}

「http://」とか「https://」とかが付いてないんだよね。これを使うともっとだるい。

汎用的な「og:image」の設定

いい加減、あんまり長く書くとしんどいから記述例を出す。

{# https://hogehoge.com/template/***/img/common/ogp_image.png #}
<meta property="og:image" content="{{ url('homepage')|trim('/') }}{{ app.config.front_urlpath }}/img/common/ogp_image.png" />

これで、テンプレート内のそれ用の画像のフルパスになる。
そのままだと末尾と先頭でスラッシュがかぶっちゃうから「|trim」を噛ませたという話。

商品画像で「og:image」を設定

諸々あわせるとこうなる。

{% if PageLayout.url == "product_detail"  %}
    {% if Product.ProductImage|length > 1 %}
        {% for ProductImage in Product.ProductImage %}
            {% if loop.first %}
<meta property="og:image" content="{{ url('homepage')|trim('/') }}{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}" />
            {% endif %}
        {% endfor %}
    {% elseif Product.ProductImage|length == 1 %}
        {% for ProductImage in Product.ProductImage %}
<meta property="og:image" content="{{ url('homepage')|trim('/') }}{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}" />
        {% endfor %}
    {% else %}
<meta property="og:image" content="{{ url('homepage')|trim('/') }}{{ app.config.front_urlpath }}/img/common/ogp_image.png" />
    {% endif %}
{% else %}
<meta property="og:image" content="{{ url('homepage')|trim('/') }}{{ app.config.front_urlpath }}/img/common/ogp_image.png" />
{% endif %}

ベースは商品詳細ページの画像のところ。
商品詳細ページかどうかで分けて、そうであれば商品画像が複数枚か1枚かで分けて、複数枚であれば最初のやつだけ。1枚だけならそれ。1枚もないのなら汎用のやつ表示。

くっそ長いけどしょうがないね。

おまけ：商品詳細ページでdescription設定

EECCUBE3はデフォでSEO周りが死んでる。商品詳細ページこそ<meta>は仕上げとかないとなのに枠も何もない。仕方ないから商品説明文のところをdescriptionに突っ込むことにする。

{% if PageLayout.url == "product_detail"  %}
<meta name="description" content="{{ Product.description_detail|striptags|replace({"\n":' ', "\r":' '})|slice(0, 120) }}">
<meta property="og:description" content="{{ Product.description_detail|striptags|replace({"\n":' ', "\r":' '})|slice(0, 120) }}">
{% endif %}

まず、ifで商品詳細ページに限定する。

contentの中身は商品紹介文を呼び出して、HTMLタグを全部剥いで、文字列自体の改行も取っ払って、120字以降を削除。

完全じゃないけどまあ、何もしないよりはいいよねって感じ。