2015年8月30日

「最近チェックした商品」の履歴を削除する

カラーミーショップには、最近チェックした商品(or 最近見た商品)の独自タグがあります(2012年に実装された機能です)。
ただ、履歴を残されるとイヤだなぁと感じるお客様もいらっしゃるようです。
そしてなぜか標準で、「履歴の削除機能」が付いていないらしい。

履歴はCookieとして各自PCに保存されますので、Cookieを削除する機能を付けます。
ごく簡単ですが、作ってみました。

0. Cookie名 browsing_history

a:3:{i:0;s:6:"579230";i:1;s:7:"2923713";i:2;s:7:"6039294";}
中を覗くと、こんな感じになっています。
上記例では履歴が3点あり、""に囲まれた部分に商品IDが入っています。
そのほか、a:履歴の登録数、i:連番、s:商品IDの桁数。PHPのserialize()関数を参照するとよいです。
登録数はMAX10件らしい。

1. コード

<script src="http://example.com/jquery.cookie.min.js" type="text/javascript"></script>

<a href="#" onClick="JavaScript:$.cookie('browsing_history','',{expires:-1});location.reload();return false">削除</a>
jQueryプラグインのCookie操作を使っています(jquery.cookie.min.js)。
リロード『location.reload();』は機能的に不要かもしれませんが、一応。
履歴を全削除します。

2015年8月20日

Twitterの投稿を「ショップからのお知らせ」にする - Twitter API編

ネットニュースを眺めていると、こんな記事をみつけました。
「minne」に出品された吉幾三さん手作りの11万円の壺、ついに売れる - ITmedia ニュース

TV CMもバンバンやっているのでご存知の方も多いと思いますが、minneとは、クリエイターにWeb上のギャラリーを貸して、ハンドメイド作品の販売を仲介するサイトです。
ハンドメイドにターゲットを絞っているところが、面白いなぁと感心します。
上の記事も、プロモーションの一環だったりしてね。




0.「ショップからのお知らせ」はどこで書く?


カラーミーショップ上の多くのお店では、お客様への告知として「お知らせ/ニュース/新着情報」などのスペースを設けています。

無料テンプレートを見ると、管理画面の「ショップ作成>ショップ情報設定」の「お知らせ」を使っています。これが一般的だと思います(HTMLタグも入りますし、枠内の文字数制限も緩そうにみえます)。

その他には、ショップ・ブログのRSSからタイトルを取得して表示させているショップもあります。
Twitterのウィジェットをサイドバーに貼っているショップも多いですよね。

Twitterのウィジェットで機能十分ですが、サイトデザインを優先してページにしっくりくる感じで埋め込みたい場合などは、Twitter APIを試してみるのも良いかもしれません。

Twitterには、カラーミーショップ同様に、APIが用意されています。
利用するための手順も、だいたい似たようなものなので、カラミーショップAPIを使ったことがあれば、それほど理解に困らないと思います。
Twitter APIを利用するための手順は、親切丁寧に解説が書かれているサイトがありましたので、下記リンクをご参考にどうぞ。

【参考】PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版] | webOpixel


カラーミーいじりたおし的には、すぐに試せるPHPソースコードとカラーミーショップ側のコードを置いておきます。

1. コード

1.1 twitter.php

<?php
require_once("twitteroauth.php");

$consumerKey = "xxxxxxxxxxx";
$consumerSecret = "xxxxxxxxxxx";
$accessToken = "xxxxxxxxxxx";
$accessTokenSecret = "xxxxxxxxxxx";

$twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret);
$req = $twObj->OAuthRequest("https://api.twitter.com/1.1/statuses/user_timeline.json", "GET", array("count"=>"5"));
$tw_arr = json_decode($req);
$str ="";
if (isset($tw_arr)) {
    foreach ($tw_arr as $key => $val) {
        $str = $str . '<b>' . date('Y/m/d H:i', strtotime($tw_arr[$key]->created_at)) . '</b>';
        $str = $str . '<br />';
        $str = $str . preg_replace("/(https?|ftp|news)(:\/\/[[:alnum:]\+\$\;\?\.%,!#~*\/:@&=_-]+)/","<a href=\"\\1\\2\">\\1\\2</a>",$tw_arr[$key]->text);
        $str = $str . '<br />';
        $str = $str . '<hr />';
    }
} else {
    $str = 'ニュースはありません。';
}
$str = str_replace(array("\r\n","\r","\n"), '', nl2br($str));

//出力用配列にセット
$output = array(
    'str' => $str
);

header("Content-Type: text/javascript; charset=utf-8");
echo $_GET['callback'] . '(' . json_encode($output). ')';

1.2 カラーミーショップ側の HTML+jQuery

<div id="header_list">読み込み中...</div>
<script type="text/javascript">
    $.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
    }
    $.getJSONP("http://www.hogehoge.com/twitter.php", onDataHandler)
    function onDataHandler(response) {
        $("#header_list").html(response.str);
    }
</script>

2. 簡単な説明

PHPのソースコードは、変なところに改行が入っていますので、ご注意を。
created_atが投稿日時、textがつぶやきの内容。
上述の参考サイトに詳しく解説がされています。まずはそちらからどうぞ。

2015年8月4日

参考にしたいカラーミーショップ 6

カラーミーショップ&無料テンプレートという検索キーワードでここにたどり着くお客様がいらっしゃいます(このブログがヒットするのも不思議ですけれども)。
需要があるのなら、ひとつくらい作ってみようか、という気がしています。

この「参考にしたいカラーミーショップ」も、ついに最終回となりました。6回にわたりお付き合いいただき、ありがとうございました。
これまでに「おっ」というのがみつかりましたでしょうか。

もっとみたい方は「カラーミーショップ大賞2015」でエントリーショップ(約1100店舗)が閲覧可能です(ショップのカテゴリーで絞り込めるので、探しやすいです)。

さて今回は、カラフル&ピンク!!です。サイトデザインのご参考にどうぞ。

1.カラフル


PEPIES - 雑貨屋ペピーズ | 出産祝いに人気の海外ベビーブランド キャラクターグッズの通信販売

雑貨屋さん。緑+ピンク。アニメーションがにぎやかで楽しいです。HTML5/CSS3が使われているので、いろいろと新しいです。
商品一覧ページのナビゲーション(「次のページ」とかのアレ)も、ページの雰囲気に合わせてデザインされています。




制服通販リサ アンド ザ スターライト 高校生制服通販

カラフルかは別にして、背景の柄が変えられます。そして、レスポンシブ・デザインです。
トップページを含め大部分はカラーミーショップ以外で制作されています。カート部分だけ「どこでもカラーミー」のようです。
トップのタイル配置は、Masonry(jQueryプラグイン)で実現しています。





2.ピンク


mihopan popcake(ミホパンポップケーキ☆)

ピンク+紺色の文字色が目を惹きます。
四角をたくさん並べていますが、サイズを変えてあって、メリハリが利いています。
写真も綺麗ですよね。




スマホカバー・スマホケース公式通販 CIARA(シアラ)

レスポンシブ・デザインになっています。コンセプトの伝わる配色・デザインになっています。




スイーツデコアクセサリーのウェディングとギフト通販│Casadedulce

ユニークなアクセサリーショップ。サイトも全体的にテンション高め。
サイドの空きスペースに縦書きバナーっていうものありですよね(楽天でよくみかけます)。