課題:
ShowcaseテーマとEasypointsアプリを使用中、カートを必ず経由させるため、カート追加後のポップアップで「お支払いへ進む」ボタンを非表示にし、「カートを見る」ボタンを大きく表示したい。
解決プロセス:
assets/theme.js内でid="added-to-cart"を検索して該当コードを発見解決方法（Showcaseテーマ）:
#added-to-cart .button--checkout{
display:none;
}
#added-to-cart .button{
width:calc(100% - 10px);
}
このCSSで実装成功。
追加情報（Dawnテーマ）:
component-cart-notification.cssの最下部に以下を追加:
form#cart-notification-form {
display: none;
}
ステータス: 解決済み。テーマによって実装方法が異なることが判明。
こんにちは。閲覧いただきありがとうございます。
現在テーマはShowcaseを使用しており、Easypointsアプリを使用している関係上、購入の際にカートを必ず経由して欲しいという狙いがあります。
そのため、カートに追加したあと出てくるポップアップ上の「お支払いへ進む」ボタンを非表示にし、「カートを見る」を大きく配置したいと考えております。
デベロッパーツールでは、styleを書き換えての実現はできているのですが、ファイルの場所がわからずカスタマイズできずにいます。
デベロッパーツールで表示されるクラス名で全体のcssファイルを修正しても反映されませんでした。
どなたか、カートのポップアップのファイル位置と、支払いへ進むボタンの消し方を教えていただけませんでしょうか。
お手数をおかけいたしますが、よろしくお願いいたします。
Showcaseテーマですと、assets/theme.js に入っているように見えますので、ファイル内を id=“added-to-cart” などで検索してみてください。
ご返信ありがとうございます。見つかりました。
以下のようなコードになっているのですが、どのように編集すれば「支払い」ボタンを非表示にし「カートを見る」ボタンを大きくすることができますでしょうか。
showThemeModal(['', "
"), '×', '#### ' + theme.icons.tick + theme.strings.productAddedToCart + '', '', "
"), '' + '
', product.product_title, '
' + "".concat(variantHtml ? variantHtml : '') + '
', '
', "
"), '") + theme.strings.viewCart + '', '' + theme.strings.popupCheckout + ' ', '
', '
', '
'].join(''), "added-to-cart", null);
} //Update header summary
ご教授いただけるとありがたいです。よろしくお願いいたします。
検証していないため違っていたらすみませんが、おそらくボタンを消すのは ‘<a href="’ + theme.routes.checkout + ‘" class=“button button–checkout” [data-cc-checkout-button]>’ + theme.strings.popupCheckout + ' ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。
ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。
ありがとうございます！
#added-to-cart .button--checkout{
display:none;
}
#added-to-cart .button{
width:calc(100% - 10px);
}
で実装できました。ありがとうございました！
コメント失礼します。
私も同じような状態なのですが、Dawnテーマの場合も同じコードでしょうか？
オンラインストア＞テーマ＞コード編集＞検索窓「component-cart-notification.css」
最下に下記を追加 でテーマ「Dawn」は出来ました。
/** ポップアップ 購入ボタン 非表示 **/
form#cart-notification-form {
display: none;
}