Liquid、JavaScriptなどに関する質問
無料テーマのDebutを使って開発を行っているのですが、TOPページに新しいセクションを追加する方法がわからず困っています。
■やったこと
sectionに新しく、「slick-slider.liquid」というファイルを作成。
内容は下記。
<div class="top-slider" id="js-top-slider">
{% for block in section.blocks %}
<div class="top-slider-content">
<img src="{{ block.settings.slick_image | img_url: '480x' }}">
</div>
{% endfor %}
</div>
<script>
$('#js-top-slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true
});
</script>
<style>
.top-slider{
width: 100%;
}
.top-slider-content{
width: 100%;
height: 904px;
background-position: center;
background-size: cover;
}
.top-slider-content img{
object-fit: cover;
}
</style>
{% schema %}
{
"name": "スリックスライダー",
"class": "index-section",
"max_blocks": 10,
"blocks": [
{
"name": "slider-imege",
"type": "header",
"settings": [
{
"type": "image_picker",
"id": "slick_image",
"label": "slick image"
}
]
}
]
}
{% endschema %}
その他、slickを使うためのCDNなどはヘッダーで読み込んでいます。
■問題
schemaの記述に問題があるのか、正常に保存できてもTOPページのカスタマイズ時に、「セクションを追加」の欄に今回作成した「スリックスライダー」が出てきません。
書いたコードに問題があるのか、もしくはsection以外の場所にもなにかファイルが必要なのか、ご教授いただけると助かります。
解決済! ベストソリューションを見る。
成功
トップページの動的セクションは、{{ content_for_index }} の場所に、
config / settings_data.json で設定したプリセットデータがあるのですが、
書ききれないので、こちらの公式ブログを見ながら試して見てください。
https://www.shopify.jp/blog/partner-shopify-theme-section-first-create
解決策ではありませんが、debutのsectionsに含まれる、slideshow.liquidを少しずつ思った形に改良して
作られてはいかがでしょうか?
ありがとうございます!!
このスライダーはそうしませんでしたが、他の箇所はその方法で、できました!!
おそらくTOPのセクションに入れるための記述があるのかと思うのですが、その箇所がわからず、セクションに追加できませんでした。
最終的に、index.liquidでセクションを読み込むことで、ヘッダーのように可変的ではない形で読み込むことができました!
index.liquidに {% section 'slick-slider' %} を追加して見てください。
ありがとうございます!
僕も最終的にその方法で解決しましたが、その方法だとTOPのセクションの上に独立してしまうので、あまりスマートなやり方ではないかもしれません。
成功
トップページの動的セクションは、{{ content_for_index }} の場所に、
config / settings_data.json で設定したプリセットデータがあるのですが、
書ききれないので、こちらの公式ブログを見ながら試して見てください。
https://www.shopify.jp/blog/partner-shopify-theme-section-first-create
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024