必要性はないと思いますが、もしかしてiPad等の場合は、どうなんだろう。
ということで、スマホで詳細画面マトリクス表示をやってみました。
結果:
表示できましたが、表示された画面は、中途半端です。
数量欄が、セルより大きい。「カートに入れる」がやたらと右側にある。
(CSSの継承がらみが解決できていません。)
準備:
(1) EC-CUBE本体の修正
data/Smarty/templates/sphone/products/detail.php
(a) class名称の変更
<!--{if $tpl_classcat_find1}-->
<!--{* changed
<div class="cart_area">
changed *}-->
<div class="classlist">
<!--{* changed *}-->
<dl>
<!--▼規格1-->
(b) class名称の追加(HTML変更のキーになる名称)
<!--{* added *}-->
<div class="cart_area clearfix">
<!--{* added *}-->
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="cart" />
<input type="hidden" name="product_id" value="<!--{$tpl_product_id}-->" />
<input type="hidden" name="product_class_id" value="<!--{$tpl_product_class_id}-->" id="product_class_id" />
<input type="hidden" name="favorite_product_id" value="" />
<!--▼買い物かご-->
.
.
<!--▲買い物かご-->
<!--{if $tpl_login}-->
<!--{if !$is_favorite}-->
<div class="btn_favorite">
<p><a rel="external" href="java script:void(0);" onclick="eccube.addFavoriteSphone(<!--{$arrProduct.product_id|h}-->); return false;" class="btn_sub">お気に入りに追加</a></p>
</div>
<!--{else}-->
<div class="btn_favorite">
<p>お気に入り登録済み</p>
</div>
<!--{/if}-->
<!--{/if}-->
<!--{* added *}-->
</div>
<!--{* added *}-->
</div>
</form>
</section>
<!--詳細ここまで-->
(2) スタイルシート
(a) スマホ用スタイルシートのコピー(とりあえず)
BbDetailMatrixView/media/detailmatrixview_sphone.css(detailmatrixview.cssのコピー)
インストール後は、html/plugin/BbDetailMatrixView/media/detailmatrixview_sphone.css
(b) スマホ用スタイルシートの読み込み
BbDetailMatrixView/templates/header.tpl
「case 2」の時、以下を実行させる。
(htdocs直下でない場合もあるので、ROOT_URLPATHを加えています。)
switch($_SERVER['PHP_SELF']){
case ROOT_URLPATH.'products/detail.php':
echo('<link rel="stylesheet" href="' . ROOT_URLPATH . 'plugin/BbDetailMatrixView/media/detailmatrixview_sphone.css" type="text/css" media="all" />');
break;
default:
}
(3) 適用
BbDetailMatrixView/BbDetailMatrixView.php
「case DEVICE_TYPE_SMARTPHONE」の時、テンプレート名detail_matrix_view_sphone.tpl で変換させる。
(4) テンプレート
BbDetailMatrixView/templates/detail_matrix_view_sphone.tpl(detail_matrix_view.tplのコピー)
「カートに入れる」は、以下に変更
<!--{if $matrixProduct.stock > 0 OR $matrixProduct.stock_unlimited == 1}-->
<div id="cartbtn_default">
<!--{if $tpl_classcat_find1}-->
<a href="java script:void(0)" onclick="matrixProductCartIn('<!--{$matrixProduct.product_class_id}-->','<!--{$matrixProduct.classcategory_id1}-->','<!--{$matrixProduct.classcategory_id2}-->'); return false;" class="btn cartbtn_default">カートに入れる</a>
<!--{else}-->
<a href="java script:void(document.form1.submit())" class="btn cartbtn_default">カートに入れる</a>
<!--{/if}-->
</div>
<div class="attention" id="cartbtn_dynamic"></div>
<!--{else}-->
<div class="cartin_btn">
<div class="attention">申し訳ございませんが、只今品切れ中です。</div>
</div>
<!--{/if}-->