Liquid、JavaScriptなどに関する質問
Prestigeを使用してアパレル系ショップを運営しております。
お客様の着用写真を紹介するギャラリーページを作成し、Lightboxで写真を拡大表示にしたいと考えております。
こちらのQ&A内で見つけた「【Debut】Light Boxで画像をポップアップ表示にしたい」を参考に
パートナーアカウントの方でDawnを使用して試してみたところうまくいったのですが、
Presitigeを使用している方ではどうしてもうまくいきません。
具体的には、写真クリックで拡大表示はされますが、"close.png”などの画像は表示されず、ブラウザの戻るボタンでしか拡大を解除できません。
原因と解決方法を教えていただけると有り難いです。
お忙しいところ恐れ入りますが何卒よろしくお願いいたします。
参考にされた投稿に記載の、
③
lightbox.css
close.pngなどのimg urlを修正
において、
Prestigeではうまくいかない問題があるのかもしれませんね。
Prestigeにおいて上記の画像のURLをどのように修正されたかお教えいただければ、
具体的な回答ができるかもしれません。
しかし、
Prestigeが有料テーマである都合上、
コードを実際に埋め込めんでの検証ができないので、
その点、ご了承ください。
ご参考まで。
(キュー田辺)
ご回答誠にありがとうございました。
Prestigeにおいて上記の画像のURLをどのように修正されたかお教えいただければ、
具体的な回答ができるかもしれません。
こちらについてですが、
lightbox.cssの以下4箇所を修正しました。
-----
background: url(../images/loading.gif) no-repeat;
↓
background: url(images/loading.gif) no-repeat;
-----
background: url(../images/prev.png) left 48% no-repeat;
↓
background: url(images/prev.png) left 48% no-repeat;
-----
background: url(../images/next.png) right 48% no-repeat;
↓
background: url(next.png) right 48% no-repeat;
-----
background: url(../images/close.png) top right no-repeat;
↓
background: url(close.png) top right no-repeat;
-----
加えて、theme.liquidに以下を追記しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{{ 'lightbox.css' | asset_url | stylesheet_tag }}
{{ 'lightbox.js' | asset_url | script_tag }}
テーマの開発元であるmaestrooにも問い合わせてみたのですが、サポート外とのことで解決には至りませんでした。
お忙しい所何度も申し訳ありませんが、お知恵をお借りできれば助かります。
よろしくお願いいたします。
ありがとうございます。
Dawnの方も、同様の修正をされていて、Dawnはうまく動いているのですね。
いただいた修正方法ですと、画像のパスが通らないと思うので、
逆にDawnの方がうまくっているのが、不思議ではあるのですが、
私が知らない仕様があるのかもしれません。
ですので、
私が分かる範囲での回答になります。
(1)
こちらから、
https://github.com/lokesh/lightbox2/tree/dev/src/images
loading.gif
prev.gif
next.gif
close.gif
をダウンロードします。
(2)
ストア管理画面 > 設定 > ファイルから、
loading.gif
prev.gif
next.gif
close.gif
をストアに、アップロードします。
(3)
上記、アップロードが完了しますと、
https://cdn.shopify.com/s/files/0/00000/0000/0000/files/loading.gif
のようなリンクを、同画面から取得できるかと思いますので、
そちらを使って、
下記のようにされてはいかがでしょうか?
※実際のURLは、画面から取得したものをお使いください。
-----
background: url(../images/loading.gif) no-repeat;
↓
background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files//loading.gif) no-repeat;
-----
background: url(../images/prev.png) left 48% no-repeat;
↓
background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/prev.png) left 48% no-repeat;
-----
background: url(../images/next.png) right 48% no-repeat;
↓
background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/next.png) right 48% no-repeat;
-----
background: url(../images/close.png) top right no-repeat;
↓
background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/close.png) top right no-repeat;
-----
ご参考まで。
(キュー田辺)
詳しいご説明誠にありがとうございました!
教えていただいた方法で試してみましたが、残念ながら解決しませんでした…。
もう少し自分でも試行錯誤してみようと思います。
貴重なお時間をありがとうございました。
承知しました。
もし、解決が難しそうでしたら、
実際にエラーが発生している状態がわかるURLを、
プライベートメッセージなどでお送りいただければ、
より具体的な解決方法を提示できるかもしれません。
(お約束はできませんが。。。)
すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023