[makeshop]クリエイターモードで独自デザイン作成手引

2021.04.08

何年ぶりかにmakeshopを触ってるんだけど書くことがめちゃくちゃ多い。

FTP（100MBサーバー）

Makeshop標準のFTPサーバー。相変わらず100MBなので、他にサーバーを持ってたらそっちを使ったほうが良さげに思ったりする。

初期状態ではパスワードが設定されてないので、これを設定して使えるようになる。
相変わらず登録内容は確認できないのでローカルで控える必要がある。

FTPクライアントソフトに公式対応したっぽい。
SFTPは使えないけど、詳細設定不要でアクセスできるようになった。

管理アカウント

同一アカウントによる複数アクセスには対応していない。被った際には片方が弾かれる。なので、ワンマンじゃないなら「副管理者」アカウントを作る。

副管理者IDは登録可能数に上限があるので注意。副管理者の権限を全開放しても、「運営者の設定」とか一部触れないところがあるのも注意。だけどサイト制作においては何ら問題はないので、とりあえず1つ作っておくと便利。

ログイン画面は管理者用と別のURLになるので注意。ログインに失敗しまくるとロックが掛かり、ショップに登録したメールアドレス宛に解除用のメールを送ってそっから解除というものすごくめんどくさい手順を踏む必要がある。ミスらないように気をつける。

副管理者アカウント作成時、パスワードは8～12文字の文字数指定があるのに超過しても登録できちゃう。登録できちゃうけどそれをそのままログイン画面に打ち込んでも使えないので気をつける。

クリエイターモード

脱tableの代わりにページ単位で作成する必要が出てきた。
便利っちゃ便利だけど中途半端に不便。
まあでもモジュール（ECCUBEでいうブロック）が使えるんで悪くはない。

機能面は足りないものが多すぎるんでヤバい。
ヤバくない内容もあるけどとりあえずヤバい。
事前に確認しましょう。

クリエイターモードで対応していない機能について | makeshopオンラインマニュアル
ベーシックモードでもご利用が少なく、古い機能についてはクリエイターモードに対応しておりません。 基本的にショッ
ms-manual.makeshop.jp

で、Makeshopといえば独自タグなんだけど、クリエイターモードはまた別にタグがある。
見た感じSymfonyっぽいですね。

クリエイターモードタグリファレンス
reference.makeshop.jp

クリエイターモードでは通常の独自タグが使えない。使うとそのままの文字列が表示される。
クリエイターモードはクリエイターモードタグだけしか使えないので注意。

マニュアルページの説明が簡素を通り越して雑なので触りながら覚える必要がある。
ということで、そこらへんを書いていく。

コメントアウト

地味に気になるところ。

MakeshopクリエイターモードはSmartyがベースらしい。Smartyにはコメントアウトがある。

似てるけどちょっと違う感じになる。

<{* コメントアウト *}>

これでコメントアウト。書き出したときにソースに残らない。

※間違えてたから修正。

$makeshop.head

<link rel="stylesheet" href="/js/jqueryplugin/remodal/1.1.1/remodal.css">
<link rel="stylesheet" href="/js/jqueryplugin/remodal/1.1.1/remodal-default-theme.css">
<link rel="stylesheet" href="/view/asset/system-1-1-2-d1a42fcf1a71062fb4c3e65532441771.css">

こういうのが出る。まあ要するに、makeshop側が強制的に載せたい内容が出る。

$makeshop.body_top、$makeshop.body_bottomも同様で、こちらでは内容の操作はできない。思考停止してルールとして飲むしかない。

$page.css

「全ページ共通」と各ページのCSSをくっつけたCSSファイルがページごとに生成されて、それを読み込む。ローカルでの組み方によっては、全ページ共通で全てまとめたほうが楽な気もする。

これはMakeshop側で予め用意されているページだけのことで、フリーページにはCSSの枠がないので「全ページ共通」かhtml内に直接書き込むことになる。

$page.javascript

上記のjs版。
サンプルのデザインではjQueryライブラリが一緒に併記されてるけど、$makeshop.body_bottomでもライブラリ読んでるからどうなのこれって思うね。

フリーページURLについて

フリーページのURLはこんな感じになる。

/view/page/【任意の文字列】

フリーページはタグ化ができないんで、ページ一覧からURLをコピペすることになる。

モジュールについて

肝心要の部分として、モジュールからモジュールは呼び出せない。多分同ファイルを読み込んだりしてのループ回避なんだと思う。

モジュール内で条件分岐を使うことはできる。だからogpでwebsiteとarticleを振り分けるとか、管理画面上の機能でできない細分化した<title>の指定とかをやっていくことができる。

こんなかんじ。

<{if $page.type == 'top'}>
	<meta property="og:type" content="website">
<{else}>
	<meta property="og:type" content="article">
<{/if}>
    <meta property="og:title" content="<{$page.title}>">
    <meta property="og:description" content="<{$page.description}>">
    <meta property="og:site_name" content="<{$shop.name}>">
    <meta name="twitter:card" content="Summary with Large Image">

商品画像サイズについて

商品画像URLの呼び出しは3種類ある。

原寸サイズ
<img src="<{$item.image_L}>" alt="">
最大800px
<img src="<{$item.image_M}>" alt="">
ショップ作成>デザインの設定>トップページ商品配置の設定　で設定したサイズ
<img src="<{$item.image_S}>" alt="">

商品画像を複数登録した場合はMは使えず、LとSの2択になる。中途半端ですね。
活用案としては、「商品画像」「複数商品画像」それぞれを設定して、商品一覧では「商品画像」を呼び出して商品詳細では「複数商品画像」を呼び出すみたいな使い方か。最近は一覧でもマウスオーバーとかで画像を切り替えるのが流行ってるけども。

商品オプションについて

服のサイズとかで使う商品のオプションはこんな感じで呼び出す。

<{if $item.has_option}>
    <{$item.option_html}>
<{/if}>

こんな感じで項目名とプルダウンが出力されて、出力される構成はいじれない。

<p class="makeshop-option-label">TEST1</p>
<label class="makeshop-option-select-wrap">
<select data-id="makeshop-item-option1" class="makeshop-option-select">
<option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option>
<option value="1" class="makeshop-option-select-item" >01</option>
<option value="2" class="makeshop-option-select-item" >02</option>
</select>
</label>
</div>
<div class="makeshop-option-wrap">
<p class="makeshop-option-label">TEST2</p>
<label class="makeshop-option-select-wrap">
<select data-id="makeshop-item-option2" class="makeshop-option-select">
<option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option>
<option value="1" class="makeshop-option-select-item" >03</option>
<option value="2" class="makeshop-option-select-item" >04</option>
</select>
</label>
</div>

任意の組み方ができない箇所なんで、これはこの内容に合わせてcssでいじるしかない。

商品一覧ページについて

「商品カテゴリー」が商品一覧の役割を担う。
URLはこんなかんじ

全ての商品
/view/category/all_items
カテゴリー別一覧
/view/category/【カテゴリー識別コード】

カテゴリー別一覧は「カテゴリーの設定」で任意URLに変えられるけど統一感考えたらそのままでいい気がする。

カートについて

カートの中身はカートページ以外でも出力できる。
だから、Amazonみたいな事もできる。

PC/SP切替について

makeshopのコンテンツはuser-agent基準の振り分けができない。だから、PCだったら出力してSPだったら出力しないっていう行為ができない。だから、表示・非表示で切り替えるしかない。そういうことをすると無駄な読み込みが発生するのを理解しておく。

カテゴリー一覧でカテゴリ別の条件分岐

<{if $category_code == 'ct1'}>
    ct1のページにだけ表示します。
<{/if}>

商品詳細は$category_codeでカテゴリIDを拾えるんでそこでifを仕込める。
詳しくは公式サポートのブログに書いてある。

クリエイターモードで『カテゴリーページ』を"カテゴリー別にデザイン"したい - makeshopサポート
クリエイターモードで『カテゴリーページ』を"カテゴリー別にデザイン"したい - makeshopサポート
www.support.makeshop.jp

商品詳細でカテゴリ別の条件分岐

商品詳細でもカテゴリIDが引っ張ってこれる。

<{if $item.base_category.code == 'ct1'}>
ct1のみ表示
<{/if}>

ifにモジュールを突っ込んでも動作することを確認。

で、これは「基本カテゴリー」を呼び出しての条件分岐なんだけど、基本カテゴリー以外を引っ張ってくるタグがないんだよね。なんなんでしょうね。というわけで、商品カテゴリーの登録は結構シビアになる。

各ページごとの条件分岐

できる。できるけどめんどい。

「ページタイプ」と「ページID」を使い分ける必要がある。

<{if $page.type == 'top'}>
トップページ
<{else}>
トップページ以外
<{/if}>
<{if $page.id == 'company'}>
フリーページ「company」
<{else}>
フリーページ「company」以外
<{/if}>

例えばこんな感じになる。

ページタイプは言ってみれば超大味なカテゴリ判定みたいな感じ。フリーページは一貫して「freepage」だし、商品一覧は「category」だし、商品詳細は「item」になる。大枠で括るならそれでいいんだけど個別に判定したい場合はページIDを使う。

各種タイプとかIDを並べまくって表示して、どのページで何が表示されるか把握してやったほうがいい。フリーページのページURLとタグのページIDがリンクしてるとかね、書いてないから分からん不親切だよね。

商品レビュー投稿ページについて

ベースにしたテンプレートの為かもしらんけど、まさか空欄になってるとはね。

必要なタグはクリエイターモードタグサイトで揃ってるけど書き方について触れてないからうんこ。サンプルショップを確認して、推理して組みましょう。

500 Internal Server Error
tplstarter.shop21.makeshop.jp

最低限の要素だとこんな感じ。htmlのノリで書くと痛い目に遭う。

<{$review.star_select_html}>
<input type="text" data-id="<{$review.name_id}>" placeholder="ニックネーム">
<textarea data-id="<{$review.content_id}>" placeholder="コメント"></textarea>
<a href="<{$review.entry_url}>">投稿</a>

inputとtextareaはnameじゃなくてdata-idにする。

評価の星マーク（$review.star_select_html）はこんな感じで出力されるので、それに合わせてcssを組む。

<div class="reviewRate">
    <div class="reviewRateStar starOn" data-id="makeshop-review-star">評価1</div>
    <div class="reviewRateStar starOn" data-id="makeshop-review-star">評価2</div>
    <div class="reviewRateStar starOn" data-id="makeshop-review-star">評価3</div>
    <div class="reviewRateStar starOn" data-id="makeshop-review-star">評価4</div>
    <div class="reviewRateStar starOff" data-id="makeshop-review-star">評価5</div>
</div>

.starOnと.starOffで切り替わる。星の数の切替、classの変更はmakeshop側がやってくれるんでこれもcssでデザインをやればOK。

商品レビュー一覧ページについて

商品詳細上でレビューを書き出せるようになってる。ループの上限が見当たらなかったんで、多分全部書き出せる。商品詳細上でレビューを全部表示しちゃえばいいんじゃないかなと思う。jsが使えるからどうとでもできるし、レビューはテキストのみだから負荷もそんなに掛からないんじゃないかな。

問題というか、レビュー投稿後の遷移先がレビュー一覧なんですよね。記入前に見たいなって事はあっても、記入後に一覧を眺める気になるのかなと疑問に思います。ということで、よっぽど投稿数が多いとか見せたくてたまらなくてしょうがない人でもない限りは一覧を見せないって選択肢をとってもいいんじゃないかと思う。

つまりこうする。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="refresh" content="0;URL='<{$item.url}>'" />
    <{$makeshop.head}>
</head>
<body>
<{$makeshop.body_top}>
<{$makeshop.body_bottom}> 
</body>
</html>

転送を活用してレビュー投稿後はその商品のページを表示させる。

レビューを読むにせよ書くにせよ、単なる新着一覧でもなければ商品詳細を経由するんだよね。じゃあ深度を抑えたほうがいいんじゃないのっていうね。

商品一覧の並び替え（カテゴリー一覧）

makeshopの商品一覧（カテゴリー一覧）は価格順とかおすすめ順の並び替えができる。それはURL準拠で、見てくれを考えたらselectにぶち込んでしまったのが無難かなと思う。

<select onChange="location.href=value;">
    <option value="">並び替え</option>
    <option value="<{$category.sort_recommend_url}>" <{if $category.is_sort_recommend_selected}>selected<{/if}>>おすすめ順</option>
    <option value="<{$category.sort_new_url}>" <{if $category.is_sort_new_selected}>selected<{/if}>>新着順</option>
    <option value="<{$category.sort_high_price_url}>" <{if $category.is_sort_high_price_selected}>selected<{/if}>>価格が高い順</option>
    <option value="<{$category.sort_low_price_url}>" <{if $category.is_sort_low_price_selected}>selected<{/if}>>価格が低い順</option>
</select>

こうすると選んだタイミングでvalueに仕込んだurlに遷移する。

商品一覧の並び替え（検索結果）

検索結果でもソートを掛けられる。「$category」が「$search」になるので注意。

<select onChange="location.href=value;">
    <option value="">並び替え</option>
    <option value="<{$search.sort_recommend_url}>" <{if $category.is_sort_recommend_selected}>selected<{/if}>>おすすめ順</option>
    <option value="<{$search.sort_new_url}>" <{if $search.is_sort_new_selected}>selected<{/if}>>新着順</option>
    <option value="<{$search.sort_high_price_url}>" <{if $search.is_sort_high_price_selected}>selected<{/if}>>価格が高い順</option>
    <option value="<{$search.sort_low_price_url}>" <{if $search.is_sort_low_price_selected}>selected<{/if}>>価格が低い順</option>
</select>

<ul>とかで普通にリンクをまとめて作っちゃって、ポップアップでエセselectにするって手もあるんだけどね。まあでもこっちのほうが手間がないよね。

ちなみに、ソートに関係なく売り切れ商品は末尾に回される。

商品検索パーツ

先に注意点。

他と同様にinputを使ってる割にsubmitは箇所はbuttonでもinputでもなくただの<a>なので、要するに普通のリンクでしかない。何が注意かって、そのままだと新規タブで開けてしまう。いや、それでもまあ困ることはないんだけど、対策したいなら手段は限られる。

今回は必要に狩られなかったから気がついた範囲のだめな例の話になるけど、

動く
<a href="<{$search_form.search_url}>">検索</a>
動かない
<button type="button" onclick="location.href='<{$search_form.search_url}>'">検索</button>

左クリック以外の遷移ができない手法として手っ取り早いのはonclickで飛ばすやつなんだけど、記述内容が間違ってなかったとしてもbuttonはページ遷移しない。対策したいなら<a>に対してのjs制御になるっぽい。

で、組み方について。

各inputは例に倣ってdata-idをnameの代わりに設置する。

キーワード
<input type="text" data-id="<{$search_form.keyword_id}>">

カテゴリ
<select data-id="<{$search_form.category_id}>">
    <{section name=i loop=$search_form.category_list}>
    <option value="<{$search_form.category_list[i].code}>"><{$search_form.category_list[i].name}></option>
    <{/section}>
</select>

最低価格
<input type="text" data-id="<{$search_form.price_low_id}>">

最高価格
<input type="text" data-id="<{$search_form.price_high_id}>">

独自商品コード
<input type="text" data-id="<{$search_form.original_code_id}>">

検索リンク
<a href="<{$search_form.search_url}>">検索</a>

これらは全部設置する決まりはないので、各サイトで必要なものだけを設置すればいい。特に独自商品コードを使うのはBtoBとか専門業者のなんちゃらって感じがするのであんまり使わないと思う。

カテゴリーは登録してある内容を書き出すだけで親子の振り分けはない。だからselectかラジオボタンで設置する感じになる。カテゴリーだけじゃなくて「すべてのカテゴリー」の選択肢もあるんで詰まる要素はない。

応用で、価格の最低値最高値の部分はデモサイトだとinput[type=”text”]で設置されてるけどselectに仕込むことができる。こちらは自動で書き出される内容はないので、<option>は自身で設置する必要があるんで注意。選択肢をめっちゃ作る場合、手打ちはめんどくさいんでスプレッドシートとかで大量生産するか、jsで挿入するのが賢い。

尚、検索内容が無記入の場合、0でも空欄でもなく無を生成するんでmakeshopタグをそのまま条件分岐に突っ込むと詰むので注意。
jsというかjQueryだとこんな感じ。

<select data-id="<{$search_form.price_low_id}>" id="price_low"><option value="">制限なし</option></select>
<select data-id="<{$search_form.price_high_id}>" id="price_high"><option value="">制限なし</option></select>

<script>
    $(function(){
        var startPrice = 10000;
        var plusNum = 60;
        var plusPrice = 10000;
        var resultPriceLow = '<{$search.price_low}>';
        if(resultPriceLow = ''){
            resultPriceLow = 0;
        }
        var resultPriceHigh = '<{$search.price_high}>';
        if(resultPriceHigh = ''){
            resultPriceHigh = 0;
        }
        for(i=0; i<plusNum; i++){
            optionPlusPrice = plusPrice * i;
            optionValue = parseInt(startPrice) + parseInt(optionPlusPrice);
            optionName = optionValue.toLocaleString();
            console.log(optionName);
            if(optionValue == resultPriceLow){
                $('select#price_low').append('<option value="' + optionValue + '" selected>¥' + optionName + '</option>');
            }else{
                $('select#price_low').append('<option value="' + optionValue + '">¥' + optionName + '</option>');
            }
            if(optionValue == resultPriceHigh){
                $('select#price_high').append('<option value="' + optionValue + '" selected>¥' + optionName + '</option>');
            }else{
                $('select#price_high').append('<option value="' + optionValue + '">¥' + optionName + '</option>');
            }
        }
    })
</script>

10000スタートで+10000を60回繰り返す。
ソースの「￥」は変換されちゃっててわかりにくいけど、諸々の対策として全角か「&yen;」で書くのが無難。めっちゃ選ばせたいならこれでいい。高価格帯は幅を広げたいとかだとめんどくさくなるんでがんばって。

ところで、低価格が高価格を上回った場合の対処がmakeshopには無いのでちゃんと使わないユーザーが悪いみたいな感じなんだろうか。いいんだけど。

この中でフリーワードが一番の難関。検索フォームに難点はないんだけど、makeshopは商品登録ページの「検索語」だけがこのフリーワードに引っかかる。逆に言えば商品名も説明文も何も引っかからない。ECCUBEとかは検索対象を指定できるのにね。ここのところGoogleは表記揺れとか大雑把な検索ワードにも対応してるわけで、それを踏まえると恐ろしい手間を要求される。商品名一つとっても最低でもアルファベット、ひらがな、カタカナ、漢字、全角半角とか。
登録商品数がとんでもない数だった場合地獄を見るので、そういう意味からフリーワードを削除しちゃうのも一つかもしれないというね。

サイト内検索オプション
検索キーワード入力時に候補語を表示し、画像と詳細ページへのリンクを表示して最短でスムーズな情報到達を実現することで、キーワードによる検索時の機会損失の減少や新たな商品の提供を実現できます。
www.makeshop.jp

自分で縛っといてお得感出してんじゃねえよ。そりゃ、検索対象広げたら負荷がかかるのはわかるけどさ。でもねぇ。

検索結果の商品検索パーツ

検索結果ページでは検索したワードを表示できる。input[type=”text”]ならvalueに突っ込んでおしまいだけど、selectとかラジオボタンを導入した場合はcheckedとかselectedをつけないと反映できないんで、条件分岐をかませる必要がある。

カテゴリーをselectで作ってる場合はこんな感じ。

<select data-id="<{$search_form.category_id}>">
    <{section name=i loop=$search_form.category_list}>
    <option value="<{$search_form.category_list[i].code}>" <{if $search_form.category_list[i].code == $search.category.code}>selected<{/if}>><{$search_form.category_list[i].name}></option>
    <{/section}>
</select>

配列をただ回してるだけだからね。そうなるよね。

価格帯はこうする。

<select data-id="<{$search_form.price_low_id}>" id="price_low"><option value="">制限なし</option></select>
<select data-id="<{$search_form.price_high_id}>" id="price_high"><option value="">制限なし</option></select>

<script>
    $(function(){
        var startPrice = 10000;
        var plusNum = 60;
        var plusPrice = 10000;
        for(i=0; i<plusNum; i++){
            optionPlusPrice = plusPrice * i;
            optionValue = parseInt(startPrice) + parseInt(optionPlusPrice);
            optionName = optionValue.toLocaleString();
            console.log(optionName);
            if(optionValue == <{$search.price_low}>){
                $('select#price_low').append('<option value="' + optionValue + '" selected>¥' + optionName + '</option>');
            }else{
                $('select#price_low').append('<option value="' + optionValue + '">¥' + optionName + '</option>');
            }
            if(optionValue == <{$search.price_high}>){
                $('select#price_high').append('<option value="' + optionValue + '" selected>¥' + optionName + '</option>');
            }else{
                $('select#price_high').append('<option value="' + optionValue + '">¥' + optionName + '</option>');
            }
        }
    })
</script>

.append()の手前に条件分岐を付けて、入力額と一致してたらselectedを付与する。

検索内容の出力

キーワード：<span><{$search.keyword}></span>
カテゴリ：<{if $search.category.name == ""}><span>すべてのカテゴリー</span><{else}><span><{$search.category.name}></span><{/if}>
価格帯：
<{if $search.price_low == ""}><span>制限なし</span><{else}><span>¥<{$search.price_low|number_format}></span><{/if}> ～ 
<{if $search.price_high == ""}><span>制限なし</span><{else}><span>¥<{$search.price_high|number_format}></span><{/if}>
該当商品数：<span><{$search.total_count|number_format}></span> 商品

流石に見づらいから<span>で区切った。
カテゴリーと価格帯がちょっと難敵。

カテゴリーがまさかの「すべてのカテゴリー」選択時は無を生成する。条件分岐で表示する必要がある。

価格帯は「○○～○○」で表示したいってなった場合、前述の通り記入がなければ無が書き出されて具合が悪い。無を条件分岐できたので「制限なし」で代入した。ついでにmakeshop側の修飾子を使用してる。これでカンマ区切りはできたけど前後に任意のテキスト（￥）を突っ込むような事はできないのでタグ外で記入。

検索結果の商品一覧部分

カテゴリー一覧を作ってたらそれをコピーする。
「$category.」を「$search.」に置き換える。エディタの置換を使えば一発で済むのでオススメ。

逆の場合は検索フォームの「$search_form」を巻き込む恐れがあるので、選択範囲に注意。

SNSシェアボタンを作る

自作したら果てしなくめんどかった。

というのが、クリエイターモードタグで各URLを書き出すやつはあるんだけど、これは相対パスであって諸々込のURLが無い。サイト内であれば困ることはないんだけどね。だからドメイン部分を手打ちする必要がある。しかもこれもめんどくさい。

<{$item.url}>
→　/view/item/000000000001

商品詳細のURLを出すとこうなる。

だからURL部分はこうする。

https://www.google.co.jp<{$item.url}>
→　https://www.google.co.jp/view/item/000000000001

「https://」は書くのに末尾の「/」は書かないっていう。むず痒い。まあ気をつけるのはそれだけなんだけど。

ということで、makeshop既存のバリエーションに合わせるとこんな感じ。

<a href="https://twitter.com/intent/tweet?url=https://【ドメイン】<{$item.url}>&text=<{$item.name}>&hashtags=***" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;" target="_blank" rel="nofollow">Twitter</a>
<a href="https://www.facebook.com/sharer.php?src=bm&u=https://【ドメイン】<{$item.url}>&t=<{$item.name}>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;" target="_blank" rel="nofollow">facebook</a>
<a href="https://line.me/R/msg/text/?https://【ドメイン】<{$item.name}>%0A<{$item.url}>" target="_blank" rel="noopener noreferrer">LINE</a>

パターンとしては単純。他は過去記事参照で。

[jQuery]SNSシェアボタンの自作について
アドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。
blog.megefeps.info
2019.06.04

利用案内・会社概要・特定商取引法・特商法・プライバシーポリシー

これらはそれぞれのページ上にベタ打ちしてもいいんだけど、管理画面上で登録した内容を引っ張ってこれる。クリエイターモードタグサイトで言うこのページ。

クリエイターモードタグリファレンス
reference.makeshop.jp

各所のtextareaで入力したやつをそのまま書き出すんで、\n的な意味の改行は保持されてる。だけど改行タグはついてないんで<p>とかに突っ込んだ際は1行として表示される。それでいいならいいけど、よくないなら修飾子をつけましょう。

改行なし
<{$company.content}>
改行あり
<{$company.content|nl2br}>

cssでも改行指定できる。

p{
    white-space:pre-wrap;
}

個人的には修飾子の方がいいと思う。

カレンダー機能

クリエイターモードでもカレンダーは使えるらしく。ただ、ちょっと厄介というか手間がかかるので注意。

カレンダーの設定 | makeshopオンラインマニュアル
ショップのトップページにカレンダーを表示できます。表示するカレンダーをの詳細設定ができます。 カレンダーの設定
ms-manual.makeshop.jp

管理画面で仕込んだ「日別内容入力」はクリエイターモードでも反映させることができるけどちょっとめんどい。管理画面で入力した内容は、例えばこんな感じでhtmlとして出力される。

<input type="hidden" class="dayList" data-month="1" data-day="12" data-color="#FF3300">
<input type="hidden" class="dayList" data-month="1" data-day="11" data-color="#FF3300">

日付と色が書いてあるんでjsで引っこ抜いて該当の<td>にはめ込む感じ。

カレンダーはこんな感じで出力されるんで指定に手間取ることはない。

        <td class="sunday day9">9</td>
        <td class="monday day10">10</td>
        <td class="tuesday day11 today">11</td>
        <td class="wednesday day12">12</td>
        <td class="thursday day13">13</td>
        <td class="friday day14">14</td>
        <td class="saturday day15">15</td>

曜日もclassに入ってるから土日を定休日にしたいなら曜日を指定して色を付けてもいいですね。月末過ぎた枠にはclassは付かないんで、色だけ乗って変な感じになるってことは避けられる。

        <td class="sunday day30">30</td>
        <td class="monday day31">31</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

逆に空欄にも装飾をしたい場合は:nth-child()で指定すればいい。

そもそものところ

「定休日」の概念がないっぽいんで、管理画面で定休日を指定する場合は日毎に登録しなきゃいけない。ECだからって土日祝休みのところは普通にあるじゃないですか。出荷を自前でやってるところもあるじゃないですか。配送手段が郵便だったら土日は休みじゃないですか。不便極まりない。

カレンダーの切替について

タグを見たら分かる通り、当月と翌月の2ヶ月しか出力できない。$calendar1から$calendar2だから$calendar3でいけるんじゃね？って思うじゃない。何も出力されない。

タグの機能は2ヶ月分をただhtmlに出力するだけなので、ボタンを押して切り替える、をしたいならjsとかでそういう装飾をするに留まる。2ヶ月だけなら両方表示させちゃってよくない？って思うんだけどね、どうなんでしょう。

makeshopマガジン
>クリエイターモードでカレンダーを表示することができるようになりました！ | makeshopマガジン
www.magazine.makeshop.jp

できることが限られまくっててありがたみが薄い・・・

SNSシェアボタンについて

まず、「プロモーション > SNS > SNSボタンの設定」をいじる。というのは、Twitter、Facebook、LINEが用意されているんだけど初期設定では非表示になってるんで、タグを突っ込んでも表示されない。「表示する」にチェックを入れて、他のところも必要に応じていじる。Twitterはハッシュタグを指定できるんだけど、スペースが入ると手前の部分だけがタグ化するので気をつける。

まあ用途としてはこれを使えばいいんだけど、デザイン的に意見の分かれるところなんで自作しちゃえばいい。けどね、めんどいねこれ。

まとめ的なもの

ECCubeとかwpに慣れるとすっごいめんどいね。

スポンサーリンク

コメント

タイトルとURLをコピーしました