[サブスクストア]デザイン管理の使い方と理解

WEB

2020.12.09

やりながらのメモ

Contents

1 CSS、JS等外部ファイルの追加
2 ページレイアウト

CSS、JS等外部ファイルの追加

FTPからアップロードすることで、全ページを対象にhead・bodyに任意のタグとかを挿入できる。

/public/temona_htmls/body_top.html
<body>の直後に挿入

/public/temona_htmls/body_bottom.html
</body>の直前に挿入

/public/temona_htmls/head_top.html
<head>の直後に挿入

/public/temona_htmls/head_bottom.html
</head>の直前に挿入

初期状態ではディレクトリ「temona_htmls」は存在しないので、必要なものは全部作成すること。案内的には計測タグ挿入のことしか書いてないのでひょっとすると下手に何かしたら何かあるかもしれない。

とは言ってもデザイン構築についての記述がそもそも薄いので、そもそもイレギュラーなのか正攻法なのか謎。

ページレイアウト

独自のなんちゃらを使えますよという触れ込みではある。

概要的なもの

サブスクストア上で生成されるページはフレームで区切られていて、中身を指定したり表示しなかったりができる。

一括変更はできないのでクソダルいということを理解しておく。

ヘッダー部分

「デフォルトヘッダー」と「独自ヘッダー」は別物で、ON/OFFを切り替えたら差し替えるとかじゃない。

デフォルトヘッダー
パンくずリスト
独自ヘッダー

の順で並んでる。
パンくずは固定されてる（元々無いページもある）。

デフォルトヘッダー

ONにするとサブスクストア側で用意した内容が表示される。
サイト内ナビゲーションとか、会員メニューとかが入っている。
作成したブロックを登録するとそれに差し替えられる。

デフォルトで設置されてる内容はこちらで編集できない。
独自タグでどうのこうのってものもない。

独自ヘッダー

ONにしてもブロックの指定がなければ何も表示されない。
何故か標準で中央寄せが効いている。

フッター部分

ヘッダーと同じ感じ。

不要な項目の削除（自己責任）

パンくずリストいらないとか、カートの「買い物を続ける」はいらないとか、そういう時。直接中身はいじれないので、CSSかJSで対応する必要がある。

※サブスクストアにjQueryは使用されてないっぽい。

上の項目とかの方法でjQueryを読ませて、ついでにこんな感じの内容を書いたjsも読ませる。

jQuery：とりあえず書く

$(function(){
	//パンくずリスト非表示
	if($('ol.breadcrumb').length){
		$('ol.breadcrumb').parents('.border-bottom').hide();
	}
	//買い物を続ける非表示
	if($('.btn.btn-lg.btn-default.cart-continue-shopping-btn').length){
		$('.btn.btn-lg.btn-default.cart-continue-shopping-btn').parents('.display-for-web').hide();
		$('.btn.btn-lg.btn-default.cart-continue-shopping-btn').parents('.display-for-mobile').hide();
	}
})

サブスクストアの構成を見るに、ガワは汎用的な感じで組まれてるので、ユニークなidなりclassなりnameなりを見つけて、そこから親を指定して操作するのがいい感じ。

でもこれ、ページを再読込したら消えるんだけどアクセス時には表示される。
あと、効かないページがある。

各セクション、検証では確認できるけどページのソースに表記がないからjsかなんかで呼び出してる臭いなこれ。

親を指定できないcssは微妙なんだけどなぁ。

jQuery案：setTimeout

$(window).on('load', function () {
	setTimeout(function(){
		//パンくずリスト非表示
		if ($('ol.breadcrumb').length) {
			$('ol.breadcrumb').parents('.border-bottom').hide();
		}
		//買い物を続ける非表示
		if ($('.btn.btn-lg.btn-default.cart-continue-shopping-btn').length) {
			$('.btn.btn-lg.btn-default.cart-continue-shopping-btn').parents('.display-for-web').hide();
			$('.btn.btn-lg.btn-default.cart-continue-shopping-btn').parents('.display-for-mobile').hide();
		}
	},60)
})

表示処理が絶妙に遅くてonload的なものでも先周りしてしまって反映されない。だからsetTimeoutで時間を指定してしまえば、という案。50だと早すぎる、60だったら行けるところまでは絞り込んだ。一瞬表示されて消えるのがダルいのと、ブラウザバック時に効かないのと、一部の条件下では効かないってのと（購入数制限かけた商品をカートに入れると遷移先のカートページで発火しない）。

CSS：現状の最適解

ol.breadcrumb,
.btn.btn-lg.btn-default.cart-continue-shopping-btn{
	display: none;
}

CSSがやっぱり確実だという結論に至ってしまったのだけど、やっぱり親要素が持ってるmarginとかpaddingが残ってるから無駄な余白が発生してる。

実用面で言えば、全ページが対象になるとifが掛けられない手前何があるかわからんでリスクがある。正規箇所の記載は諦めてブロックで個別に作って振り分けるのが安心かもしれないけどそれはそれでダルい。