Blog

EC-CUBE2の送信メールの件名をカスタムしてみた

EC-CUBE 2.13.5のシステムから送信するメールの件名は、通常メールテンプレートの中の”mail_title.tpl”というものが使用されます。

EC-CUBEから送る送信メールの件名を変更したければ、基本的にこの”mail_title.tpl”を編集すればいいわけですが、全ての送信メールの件名が変わるのが、意外と困りもの。

例えば、デフォルトではメールの件名は
【ショップ名】ご注文ありがとうございます云々
という風になっているんですが、

「冒頭のショップ名が長ったらしくてうざいから消したいな、でも注文完了時のメールだけは残しておきたいな」

なんて時に、単に”mail_title.tpl”を編集するだけでは実現できないんですね。

じゃあどうするのかと言いますと、メールを送信するプログラムに手を加えればいい、と。
参考：http://kayakuguri.github.io/blog/2013/12/04/ec-cube-mailtitle/

例に挙げた
「注文完了時のみ件名に店名が入る」
という仕様を実現してみたのが、以下のコード。
SC_Helper_Mail.phpを編集します。

// メール送信処理
$objSendMail = new SC_SendMail_Ex();
$bcc = $arrInfo['email01'];
$from = $arrInfo['email03'];
$error = $arrInfo['email04'];
if($template_id==1){
  $tosubject = "【" . $arrInfo['shop_name'] ."】". $this->sfMakeSubject($tmp_subject, $objMailView);
} else {
  $tosubject = $this->sfMakeSubject($tmp_subject, $objMailView);
}

注文完了時の送信メールだけ件名テンプレートの前にショップ名を追加、それ以外では件名テンプレートのみ読み込む、という仕組みです。
“template_id==1″で、注文完了時の送信メールを指定しています。
なお、モバイル版の注文完了メールは今どき使わないだろうということで省略しました。

なお、事前に件名テンプレートを編集して、ショップ名の記述を消しておきましょう。

あまりかしこくないというか、美しくないやり方のような気もしますが、簡易的な対応ならこれで十分ではないでしょうか。

BLOG
2019年6月10日 (0)

EC-CUBE2で注文時の「その他お問い合わせ」にテキスト挿入

EC-CUBE2.13.5 の注文画面の中に、「その他お問い合わせ」という自由入力欄があります。
そこに、贈答用の注文などでよくある、ラッピングとかのしとかの希望を入力してもらえるように、入力フォーマットを表示させたいと考えました。

該当部分はtextareaタグになっているので、テキストをタグの中に入れればいけるんじゃん？と思ったけど、そうは問屋がおろさない。
確認画面に一度進んでから前の画面に戻った時に、最初から入れておいたテキストが二重に表示されてしまいます。これではちょっと格好悪い。

とはいえ対策は簡単で、「テキストエリアが空かどうか」で分岐してあげれば解決しました。

<textarea>
<!--{if $arrForm[$key].value == ''}-->ここに挿入しておきたいテキストを入力<!--{/if}--><!--{"\n"}--><!--{$arrForm[$key].value|h}-->
</textarea>

これで、確認画面から戻った時にテキストが二重になることはなくなりました。

BLOG
2019年5月27日 (0)

EC-CUBE2の商品画像をレスポンシブなスライダーにする

EC-CUBE 2.13.5の商品詳細ページのメイン画像部分を、レスポンシブに対応したスライドギャラリーにカスタムしようじゃないか、というお話。

要件はこんな感じ。
・レスポンシブ対応
・スマホでの閲覧時、スワイプで切り替え
・PCでの閲覧時、サムネイルクリックで切り替え
・画像の拡大ポップアップはなし

使用したのは、slick.js というプラグイン。
簡単に導入できて多機能でカスタムも容易と評判です。
https://kenwheeler.github.io/slick/

まずは、cssファイルとjsファイルを読み込む記述を追加しましょう。
site_frame.tpl への追加が楽チンでしょうか。

<!--{if $tpl_page_class_name === "LC_Page_Products_Detail"}-->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--{/if}-->

商品詳細ページでだけ読み込ませればいいので、その分岐で囲んでいます。

次に、スライダーを機能させるための記述を追加します。

<!--{if $tpl_page_class_name === "LC_Page_Products_Detail"}-->
<script>
$(document).ready(function(){
  $('.slick-photos').slick({
    arrows:false,
    dots:true,
    prevArrow: '<a class="slick-prev" href="#"><i data-icon="ei-arrow-left" data-size="m"></i></a>',
    nextArrow: '<a class="slick-next" href="#"><i data-icon="ei-arrow-right" data-size="m"></i></a>',
    customPaging: function(slick,index) {
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        return '<img src=" ' + targetImage + ' " alt="">';
    }
  });
});
</script>
<!--{/if}-->

これも商品詳細ページでのみ読み込まれるようにしておきました。

次に、商品詳細ページのメイン画像部分のソースを変更します。
/products/detail.php のメイン画像部分をまるっと書き換えちゃいましょう。

<div class="photo slick-photos">
  <!--{assign var=key value="main_image"}-->
  <!--★画像★-->
  <div><img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->"></div>
  <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
    <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
    <!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
    <!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
      <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
      <!--▼サブ画像-->
      <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
      <!--{if $arrProduct[$ikey]|strlen >= 1}-->
        <div class="slick-slide"><img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$ikey].width}-->" height="<!--{$arrFile[$ikey].height}-->"></div>
      <!--{else}-->
      <!--{/if}-->
      <!--▲サブ画像-->
    <!--{/if}-->
  <!--{/section}-->
</div>

あとは、cssでお好みの形に整えれば、出来上がりです。

BLOG
2019年5月25日 (0)

EC-CUBE2の受注メモ活用法

EC-CUBE 2.13.5の受注データの中にある「メモ」という項目。
基本的には管理者が受注管理用に使用するものだと思うのですが、あんまり活用されないんじゃないかと思いました。随分下の方にあるし。

それももったいないなということで、注文画面に入力項目を追加する必要もあったことから、追加した項目の内容がメモに挿入されるように設定してみました。

まずは LC_Page_Shopping_Payment.php に記述を追加。
こちらのサイトを参考にさせてもらいました。
参考：EC-CUBEカスタマイズ！注文情報に項目追加する

$objFormParam->addParam('お店へ秘密の連絡', 'note', STEXT_LEN, 'KVa', array('SPTAB_CHECK', 'MAX_LENGTH_CHECK'));

準備はこれだけ。
DBにテーブルを追加する必要がないので、ラクチンです。

次は、tplファイルの編集。
今回は注文の途中、お支払い方法選択画面と、注文内容確認画面に追加しました。
まずは、payment.tpl の中に記述を追加します。

<!--{assign var=key value="note"}-->
<select name="<!--{$key}-->" id="<!--{$key}-->">
  <option value="" selected="">選択してください</option>
  <option value="秘密その1">秘密その1</option>
  <option value="秘密その2">秘密その2</option>
</select>

selectタグを使っていますが、inputタグでも基本は同じはず。

続いて、confirm.tpl に追加します。
こっちは簡単、入力内容を表示させたいところに１行入れるだけ。

<!--{$arrForm.note|h}-->

今回はselectタグを使ったので、optionタグのvalueの値がメモに挿入されることになります。

メモをこういう風に利用していいのか？
正直分かりませんが、こういうこともできる、ということで。

BLOG
2019年5月23日 (0)

Misery SignalsのVocal交代劇

私の好きなハードコアバンドの一つに、Misery Signalsというバンドがありまして。

現時点の最新作は、2013年リリースの「Absent Light」。

このアルバムリリース当時のVocalistが、Karl Schubachという人。

このアルバムのリリースからしばらくして、「Malice X」と題した1stアルバム「Of Malice and the Magnum Heart」のリリース10周年記念ツアーを、当時のメンバーで開始します。

その当時のVocalistは、Jesse Zaraskaという人。

その後、このMalice Xツアーがしばらく続いた訳ですが、それが終わった後もなぜかメンバーが変わらないまま、新しいツアーが始まったり、来日公演があったりしました。

そうすると、さすがに「Karlはどうなったん？」とざわざわしてきます。日本では知名度が低い為か話題になりませんが、海外サイトでは記事になってたりする程度にはざわついてました。

2019年に入って新作制作をスタートさせたみたいなInstagramの投稿が公式からされたんですが、そこには当然Karlは写っていません。

https://www.instagram.com/p/BsZQmwtAG8g/?utm_source=ig_embed

でまぁやっぱり気になるので調べてみたら、2018年夏に、KarlがFacebookにて声明を発表していました。

Ex-MISERY SIGNALS Frontman Karl Schubach Posts Lengthy Statement On Leaving The Band

英語が読めないので機械翻訳して読んでみましたが、事実上の解雇、という感じでしょうか。

バンド内のコミュニケーションがうまくいってなかった、「Absent Light」の制作では蚊帳の外に置かれ貢献できなかった、2015年10月にRyan（Morgan：ギター）から電話で通告された…

私自身は「Absent Light」収録の「Luminary」でこのバンドを知って魅了された口なので、ちょっとだけ残念な気持ちになりました。
とはいえ、名盤と名高い「Controller」と比較すると、まとまりのなさや個々の楽曲のクオリティの面で気になるところも多々あったので、やっぱりね、というのも正直な感想ではあります。

Karl自身は今もメンタルの病気と闘っているようなので、良くなった暁には、ぜひ音楽でもその他の創作でも何でも、新しい活動を始めてほしいです。

そして、Misery Signalsは、早く新しいアルバム出しておくれ。

あと、できれば、Jesseは腕を腰の後ろに当ててシャウトするのやめとくれ。（正直ダサい）

BLOG
2019年5月20日 (0)

EC-CUBE2で購入履歴の有無による判定を追加

EC-CUBE 2.13.5で、ログイン判定を追加するカスタムは割と定番かと思います。
参考：絶対必要！EC-CUBEの毎回行うカスタマイズをピックアップ。

そこから派生して、購入履歴のあるなしを判定条件にできないか、と考えまして。
LC_Page.phpにこんな風に記述を追加してみました。

$objCustomer = new SC_Customer_Ex();
if ($objCustomer->isLoginSuccess() === true) {
  $this->tpl_login = true; //ログイン判定
  $this->tpl_buy_times = $objCustomer->getValue('buy_times'); //購入履歴判定
}

public function init() の一番最後に追加します。

そして、tplファイル上で、以下の感じで記述します。

<!--{if $tpl_buy_times == 0}-->
  //購入履歴なし
<!--{else}-->
  //購入履歴あり
<!--{/if}-->

これで、買い物したことがあるかないか、で分岐が書けます。
ちょっといじれば、購入回数で細かく分岐できそうですが、今回はそこまで必要なかったので、試してません。

BLOG
2019年5月20日 (0)

EC-CUBE2の商品ページに構造化データを追加してみる

EC-CUBE 2.13.5で販売する商品がリッチリザルトに表示されるよう、商品詳細ページに構造化データマークアップを追加してみました。

<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "<!--{$arrProduct.name|h}-->",
    "image": [
        "https://example.com<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|sfNoImageMainList|h}-->"
    ],
    "description": "<!--{$arrProduct.name|h}-->",
    "brand": {
        "@type": "Thing",
        "name": "ブランド名"
    },
    "offers": {
        "@type": "Offer",
        "url": "https://example.com/products/detail.php?product_id=<!--{$arrProduct.product_id|h}-->",
        "availability": "https://schema.org/InStock",
        "price": "<!--{$arrProduct.price02_min_inctax}-->",
        "priceCurrency": "JPY"
    }
}
</script>

Google構造化データ テストツールでは、エラーは出ませんでした。（「推奨値がない」という警告は出る）
プレビューでもちゃんと表示されます。

が、実際の検索画面上の表示までは確認できていません。多分表示される、と思いたい。

BLOG
2019年5月17日 (0)

FAQリッチリザルト用の構造化データを追加してみた

2019年5月に正式公開された、Google検索のFAQリッチリザルト。
簡単に対応できそうだったので、とあるサイトに構造化データマークアップを実際に追加してみました。

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [{
            "@type": "Question",
            "name": "これに質問が入りますか？",
            "acceptedAnswer": {
            "@type": "Answer",
            "text": "ここに質問に対する回答が入ります。"
        }
        }, {
            "@type": "Question",
            "name": "質問にタグは使えますか？",
            "acceptedAnswer": {
            "@type": "Answer",
            "text":"pタグやaタグ、imgタグの他、改行にbrタグが使えます。<br>aタグやimgタグを書く時は、<a href='https://example.com'>シングルクォーテーション</a>を使うといいようです。"
        }
    }]
}
</script>

Google構造化データ テストツールでは、エラーは出ませんでした。
プレビューでも問題なく表示され、aタグも機能していました。

諸事情あり、実際のGoogle検索上での表示はまだ見れていません。

なお、表示される質問＆回答数は、2019年5月時点では上から10件までに制限されているようです。
10件を超えて記述しても意味がない、かどうかは分かりません。今後さらっと上限が上がるかもしれないし、逆に下がるかもしれない。そこはGoogleさん次第。

いずれにせよ、構造化データマークアップとしては超簡単な部類に入ると思うので、みんなレッツチャレンジ。

BLOG
2019年5月15日 (0)
Tag cloud:
C90 C91 C92 Compilation Contranote CSS Etc. GAME HTML MUSIC PICTURE The Abyss I WooCommerce WordPress 備忘録 制作実績 同人 雑記