Liquid、JavaScriptなどに関する質問
こんにちは。閲覧いただきありがとうございます。
現在テーマはShowcaseを使用しており、Easypointsアプリを使用している関係上、購入の際にカートを必ず経由して欲しいという狙いがあります。
そのため、カートに追加したあと出てくるポップアップ上の「お支払いへ進む」ボタンを非表示にし、「カートを見る」を大きく配置したいと考えております。
デベロッパーツールでは、styleを書き換えての実現はできているのですが、ファイルの場所がわからずカスタマイズできずにいます。
デベロッパーツールで表示されるクラス名で全体のcssファイルを修正しても反映されませんでした。
どなたか、カートのポップアップのファイル位置と、支払いへ進むボタンの消し方を教えていただけませんでしょうか。
お手数をおかけいたしますが、よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
検証していないため違っていたらすみませんが、おそらくボタンを消すのは '<a href="' + theme.routes.checkout + '" class="button button--checkout" [data-cc-checkout-button]>' + theme.strings.popupCheckout + '</a> ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。
ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。
Showcaseテーマですと、assets/theme.js に入っているように見えますので、ファイル内を id="added-to-cart" などで検索してみてください。
ご返信ありがとうございます。見つかりました。
以下のようなコードになっているのですが、どのように編集すれば「支払い」ボタンを非表示にし「カートを見る」ボタンを大きくすることができますでしょうか。
showThemeModal(['<div id="added-to-cart" class="theme-modal theme-modal--small" role="dialog" aria-modal="true" aria-labelledby="added-to-cart-title">', "<div class=\"inner\" style=\"top:".concat(offset, "px\">"), '<a href="#" data-modal-close class="modal-close">×</a>', '<h4 id="added-to-cart-title">' + theme.icons.tick + theme.strings.productAddedToCart + '</h4>', '<div class="cart-product">', "<div class=\"cart-product__image\"><img src=\"".concat(thumbUrl, "\" alt=\"").concat(product.featured_image.alt, "\"/></div>"), '<div class="cart-product__content">' + '<p class="cart-product__content__title">', product.product_title, '</p>' + "".concat(variantHtml ? variantHtml : '') + '</div>', '</div>', "<p class=\"links ".concat(noCheckoutButton ? 'links--no-checkout' : '', "\">"), '<a href="' + theme.routes.cart_url + "\" class=\"button ".concat(noCheckoutButton ? '' : 'alt', "\">") + theme.strings.viewCart + '</a>', '<a href="' + theme.routes.checkout + '" class="button button--checkout" [data-cc-checkout-button]>' + theme.strings.popupCheckout + '</a> ', '</p>', '</div>', '</div>'].join(''), "added-to-cart", null);
} //Update header summary
ご教授いただけるとありがたいです。よろしくお願いいたします。
成功
検証していないため違っていたらすみませんが、おそらくボタンを消すのは '<a href="' + theme.routes.checkout + '" class="button button--checkout" [data-cc-checkout-button]>' + theme.strings.popupCheckout + '</a> ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。
ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。
ありがとうございます!
#added-to-cart .button--checkout{
display:none;
}
#added-to-cart .button{
width:calc(100% - 10px);
}
で実装できました。ありがとうございました!
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024