【Shopify】テスト用・非公開としたい商品をフロントから見えなくし、商品ページにパスワード保護をかける!【アプリなし】

Shopify
Shopify

Shopifyの仕様として、テスト注文をしたい場合は、公開商品でないと決済完了ができないということがあります。

じゃあ、新規決済方法を導入したときや、ちょっとイレギュラーな注文の仕方をする商品(オーダーの名入れ商品など)がちゃんと問題なく注文できるか、どうやってテストできるんだろう?

どうやら、標準では、そのような方法が見当たりません。

商品は「下書き」状態のときは商品詳細ページのプレビューは見れるのですが、そこからカートに入れたあと、注文したあとの動きは、「公開」状態にしていないと見ることはできません。

なので、どのコレクションにも含めず、フロント画面からの導線をなくした状態でテスト注文したいときだけ公開状態にして注文テスト、、という方法が思い浮かびますが、それでも「商品名検索」や「すべての商品」、「レコメンド」で表示される可能性は残っています。

なので、”LockSmith”のような、パスワードロックをかけられるアプリを使用する方法がありえます。

今回は、アプリを使用せず、簡易的にパスワードロックをする方法を紹介します。

仕様

商品のタグ情報に

test

と入れた商品は、フロントで表示させず、
商品のURLをたたくことのみでページが表示されるようにします。
この場合はURLを直接入力しないと商品ページにたどり着けなくなりますが、万が一奇跡的に正しいURLを打ったお客様は見えてしまいますので、その対策としては、”test”というタグがある商品の商品詳細ページでは、パスワードを入力しないとページが見れないようにしました。

実装方法

①layout / theme.liquidの最下部にコードを追加


{% if template == 'product' %}
  {% if product.tags contains 'test' %}
  <script>
    //パスワード認証 ( pass : test1234 )
    document.body.style.display = 'none';
    window.onload = function () {
      var UserInput = null;
    
      var cookies = document.cookie;
      var cookiesArray = cookies.split(';');
      var pass = 'dHJlc3Rlc3Q=';
    
      for (var c of cookiesArray) {
        var cArray = c.split('=');
        if (cArray[0].indexOf('cruw-basic') > -1) {
          UserInput = decodeURIComponent(cArray[1]);
        }
      }
      if (!(UserInput && UserInput == window.atob(pass))) {
        UserInput = prompt("パスワードを入力して下さい:", "");
      }
    
      if (UserInput != window.atob(pass)) {
        document.body.innerHTML = "403 Forbidden";
      } else {
        var now = new Date();
        //now.setMinutes(now.getMinutes() + 60 * 24 * 3); //コメントアウト
        now.setMinutes(now.getMinutes()); //1分で認証が切れるので都度パスワード入力が必要
        document.cookie = "cruw-basic=" + encodeURIComponent(UserInput) + ";expires=" + now.toUTCString() + "; path=/;";
      }
      document.body.style.display = null;
    }
  </script>
  {% endif %}
{% endif %}

これで、ページを開いた際、ページロード前に以下のようなブラウザのモーダルが表示され、パスワードを入力しないとページが開かないようにできました。

パスワードに使用しているワードは、test1234ですが、
コード内では

var pass = 'dHJlc3Rlc3Q=';

というコードに”test1234″をBASE64エンコードした文字列

dHJlc3Rlc3Q=

を入れて、暗号化しています。

BASE64へのエンコードは、以下のようなサイトですることができます。

Base64 エンコード・デコード:画像などのデータをBase64文字列に変換、逆変換 | ラッコツールズ🔧
左の入力エリアに文字列を入力しエンコードボタンをクリックすると、文字列をBase64の形で表されるデータにエンコードします。右の入力エリアにBase64の形で表された文字列を入力しデコードボタンをクリックすると、エンコード前の文字列にデコードします。 Base64とは?64種類の英数字のみを使い、それ以外の文字を...

②ほか、以下のページのproductをループさせるforの直後にif文を追加

以下のページのproductをループさせるforの直後にif文を追加し、testというタグを持つproductの場合はループの処理をスキップする(何も処理しない)ようにすればOKです。コードはテーマによって様々なので割愛します。

※テーマによっては他にも必要な場合もあります。

  • section / collection–products.liquid(コレクションのテンプレートページ)
  • section / search.liquid(検索結果のテンプレートページ)
  • section / featured-collection.liquid(TOPページなどに配置するような特集コレクションのセクション)
  • section / recommendation.liquid(商品レコメンドのセクション)

もっとつきつめるなら

上記方法での懸念は、testタグを入れたまま長期間(例えば何日間も)公開状態にしていると、Googleのクローラーにページをインデックスされつつも見えないページとなるので、検索評価的によくない。

それも解消したい場合は、layout / theme.liquidの<head>タグ内の<meta robot>のタグを、testという商品タグがある商品詳細ページでは”noindex, nofollow”にするような分岐も検討したほうがよいと思います。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

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