先日、CS-Cartにアップロードされた商品の画像をRetina対応してほしいと相談されました。小さいサムネイル画像以外はひととおり対応してほしいという事で、まずは対象テンプレートの洗い出しをしてみました。

調査の結果、以下のテンプレートを編集すればひととおり対応できそうだという事が判りました。

対象テンプレート

商品ページ
design/themes/responsive/templates/views/products/components/product_images.tpl

Topページ、ほしいものリスト、カテゴリー（マルチコラム）
design/themes/responsive/templates/views/products/components/product_icon.tpl

カテゴリー（オプションなし）
design/themes/responsive/templates/blocks/list_templates/products_list.tpl

カートページ
design/themes/responsive/templates/views/checkout/components/cart_items.tpl

比較リスト
design/themes/responsive/templates/views/product_features/compare.tpl

テンプレートのオーバーライド

上記のテンプレートをそのまま編集してしまうと、CS-Cartのアップデートをした際にファイルが上書きされてしまい対応した内容が消えてしまうので、可能であればアドオン別にオーバーライドする事をお勧めします。

CS-Cartにはmy_changesというアドオンがデフォルトで入っているので、今回はこのアドオン内にテンプレートをオーバーライドしましょう。

まずは上記のテンプレートを以下のファイルにコピーしてください。

商品ページ
public/market/design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_images.tpl

Topページ、ほしいものリスト、カテゴリー（マルチコラム）
design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_icon.tpl

カテゴリー（オプションなし）
design/themes/responsive/templates/addons/my_changes/overrides/blocks/list_templates/products_list.tpl

カートページ
design/themes/responsive/templates/addons/my_changes/overrides/views/checkout/components/cart_items.tpl

比較リスト
design/themes/responsive/templates/addons/my_changes/overrides/views/product_features/compare.tpl

image.tplのオーバーライド

CS-Cartの画像はpublic/market/design/themes/responsive/templates/common/image.tplというテンプレートによってレンダリングされているので、こちらもアップデートした際に上書きされないようにコピーをしてオーバーライドします。

コピー先：design/themes/responsive/templates/addons/my_changes/overrides/common/image.tpl

v4.3.10_JPであれば、22行目に以下のコードを追加してください。

    {if $need_srcset}
        {** 画像のRetina対応をするために、srcsetを設定する。 **}
        <img class="ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} {if $generate_image}data-ca-image-path="{$image_data.image_path}"{/if} {if $lazy_load}data-{/if}src="{if $generate_image}{$images_dir}/icons/spacer.gif{else}{$image_data.detailed_image_path}{/if}" 
        srcset="{if $generate_image}{$images_dir}/icons/spacer.gif 1x, {$images_dir}/icons/spacer.gif 2x{else}{$image_data.image_path} 1x, {$image_data.detailed_image_path} 2x{/if}" 
        alt="{$image_data.alt}" title="{$image_data.alt}" {if $image_onclick}onclick="{$image_onclick}"{/if} />
    {else}
        {** 小さいサムネイル画像はsrcsetを設定しない。 **}
        <img class="ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} {if $generate_image}data-ca-image-path="{$image_data.image_path}"{/if} {if $lazy_load}data-{/if}src="{if $generate_image}{$images_dir}/icons/spacer.gif{else}{$image_data.image_path}{/if}" alt="{$image_data.alt}" title="{$image_data.alt}" {if $image_onclick}onclick="{$image_onclick}"{/if} />
    {/if}

上記のコードでは、need_srcsetという変数が渡された際に<img>にsrcsetを設定されます。

※この例では、x1にサムネイル画像を、x2にオリジナル画像を指定しています。

need_srcset=trueをセット

後はオーバーライドしたテンプレートの該当箇所に、need_srcset=trueと追加するだけです。

商品ページ
public/market/design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_images.tpl [v4.3.10_JP, 20行目]

{include file="common/image.tpl" images=$image_pair link_class="cm-image-previewer hidden" obj_id="`$preview_id`_`$img_id`" image_width=$image_width image_height=$image_height need_srcset=true image_id="preview[product_images_`$preview_id`]"}

Topページ、ほしいものリスト、カテゴリー（マルチコラム）
design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_icon.tpl [v4.3.10_JP, 12行目、28行目]

{include file="common/image.tpl" obj_id=$obj_id_prefix images=$product.main_pair image_width=$settings.Thumbnails.product_lists_thumbnail_width image_height=$settings.Thumbnails.product_lists_thumbnail_height need_srcset=true}

 {include file="common/image.tpl" no_ids=true images=$image_pair image_width=$settings.Thumbnails.product_lists_thumbnail_width image_height=$settings.Thumbnails.product_lists_thumbnail_height need_srcset=true lazy_load=true}

カテゴリー（オプションなし）
design/themes/responsive/templates/addons/my_changes/overrides/blocks/list_templates/products_list.tpl [v4.3.10_JP, 40行目]

{include file="common/image.tpl" image_width=$settings.Thumbnails.product_lists_thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair image_height=$settings.Thumbnails.product_lists_thumbnail_height need_srcset=true}

カートページ
design/themes/responsive/templates/addons/my_changes/overrides/views/checkout/components/cart_items.tpl [v4.3.10_JP, 36行目]

{include file="common/image.tpl" obj_id=$key images=$product.main_pair image_width=$settings.Thumbnails.product_cart_thumbnail_width image_height=$settings.Thumbnails.product_cart_thumbnail_height need_srcset=true}</a>

比較リスト
design/themes/responsive/templates/addons/my_changes/overrides/views/product_features/compare.tpl [v4.3.10_JP, 24行目]

<div class="ty-compare-products__img"><a href="{"products.view?product_id=`$product.product_id`"|fn_url}">{include file="common/image.tpl" image_width=$settings.Thumbnails.product_lists_thumbnail_width image_height=$settings.Thumbnails.product_lists_thumbnail_height need_srcset=true obj_id=$product.product_id images=$product.main_pair no_ids=true}</a></div>