youtube等をiframeで入れ込んだ時にレスポンシブ対応にする方法

CSS

参考：http://mae.chab.in/archives/2527
youtubeでなくてもいいけど、基本iframeタグは幅と高さを指定する。

<iframe width="500" height="300" ...></iframe

ただしこのままだと、500px×300pxがスマホでも確保されるため、横スクロールが発生することになる。
その対応。
　
HTML

<div class="wrap_youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HIOooL-vXeQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS

@media screen and (max-width: 560px) {
  .wrap_youtube {
    position: relative;
    width: 100%;
    padding: calc(315 / 560 * 100%) 0px 0px 0px;
  }
  .wrap_youtube iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%!important;
    height: 100%!important;
  }
}

paddingの算出にcalcを使うので、CSS3限定になるけれど、まぁ対応ブラウザは最新だけでいいや、という人ならこれで問題ないかと。

アメブロにiframeタグを入れる

その他

禁止タグとして設定されているため、記事本文等にiframeタグは使えない。それを使えるようにする方法。
参照　http://ameblo.jp/wazameba/entry-10736090264.html
　
１．フリープラグインに以下のソースを記述する。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>!function(e){e(function(){e(".createTag").each(function(a,c){var r=e(c).html();r=r.replace(/[\r\n]/g,""),r=r.replace(/(^.*?\<\!\-\-\s*|\s*\-\-\>.*?$)/g,""),r=r.replace(/\{\}/g,""),r=r.replace(/\{.\}/g,""),r=r.replace(/\{[^\*].*?[^\*]\}/g,""),r=r.replace(/\{\*/g,"{").replace(/\*\}/g,"}"),r=r.replace(/\<\[/g,"<").replace(/\]\>/g,">"),e(c).empty(),e(c).append(r)})})}(jQuery);</script>

　
２．本文に以下のようにタグを入れる

<div class="createTag"><!--<[iframe src="http://www.yahoo.co.jp" width="420" height="500" frameborder="0" style="border:none;"]><[/iframe]>--></div>

　
要は、タグを別の形に変換して、それをスクリプトで書き換えるという方法。
使用テンプレートによってはjQueryを使用しておらず、スクリプトが動かないという罠。jQueryへのリンクをはっているテンプレートだと上2行は不要です。
なんで動かないかわからず、半日潰した…。

flotr2.jsカスタマイズ

JavaScript

HTML5のcanvas機能（？）を使って、自動でグラフを作成してくれるスクリプト。
必要にかられて目盛りのカスタマイズをしたのでメモ。
正確には、レーダーチャートの目盛りがラベルの文字と重なってたので、目盛りの文字を気持ち下にして重ならないようにした。
6415行目からの

        Flotr.drawText(
          ctx, tick.label,
          isX ? x : 3,
          isX ? y : -(axis.ticks[i].v / axis.max) * (radius - options.fontSize) ,
          style
        );

が目盛りの書き出しになるっぽい。

税込み価格と税抜き価格を並列表記する（v2.13）

EC-CUBE

参考：http://www.terastella.com/%E3%80%90ec-cube%E3%80%91%E3%81%A7%E7%A8%8E%E8%BE%BC%E3%81%A8%E7%A8%8E%E5%88%A5%E3%81%AE%E5%80%A4%E6%AE%B5%E3%82%92%E5%90%8C%E6%99%82%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82.html

/data/class/SC_Product.phpの293行目以降

// 価格
// TODO: ここでprice01,price02を税込みにしてよいのか？ _inctax を付けるべき？要検証
$arrClassCats2['price01']
  = strlen($arrProductsClass['price01'])
  ? number_format(SC_Helper_TaxRule_Ex::sfCalcIncTax($arrProductsClass['price01'], $productId, $arrProductsClass['product_class_id']))
  : '';

$arrClassCats2['price02']
  = strlen($arrProductsClass['price02'])
  ? number_format(SC_Helper_TaxRule_Ex::sfCalcIncTax($arrProductsClass['price02'], $productId, $arrProductsClass['product_class_id']))
  : '';

の部分に

//  税抜価格を表示させるために追加
$arrClassCats2['price011']
  = strlen($arrProductsClass['price01'])
  ? number_format($arrProductsClass['price01'])
  : '';
$arrClassCats2['price021']
  = strlen($arrProductsClass['price02'])
  ? number_format($arrProductsClass['price02'])
  : '';

を追加。
次に、js/eccube.jsの502行目、販売価格のところを

var $price02_default = $form.find('[id^=price02_default]');
var $price02_dynamic = $form.find('[id^=price02_dynamic]');
var $price021_default = $form.find('[id^=price021_default]');
var $price021_dynamic = $form.find('[id^=price021_dynamic]');
if (classcat2 && typeof classcat2.price02 !== 'undefined' && String(classcat2.price02).length >= 1) {
  $price02_dynamic.text(classcat2.price02).show();
  $price021_dynamic.text(classcat2.price021).show();
  $price02_default.hide();
  $price021_default.hide();
} else {
  $price02_dynamic.hide();
  $price02_default.show();
  $price021_dynamic.hide();
  $price021_default.show();
}

に変更。
最後に、/data/Smarty/templates/default/products/detail.tplを

<!--★販売価格★-->
  <dl class="sale_price">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：</dt>
    <dd class="price">
      <span id="price02_default"><!--{strip}-->
        <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
          <!--{$arrProduct.price02_min_inctax|number_format}-->
        <!--{else}-->
          <!--{$arrProduct.price02_min_inctax|number_format}-->〜<!--{$arrProduct.price02_max_inctax|number_format}-->
        <!--{/if}-->
      <!--{/strip}--></span><span id="price02_dynamic"></span>
      円（税抜：<span id="price021_default"><!--{$arrProduct.price02_min|number_format}--></span><span id="price021_dynamic"></span>円）
  </dd>
</dl>

みたいな感じで。

管理画面での会員検索カスタマイズ（2.13）

EC-CUBE

A）検索条件設定で検索条件を非表示にする（職業での検索を非表示にする場合）
１．data/class/helper/SC_Helper_Customer.phpの565行目以降、会員検索パラメーター（管理画面用）内の

$objFormParam->addParam('職業', 'search_job', INT_LEN, 'n', array('MAX_LENGTH_CHECK'));

をコメントアウトする
　
２．data/class/SC_CustomerList.php内

if (!isset($this->arrSql['search_job'])) $this->arrSql['search_job'] = '';

から始まる職業による検索部分をコメントアウトする。
非表示にする項目によっては、この後のエラーチェック部分も非表示にする。
　
３．data/Smarty/templates/admin/adminparts/form_customer_search.php内が実際に表示される部分なので

<!--{if false}-->
<!--{/if}-->

でコメントアウトする。
　
　
B)検索条件設定に検索条件を追加する（会社名での検索を追加する場合）
１．data/class/helper/SC_Helper_Customer.phpの565行目以降、会員検索パラメーター（管理画面用）内に

$objFormParam->addParam('会社名', 'search_company_name', STEXT_LEN, 'aKV', array('SPTAB_CHECK', 'MAX_LENGTH_CHECK'));

を追加する。
　
２．data/class/SC_CustomerList.php内に

if (!isset($this->arrSql['search_company_name'])) $this->arrSql['search_company_name'] = '';
if (strlen($this->arrSql['search_company_name']) > 0) {
    $this->setWhere('company_name LIKE ?');
    $searchCompany = $this->addSearchStr($this->arrSql['search_company_name']);
    $this->arrVal[] = preg_replace('/[ 　]+/u','',$searchCompany);
}

を追加する。最後のreplaceは正直いらないと思うけれども、部分一致用に名前での検索を参考にしたのでこうなった。
　
３．data/Smarty/templates/admin/adminparts/form_customer_search.phpに

<tr>
	<th>会社名</th>
	<td colspan="3">
        <!--{assign var=key value="search_company_name"}-->
        <!--{if $arrErr[$key]}--><span class="attention"><!--{$arrErr[$key]}--></span><!--{/if}-->
        <input type="text" name="<!--{$key}-->" maxlength="<!--{$arrForm[$key].length}-->" value="<!--{$arrForm[$key].value|h}-->" size="30" class="box30" <!--{if $arrErr[$key]}--><!--{sfSetErrorStyle}--><!--{/if}--> />
    </td>
</tr>

追加。

メールテンプレートを増やす

EC-CUBE

発送完了メールとか。
参考：http://notes25.net/other/memo/ec-cube%E3%81%A7%E7%99%BA%E9%80%81%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%8B%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99/

まず、システム設定のマスターデータ管理から、mtb_mail_templateを選択。IDを追加する。
値は「発送完了メール」とかなんとか。
次に、同じくマスターデータ管理のmtb_mail_tpl_pathを選択。使用するテンプレートファイルを指定する。
動的なデータを引っ張り出すためのテンプレートファイルと考えていい…のか？
発送完了メールを想定した場合、発送した商品＝注文した商品のデータが必要と考えて、order_mail.tplでいいかもしれない。
最後に、基本情報管理のメール設定から先ほど作成したメールテンプレートを指定、タイトルやヘッダー・フッターを登録する。
以上。

会員登録フォームのカスタマイズ（2.13）

EC-CUBE

参考：http://www.s-oj.com/ec-business/ec-cube-membership-distributor/
１．項目を新規追加の場合、PHPMyAdminのSQL文に以下を追加、実行する

ALTER TABLE dtb_customer ADD shop_name text; -- 店舗名

店舗名（shop_name）を追加する場合。
　
２．テンプレートファイルを修正する
・data/Smarty/templates/default/frontparts/form_personal_input.tpl
・data/Smarty/templates/default/frontparts/form_personal_confirm.tpl
・data/Smarty/templates/sphone/frontparts/form_personal_input.tpl
・data/Smarty/templates/sphone/frontparts/form_personal_confirm.tpl
・data/Smarty/templates/default/admin/customer/edit.tpl
・data/Smarty/templates/default/admin/customer/edit_confirm.tpl
・data/Smarty/templates/default/shopping/confirm.tpl
・data/Smarty/templates/sphone/shopping/confirm.tpl
・data/Smarty/templates/default/mail_templates/order_mail.tpl
・data/Smarty/templates/sphone/mail_templates/order_mail.tpl
テンプレートは基本PCとスマートフォン両方を修正すると想定。
なお、テンプレートファイルから項目を削除する場合は、

<!--{if false}-->
<!--{/if}-->

で囲ってコメントアウトする。
　
３．クラスファイルを修正する
data/class/helper/SC_Helper_Customer.phpの386行目以降

public function sfCustomerCommonParam(&$objFormParam, $prefix = '')

から始まる付近を修正。
おおむねこんな感じですかねー。