2013年3月25日月曜日

CS-Cart3 マイアカウントブロックの「ダウンロード」メニューを削除する

CS-Cart3 ショップ構築時、物販サイトなどダウンロード販売を行わない/利用しないショップでは「ダウンロード」のリンクが不要だろう。
しかし、ダウンロードのリンクは管理画面から削除することができない。このため、テンプレートを直接変更する必要がある。

該当するテンプレートには、profiles:my_account_menuというhookがあるので、次のファイルを作る。

/skins/[利用中のskin名]/basic/customer/addons/my_changes/hooks/profiles/my_account_menu.override.tpl

該当する記述箇所は以下の通り。

  • {$lang.downloads}
  • 上記を削除してしまえば「ダウンロード」リンクは非表示になる。

    2013年3月21日木曜日

    CS-Cart3 ランキングブロックにランク画像を追加する

    CS-Cart3の商品ブロックを使い、[コンテンツ]の[表示内容]に「人気の商品」を指定すると、売れ行きランキング表示ができる。
    このランキングに「No.1」「No.2」のような画像を追加する。

    ■やること
    ランキング画像を利用中スキンのimagesに「ranking_X.png」というファイル名でアップロードし、 下記のようなコードを追加する。

     ※Xは1から始まる数字

    ※sproductsは後述する「グリッド」の場合だけかもしれないので、その場合は、該当する.tplファイルのforeach名に置き換えてください
    ※管理画面で指定した表示数分の画像を作ってアップロードしておくこと。

    ■コードの追加箇所
    テンプレートを「グリッド」にした場合。

    グリッドのテンプレートは
     /skins/[利用中のスキン名]/customer/blocks/list_templates/grid_list.tpl
    となる。

    grid_list.tplには
     {hook name="products:product_multicolumns_list"}
    というhookポイントの記述があるので、

     /skins/[利用中のスキン名]/customer/addons/mychanges/hooks/products
     /skins/[利用中のスキン名]/customer/addons/mychanges/hooks/products/product_multicolumns_list.override.tpl

    を作成し、product_multicolumns_list.override.tplを変更する(元のgrid_list.tplはいじらない)。
    product_multicolumns_list.override.tplは、grid_list.tplのhookポイントの中身をコピーし、任意の位置にランキング画像のコードを追加する。

    ■注意
    このままだとgrid_list.tplのマルチカラムを利用するすべてのブロックで画像が表示されてしまうので、任意の場所だけに表示できるように制限する必要がある。
    制限の方法はいろいろあるだろうけども、たとえばトップページのブロックのみ表示させたい、といった時にはテンプレート側で特定URLのみ表示、としたのが下記のサンプル。

    画像の上にランキング画像を表示する例(トップページのみ表示)

    {if $smarty.server.REQUEST_URI == "/"}

    {/if} {include file="common_templates/image.tpl" obj_id=$obj_id_prefix images=$product.main_pair object_type="product" show_thumbnail="Y" image_width=$settings.Thumbnails.product_lists_thumbnail_width image_height=$settings.Thumbnails.product_lists_thumbnail_height} {if $settings.Appearance.disable_quick_view != 'Y'} {include file="views/products/components/quick_view_link.tpl"} {/if}  :  :

    2013年3月18日月曜日

    CS-Cart3 商品価格表示の (○円 税込) を (税込 ○円) に変更したい

    CS-Cartは、商品を税込み表示にした際、(○○円 税込) と表示される。
    (税込 ○○円) というように価格と税込の文字列を入れ替える。

    ■修正ファイル
    /skin/(利用スキン名)/customer/common_templates/product_data.tpl

    ■修正箇所
    270行あたりにある
    {******************* Clean Price ******************}
    のブロック内
    ({include file="common_templates/price.tpl" value=$product.taxed_price span_id="product_price_`$obj_prefix``$obj_id`" class="list-price nowrap"} {$lang.inc_tax})

    {$lang.inc_tax}が「税込」になるので、{$lang.inc_tax}と半角スペースを前方に移動する。

    ({$lang.inc_tax} {include file="common_templates/price.tpl" value=$product.taxed_price span_id="product_price_`$obj_prefix``$obj_id`" class="list-price nowrap"})
    

    ただし、この修正はhookポイントがないので、アップデートなどで上書きされる可能性があるのを忘れないように。

    2013年3月15日金曜日

    CS-Cart3 フックポイントのファイルを読み込まないとき

    CS-Cart3
    フックポイントを見つけ、正しい位置に正しい名前でファイルを設置したのに、読み込まれない時、アドオンを追加していないかどうかチェックしてみるといい。

    もし、アドオンを追加していたら。一端そのアドオンを無効にし、ページを再読み込みすると反映されることがある。その後はアドオンを有効にするのを忘れずに。

    たぶん、同じ名前のフックをアドオンで使っているからこういうことが起こるんだと思いますよ。たぶんね。

    2013年3月14日木曜日

    CS-Cart3 画像リンクをオンマウスで変更

    CS-Cart3でjQuery.rollover.jsを使ってオンマウスで画像変更する。

    ■用意するモノ
    jQuery.rollover.js
     /lib/js/jqueryrollover/jquery.rollover.js

    ■作るモノ
    jqueryrolloverディレクトリ(名前はjqueryrolloverでなくてもOK)
     /lib/js/jqueryrollover

    rollover_id.jsファイル(名前はrollover_id.jsでなくてもOK)
     /lib/js/jqueryrollover/rollover_id.js

    hookディレクトリ類(Basicスキンを使っている場合&カスタマー画面)
     /skins/basic/customer/addons/my_changes
     /skins/basic/customer/addons/my_changes/hooks
     /skins/basic/customer/addons/my_changes/hooks/index
     ※my_changes含め、下層の名前は固定。変更しちゃダメ。

    script.override.tpl
     /skins/basic/customer/addons/my_changes/hooks/index/script.override.tpl
     ※名前は変更しちゃダメ(状況に応じて「override」は変更可)。

    ■作り方
    1.script.override.tplに以下のように記述する
    {script src="lib/js/jqueryrollover/jquery.rollover.js"}
    {script src="lib/js/jqueryrollover/rollover_id.js"}

    2.rollover_id.jsに以下のように記述する
    jQuery(function($) {$('#hogehoge a img').rollover();});

    3.完成。

    ディレクトリ名、ファイル名を変更している場合は、script.override.tplの記述内容を変更したディレクトリ名、ファイル名に変更すること。

    #hogehogeは、オンマウスで画像を変更させたい部分のID。なので、#contentsとか#wrapperとか#totopとか、状況に応じたID名を記述。
    クラスの場合も.menuとか記述すればOK。下記のように複合(ID:hogehogeとクラス:fugafuga)も可。

    jQuery(function($) {$('#hogehoge a img, .fugafuga a img').rollover();});

    この辺はCS-Cartじゃなくてjquery.rollover.jsの話なので割愛。

    ■説明しなさいよ、という人のための説明
    まず、ヘッダにjquery.rollover.jsとrollover_id.jsを読み込む。
    スクリプト類は、
     /skins/basic/customer/index.tpl
    の中で、
     {include file="common_templates/scripts.tpl"}
    というように呼ばれている。

    scripts.tplに直接追記しても、もちろん動くけども、CS-Cartでは、フックポイントを利用するのが正しい方法。フックポイントを利用すれば、本体のバージョンアップなどでファイルが上書きされても、影響を受けない(らしいよ)。

     /skins/basic/customer/common_templates/scripts.tpl
    では、最後にフックポイントがあるので、これを利用して追記する。

    ・scripts.tpl内のフックポイント
     {hook name="index:scripts"}
     {/hook}

    nameが「index:scripts」なので、変更するファイルは
     /skins/basic/customer/addons/my_changes/hooks/index/script.override.tpl
    に作る必要がある。

    script.override.tplには、読み込むjsファイルを記述する。
    ここではjquery.rollover.jsと、読み込む画像の条件を記述したrollover_id.jsの二つを記述。
    このファイルが正しく読み込めていれば、ソースのヘッダに
    
    
    

    が表示される。

    次に、rollover_id.jsに、オンマウスで画像を変更したい場所を記述する。
    サイト全体にやりたければ、
    body a img
    とする。
    細かい設定内容については、本家サイトで確認をおすすめ。

    画像変更する方法は「jQuery.rollover.js」を使う以外にもたくさんあるけれど、jQuery.rollover.jsは、「このIDだけ」「このクラスだけ」というように細かく部分指定できるので重宝します。
    また、フォームにも対応しているのが便利。
    画像の名前も_on以外にも自由に設定できることなども便利ポイント。

    2013年3月12日火曜日

    CS-Cart3 導入時用メモ

    導入時にとりあえずいろいろ変更しないとお客さんに怒られちゃうよ的なアレコレ。
    デフォルトから最低限変更しておく必要のあるものの変更内容メモ。
    随時追加。

    ■テストメルマガ
    購入手続き時(ステップ4:支払い方法)にメールマガジンの購読チェックがあり、マガジン名が「テストメルマガ」になっている。

    メールマガジンを発行しない場合は管理画面メニューの[ウェブサイト]−[メルマガ配信]−[メールマガジン]で、「テストメルマガ」を[無効]にする。

    メールマガジンを発行する場合は、同じく管理画面メニューの[ウェブサイト]−[メルマガ配信]−[メールマガジン]で、[名前]を任意のマガジン名に変更する。

    ■カスタム配送
    購入手続き時(ステップ3:配送方法)の配送方法名が「カスタム配送」となっている。

    管理画面メニューの[配送方法/税金]−[配送方法]から、任意の配送方法を選択するか、カスタム配送の[名前]を変更する。

    ■ダウンロードリンク
    マイアカウントブロックにある「ダウンロード」リンクが不要な場合、hookを使ってメニューを編集する。

    ■請求書のロゴ変更
    マイページの過去の買い物リストから作成できる請求書等に利用されているロゴを変更する

    http://demoshop.4stars.ne.jp/skins/basic/mail/images/invoice_logo.png

    画像サイズを変更した場合は、マニフェストファイル内のサイズ変更も忘れずに行うこと

    /skins/[利用しているスキン名]/manifest.ini