# BuyButtonのカート内で、合計金額を表示させたい

**URL:** <https://community.shopify.com/t/buybutton/41328>\
**Category:** 技術的なQ＆A\
**Created:** [March 30, 2021, 5:51am UTC](https://community.shopify.com/t/buybutton/41328 "2021-03-30T05:51:17Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

BuyButton.jsでカート表示をカスタマイズする際、`data-element="cart.footer"` を `details` で変更しており、合計金額として `data-element="cart.subtotal"` を表示する書き方が分からない、という質問。提示されたコードでは `cart.contents`、`templates`、`order` を編集しており、`{{data.total_price}}` のような記述で合計表示を試している。 

回答では、BuyButtonで使われるのは Shopify のテンプレート言語 Liquid ではなく、BuyButton.js 独自のカスタマイズ仕様に従う必要があると指摘された。参考資料として公式ドキュメント（BuyButton.js のカスタマイズ仕様）が案内されている。 

現時点では、`cart.subtotal` を具体的にどう記述すれば表示できるかの実装例までは示されておらず、問題は未解決のまま。

<div class="post-metadata">

**Author:** ![jarinkogirl](https://avatars.discourse-cdn.com/v4/letter/j/ce73a5/32.png) [@jarinkogirl](https://community.shopify.com/u/jarinkogirl)\
**Post date:** [March 30, 2021, 5:51am UTC](https://community.shopify.com/t/buybutton/41328/1 "2021-03-30T05:51:17Z")

</div>

現在、detailsを使用して、data-element="cart.footer"部分をカスタマイズしています。

合計金額（data-element=“cart.subtotal”）を表示させたいのですが、記述の仕方が分かりません。

どなたか、ご教授いただけますと幸いです。

```markup
"cart": {
                            "contents": {
                              "button": false,
                              "details": true,
                            },
                            "templates": {
                              "button":
                                '' +
                                '

合計

' +
                                '

{{data.total_price}}

' +
                                '' +
                                ''
                                '
'
                            },
                            "order": [
                              'img',
                              'title',
                              'price',
                              'options',
                              'quantity',
                              'button',
                              'details',
                              'lineItems',
                              'footer',
                              'total',
                              'subtotal'
                            ],

```

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [April 15, 2021, 12:07pm UTC](https://community.shopify.com/t/buybutton/41328/2 "2021-04-15T12:07:03Z")

</div>

BuyButtonで使われているBuyButton.js のカスタマイズ仕様は以下にのっていますが、

[https://shopify.github.io/buy-button-js/](https://shopify.github.io/buy-button-js/)

Liquidは使えなかったと思います。