FROM CACHE - jp_header

カートを確実に経由してもらうために、「支払いへ進む」ボタンを非表示にしたい

解決済
harumi
観光客
8 0 1

こんにちは。閲覧いただきありがとうございます。

現在テーマはShowcaseを使用しており、Easypointsアプリを使用している関係上、購入の際にカートを必ず経由して欲しいという狙いがあります。

そのため、カートに追加したあと出てくるポップアップ上の「お支払いへ進む」ボタンを非表示にし、「カートを見る」を大きく配置したいと考えております。

スクリーンショット 2021-10-03 8.12.52.png

 

デベロッパーツールでは、styleを書き換えての実現はできているのですが、ファイルの場所がわからずカスタマイズできずにいます。
デベロッパーツールで表示されるクラス名で全体のcssファイルを修正しても反映されませんでした。

 

スクリーンショット 2021-10-03 8.16.55.png

 

どなたか、カートのポップアップのファイル位置と、支払いへ進むボタンの消し方を教えていただけませんでしょうか。

お手数をおかけいたしますが、よろしくお願いいたします。

 

1 件の受理された解決策

ベストソリューション
toooru
Shopify Partner
93 52 97

成功

検証していないため違っていたらすみませんが、おそらくボタンを消すのは '<a href="' + theme.routes.checkout + '" class="button button--checkout" [data-cc-checkout-button]>' + theme.strings.popupCheckout + '</a> ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。

ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。

元の投稿で解決策を見る

4件の返信4
toooru
Shopify Partner
93 52 97

Showcaseテーマですと、assets/theme.js に入っているように見えますので、ファイル内を id="added-to-cart" などで検索してみてください。

harumi
観光客
8 0 1

ご返信ありがとうございます。見つかりました。

以下のようなコードになっているのですが、どのように編集すれば「支払い」ボタンを非表示にし「カートを見る」ボタンを大きくすることができますでしょうか。

 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">&times;</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

 

ご教授いただけるとありがたいです。よろしくお願いいたします。

toooru
Shopify Partner
93 52 97

成功

検証していないため違っていたらすみませんが、おそらくボタンを消すのは '<a href="' + theme.routes.checkout + '" class="button button--checkout" [data-cc-checkout-button]>' + theme.strings.popupCheckout + '</a> ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。

ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。

harumi
観光客
8 0 1

ありがとうございます!

#added-to-cart .button--checkout{
display:none;
}
#added-to-cart .button{
width:calc(100% - 10px);
}

 

で実装できました。ありがとうございました!