Liquid、JavaScriptなどに関する質問
現在、
DawnにてHPを作成してます。
「PageFly」でランディングページ兼商品ページを作成して、
そのページ内で「Mikawaya Subscription 」のサブスクリプション購入のダイレクトリンクボタンを設置しました。
shopifyのデフォルトの購入ボタンだと、
サブスクリプションではなく、
通常(1回きり)の購入となってしまうため、
できればデフォルトの購入ボタンがひょうじされる商品ページ&コレクションページを削除したいのですが、
どなたか方法をご教示いただけないでしょうか?
shopifyのサポートに問い合わせたところ、
・「これらの購入オプションでのみこの商品を表示する」にチェックをいれる
を案内されましたが、
うまくいきませんでした。
当方、
専門的な知識がなく、
コード編集についてもよくわかっていないため、
なるべくわかりやすくご教示いただけますと幸いです。
ご返信お待ちしております。
何卒よろしくお願いいたします。
解決済! ベストソリューションを見る。
開発ストアで下記を試してみました。
質問者さまと同様に、
商品一覧ページと、商品詳細ページは閲覧できる状態のままですが、
「カートに追加する」をクリックしても、カート投入されず、
「今すぐ購入」をクリックしても、下図のような画面が表示され、チェックアウトに進めなくなりました。
回答ではなく、質問になってしまい恐縮なのですが、
質問者様はこの状態にならず、
通常の購入ができてしまう状態ということで合っていますでしょうか?
(キュー田辺)
お世話になります。
>質問者様はこの状態にならず、
>通常の購入ができてしまう状態ということで合っていますでしょうか?
→はい、通常購入の状態で商品がカートに入ります。
田辺様が添付された画像は1度も見たことがありません。。
@ky_ssm さま
状況承知いたしました。
なぜ、同様の設定をしているのに、
こちらでは購入を制限でき、そちらではできないのか、の解決については、
私では力不足なので、
商品詳細ページの表示をどうにかする方法と、
コレクションページでの該当商品の表示をどうにかする方法、
をお伝えいたします。
なお、「削除」はできないため、(できるのかもしれませんが、私は思いつかないため、)
あくまで「表示をどうにかする」方法になります。
商品詳細ページの表示をどうにかする
管理画面 > オンラインストア > 対象のテーマの「アクション」 > コードを編集
で、
「レイアウト」のtheme.liquidを編集します。
該当商品にアクセスがあった際に、
トップページに自動的に遷移するようにしてしまいます。
theme.liquidの3行目付近
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
の<head>の下に下記のように追記します。
<head>
{%- if template contains 'product' -%}
{% if product.id == {{ 商品ID }} %}
{% style %}
body { display:none! important; }
{% endstyle %}
<meta http-equiv="refresh" content="0;URL=/">
{% endif %}
{%- endif -%}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{{ 商品ID }} には、非表示にしたい商品のIDを入力します。
商品のIDは、管理画面でその商品の編集画面を開いた際のURLから取得できます。
xxxxxxx.myshopify.com/admin/products/00000000000000
末尾の0が並んでいるところが商品のIDになります。
(実際には0が並んでいるわけではなく、しっかり数字が並んでいますので、そちらの数字をコピーして使用してください。)
コレクションページでの該当商品の表示をどうにかする
Shopifyをあまりカスタマイズせずに利用されている場合は、
基本的に、ALLコレクションに表示される商品を調整すれば良いはずです。
管理画面 > 商品 > コレクションにて、下図のようにします。
ALLを全角で入力してしまうと、
collections/all を編集できなくなってしまうため、
必ず半角でご入力ください。
以上になります。
なるべく簡潔に説明するために、
大雑把な方法をご紹介しましたが、
もっとここをこうするにはどうしたら良いか? などのご質問ありましたら、
こちらのスレッドに投稿ください。
ご参考まで。
(キュー田辺)
田辺様
ご連絡ありがとうございます。
1.商品詳細ページの表示をどうにかする につきまして、
商品IDを入力したコードで編集してみましたが、
該当商品は表示されてしまいます。
<head>の後ろに
{% render 'pagefly-head' %} があるのですが、
これは関係あるのでしょうか。。。?(添付画像をご確認ください。)
2.コレクションページでの該当商品の表示をどうにかする につきまして、
こちらはうまくいきました!
ただ、該当商品があと2点あります。
同じように設定したら、
2点は表示されたままです。
追加で非表示にする場合はどのようにしたらいいのでしょうか?
お手数ですが、
改めてご教示いただけますと幸いです。
何卒よろしくお願いいたします。
@ky_ssm さま
> <head>の後ろに
> {% render 'pagefly-head' %} があるのですが、
> これは関係あるのでしょうか。。。?(添付画像をご確認ください。)
いいえ、関係ないかと思います。
アプリ (https://apps.shopify.com/pagefly?locale=ja) が挿入しているコードなだけで、
それがあるから私が提示したコードが機能しない、というのは考えにくいです。
考えられるのは、
のどちらかかと思います。
> 同じように設定したら、
> 2点は表示されたままです。
> 追加で非表示にする場合はどのようにしたらいいのでしょうか?
「商品の条件合致」を、「いずれかの条件」にされていないでしょうか?
その場合は、「すべての条件」にご変更ください。
ご参考まで。
(キュー田辺)
田辺様
度々恐れ入ります。
1.商品詳細ページの表示をどうにかする につきまして、
>{{ 商品ID }}の "{{" と "}}" を残してしまっている。「{{ 商品ID }}」全体を商品IDに変更してください。
↑
これが原因でした、、、
かっこを削除したら無事非表示となりました。
あと2点同様の処理をおこないたいのですが、
下記を一つの塊として、その下にに2つ塊を入れればいいのでしょうか?
↓
<head>
{%- if template contains 'product' -%}
{% if product.id == {{ 商品ID }} %}
{% style %}
body { display:none! important; }
{% endstyle %}
<meta http-equiv="refresh" content="0;URL=/">
{% endif %}
{%- endif -%}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2.コレクションページでの該当商品の表示をどうにかする につきまして、
確認したところ、
「商品の条件合致」は、「すべての条件」を選択していました。
コレクションの作成は添付画像1で合ってますでしょうか?
画像1のように設定すると、
画像2のような表示になります。
お手数ですが、
ご確認くださいますようお願いいたします。
ご連絡お待ちしております。
何卒よろしくお願いいたします。
@ky_ssm さま
> あと2点同様の処理をおこないたいのですが、
> 下記を一つの塊として、その下にに2つ塊を入れればいいのでしょうか?
はい、それでも大丈夫です。
しかし、下記のようにした方が簡単です。
{%- if template contains 'product' -%}
{% if product.id == {{ 商品①ID }} or product.id == {{ 商品②ID }} or product.id == {{ 商品③ID }} %}
{% style %}
body { display:none !important; }
{% endstyle %}
<meta http-equiv="refresh" content="0;URL=/">
{% endif %}
{%- endif -%}
> コレクションの作成は添付画像1で合ってますでしょうか?
> 画像1のように設定すると、
> 画像2のような表示になります。
合っています。
画像1に、「このコレクションには商品がありません」と表示されているのが気になりますが、
おそらく、スクリーンショットを撮るために、別の開発ストアを使われただけ、だと思いますので、
一旦横に置かせていただきます。
画像2についてですが、
Featured Collectionに設定しているコレクションは何でしょうか?
もし、ALLを設定していれば、これまでの設定で、商品は表示されないはずです。
ALL以外のコレクションを設定されているようでしたら、
ALLでの設定同様、特定の商品名を持つ商品を除外するように、そのコレクションにも設定することで解決されるかと思います。
(キュー田辺)
田辺様
度々恐れ入ります。
> 合っています。
> 画像1に、「このコレクションには商品がありません」と表示されているのが気になりますが、
> おそらく、スクリーンショットを撮るために、別の開発ストアを使われただけ、だと思いますの> で、
> 一旦横に置かせていただきます。
↑
「別の開発ストア」とは何を指すのでしょうか、、、?
サブスクリプションの商品を3点販売しようと思っており、
1回きりの販売はしないよう設定しているのでそのような表示になっているのでしょうか?
また、
画像2はカートのスクリーンショットでした。
失礼しました。
「collections/all」のページは添付画像のようになりました。
ありがとうございます。
ちなみに、
カートページも非表示にすることはできますでしょうか?
ご教示いただけますと幸いです。
ご連絡お待ちしております。
お手数ですが何卒よろしくお願いいたします。
> 「別の開発ストア」とは何を指すのでしょうか、、、?
前提として、
商品がいくつかある中にサブスクリプション商品が混ざっている、と考えていますので、
私がお伝えした設定によって、サブスクリプション商品が除外されたとしても、
他の商品がコレクションに残るはずですから、
「このコレクションには商品がありません」
と表示されているのは不可解でした。
考えられるのは、
こちらのコミュニティへの投稿は一般に公開されているものですから、
質問者様のストアの商品を公開しないために、
他の開発ストアを用意して、
スクリーンショットを撮られたのかな、
と考えた次第です。
また、
こちらのコミュニティに投稿される方は、
ShopifyでのECサイト構築を会社として請け負っていらっしゃる方が多い印象です。(私もそうです。)
その場合は、Shopify Partnerに登録されていることがあるので、
複数の開発ストアを無料で持つことができます。
(もし、質問者様もShopify Partnerを登録されていないようでしたら、一切費用はかけずに開発ストアを自由に構築でき、検証が楽になりますから、Partnerに登録されることをおすすめします。 https://help.shopify.com/ja/partners)
さて、本題ですが、
/collections/all は、ご希望通りの表示になったとのことでよかったです。
カート画面については、
前回の返信でお伝えした通り、
Featured Collectionに設定されているコレクションをご確認ください。
確認の仕方は、
管理画面 > オンラインストア > 現在使用しているテーマの「カスタマイズ」
あとは下図のようにします。
ご参考まで。
(キュー田辺)
> 商品がいくつかある中にサブスクリプション商品が混ざっている、と考えていますので、
> 私がお伝えした設定によって、サブスクリプション商品が除外されたとしても、
> 他の商品がコレクションに残るはずですから、
> 「このコレクションには商品がありません」
> と表示されているのは不可解でした。
↑
サブスクリプション商品のみ販売しております。
他の商品はありません。
そうすると、
「このコレクションには商品がありません」と表示は正しいでしょうか?
> Partnerに登録されることをおすすめします。
↑
ありがとうございます。
こちら登録してみました。
> Featured Collectionに設定されているコレクション
↑
こちら非表示にいたしました。
ありがとうございます。
> サブスクリプション商品のみ販売しております。
> 他の商品はありません。
> そうすると、
> 「このコレクションには商品がありません」と表示は正しいでしょうか?
はい、それでしたら、コレクションに商品がない状態が正しいです。
成功
田辺様
ご丁寧に対応いただきありがとうございました。
また機会がありましたらよろしくお願いいたします。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024