spachill 
例えば、こんな感じのダウンロードできる資料コンテンツを用意したけど
誰でもダンロードできる状態ではなく「会員限定」でダウンロードできるようにしたいといった実装をしたい場合があると思います。
また、一つではなく何個もこのようなレイアウトでアイテムを並べるようなセクションを作成したい場合のコードです。
特にshopifyなどのECサイトでは顧客情報を取得するということは今後のマーケティングにも直結するアクションとなりますので必要になってくると思います。
ぜひ一読ください！
目次
liquidのコーディング
では結論から書きます。
コードは以下の通りのコードとなります。
<div class="download__cards">
{% for block in section.blocks %}
<div class="downloadCard">
<figure class="downloadCard__img"><img src="{{block.settings.download-img|img_url:"master"}}" alt="">
</figure>
<h3 class="downloadCard__title">{{block .settings.download-title}}</h3>
{% if customer %}
<a class="downloadCard__btn" download
href="{{block.settings.download-file}}">ダウンロード</a>
{% else %}
<span class="downloadCard__btn">
{{'ダウンロード'| customer_login_link}}</span>
{% endif %}
</div>
{% endfor %}
</div><!-- /.download__cards -->
{% schema %}
{
"name":"download-item",
"blocks": [
{
"type": "product_meta",
"name": "ダウンロードのパンフレット",
"settings":[
{
"type":"image_picker",
"id":"download-img",
"label": "ダウンロードイメージ"
},
{
"type":"text",
"id":"download-title",
"default":"パンフレット名",
"label": "タイトル"
},
{
"type":"url",
"id":"download-file",
"label": "ファイルURL貼り付け"
}
]
}
],
"presets": [
{
"name": "ダウンロードのアイテム"
}
]
}
{% endschema %}
<style>
.download__cards {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
column-gap: 35px;
row-gap: 50px;
}
.downloadCard {
text-align: center;
}
.downloadCard__img{
width:200px;
height:300px;
margin: 0 auto;
box-shadow: 0px 2px 4px #333;
}
.downloadCard__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.downloadCard__btn{
padding: 10px 30px;
border: 1px solid #333;
background-color: skyblue;
text-decoration: none;
}
.downloadCard__btn a{
text-decoration: none;
color: #333;
}
</style>では、順番に説明していきます。
{% for block in section.blocks %}
{%- endfor -%}このコードではアイテムを表示させるコードを全てループさせます。
基本はschemaでコーディングをするならこちらのコードはセクションのどこかにあると思います。
<figure class="downloadCard__img"><img src="
{{block.settings.download-img|img_url:"master"}}" alt="">
</figure>
<h3 class="downloadCard__title">{{block .settings.download-title}}</h3>このコードでは、{{block.settings.download-img|image_url:”master”}}で管理画面から選択した画像をパンフレットの画像として表示させます。以下にループさせたアイテムのschemaのIdが「download-img」のものを返します。
また、同様に{{block .settings.download-title}}でパンフレットのタイトルを表示させます。
この辺りは少しややこしいですが、書いたコードが管理画面にどのように表示されるか確認してもらえれば理解できると思います。
{% if customer %}
<a class="downloadCard__btn" download
href="{{block.settings.download-file}}">ダウンロード</a>
{% else %}
<span class="downloadCard__btn view-more">
{{'ダウンロード'| customer_login_link}}</span>
{% endif %}このコードでのポイント
{% if customer %}です。
このコードは汎用性がめちゃくちゃ高いですのでぜひ活用ください。
このコードは「このサイトの会員なら〜」以下の文を実行してねとなります。
なのでこの場合なら、
<a class="downloadCard__btn" download
href="{{block.settings.download-file}}">ダウンロード</a>href=”{{block.settings.download-file}}で管理画面で選択したダウンロードファイルをダウンロードしてねとなります。
{% else %}
<span class="downloadCard__btn">
{{'ダウンロード'| customer_login_link}}</span>{% else %}で会員じゃなかったら〜となりますので
この下には会員ではない人は以下の処理を実行してね。となります。
<span class="downloadCard__btn">
{{'ダウンロード'| customer_login_link}}</span>こちらでは、{{‘ダウンロード’| customer_login_link}}で
「ダウンロード」をボタンを表示しています。しかし、リンク先はフィルターというものがかかって
| customer_login_linkに行ってねとなります。
つまり、ログインのリンクに飛んでねとなりますので、会員だけどログインし忘れているならログインしてね。
そうでなかったら新規顧客登録してね。というページに飛ばすことができます。
ここで注意点ですが、| customer_login_linkでは自動的にコードは<a href=”~~”>ダウンロード</a>となります。スタイルのクラスの当て方に注意してください。
もし<a>タグにクラス名を入れたい場合は、
|replace:'<a’,'<a class=◯◯’ で変換してください
実際の確認作業
このブロックをセクションフォルダを作成して全部入れ込みます。
僕の場合は、「Costom-download.liquid」というファイルを作成して作りました。
名前はなんでも大丈夫です！
では実際の動作は・・・・
こんな感じでレスポンシブにも対応しているセクションが完成しました！
また、今回は顧客登録していなかったのでログイン画面に遷移していますが、顧客登録していた場合は
ダウンロードファイルのリンクを入れておけばそちらのファイルをダウンロードします。
ダウンロードファイルは、管理画面の設定からshopifyのファイルに入れてURLをコピーすると簡単ですよ。
こちらでコードの編集は以上となります。
まとめ
いかがでしたでしょうか？
{% if customer %}はめちゃくちゃ使えるのでぜひ活用ください！
会員限定コンテンツなどは非常に有用なコードになりますので色々なところで使えます！
アプリだと月額かかってしまいますが、こちらのコード編集だとお客様の負担は０円です！
顧客とのWin×Winの関係を作るためにもぜひご提案ください！