---
title: "ミニカートレンダリングのカスタマイズ"
slug: "customizing-the-minicart-rendering"
abstract: "従来のアイテムツリーのミニカートレンダリングバリアントの設定方法。"
---
# ミニカートレンダリングのカスタマイズ

[ミニカートレンダリング](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/commerce-cart-renderings.html)には[、Scriban](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/working-with-scriban-templates.html "Working with Scriban templates")テンプレートというレンダリングバリアントが含まれています。ミニカートレンダリングには独自のデフォルトレンダリング[バリアントrootとデフォルトのレンダリングバリアント](https://doc.sitecore.com/xp/en/users/93/sitecore-experience-commerce/en/using-rendering-variants-to-display-product-information.html)(*/sitecore/Content///Presentation/Rendering Variants/Minicart*)があり、マークアップを生成するためにScribanテンプレートを使用します。Scribanテンプレートを修正することは可能ですが、ソフトウェアのアップグレード時にカスタマイズが上書きされないように、新しいカスタムレンダリングバリアントを作成するのが最善です。レンダリングの[ラベルを変更する](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/modify-a-label-for-a-rendering-that-uses-a-scriban-template.html "Modify a label for a rendering that uses a Scriban template")ことも可能です。

> !note The Minicart - 廃止されたレンダリングは既存サイトのみで利用可能で、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。

以下のコードは、デフォルトのレンダリングバリアント内で定義されたミニカートレンダリング用のScribanテンプレートを示しています。

<div class="inner-component"
 data-bind="event: { mouseover: hoverMinicart, mouseout: leaveMinicart }, css: minicartClassName">
 {{ # The <div> element to show error message. }}
 {{if o\_model.error\_message}}
 <div class="error-message">
 {{ o\_model.error\_message }}
 </div>
 {{ else }}
 <div class="basket">
 {{ # The <div> element will be available upon mouse hover. }}
{{ # In case the datasource is not set fallback to the context item
 if !i\_datasource
 i\_datasource = i\_item
 end
 }}
 <div class="top-text" data-bind="css: { 'loaded-cart': cartCount() > 0 }, event: { touchend: toggleMinicart }">
 <a href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7Bo/_model.top/_link%7D%7D" title="{{ sc\_raw i\_item 'View Cart Link Tooltip' }}">
 {{ sc\_field i\_datasource 'Top Text Label' }}
 </a>
 {{ # The <p> element displays the minicart count. }}
 <p class="cart-items-count" data-bind="text: cartCount"></p>
 </div>
 {{ # The <div>element displays the minicart lines. }}
 <div class="minicart" data-bind="with: cart">
 <!-- ko if: cartLines -->
 <div class="minicart-content" data-bind="foreach: cartLines, visible: cartLines() ? cartLines().length : 0">
 <div class="minicart-item" data-bind="attr: {'data-ajax-lineitemid': externalCartLineId}">
 <img alt="Image" data-bind="attr:{src: image, alt: displayName}" />
 <div class="minicart-info">
 <h5>
 <a data-bind="text: displayName, attr:{ href:productUrl}"></a>
 </h5>
 <p>
 {{ sc\_raw i\_datasource 'Quantity' }} <strong data-bind="text: quantity"></strong>
 </p>

 <span class="price" data-bind="text: lineTotal, visible: !isFreeGift"></span>
 <span class="freegift-label" data-bind="visible: isFreeGift">{{ sc\_raw i\_datasource 'Free Gift Text' }}</span>
 </div>
 {{ # The <span> element is used to delete the minicart line. }}
 <span class="minicart-delete">
 <a href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/customizing-the-minicart-rendering.html#">
 <span data-bind="click: $parents1.removeItem"></span>
 </a>
 </span>
 </div>
 </div>
 <!-- /ko -->
 {{ # The <img> element displays the loading bar image. }}
 <img class="loading-bar" data-bind="visible: $parents0.isFetchInProgress"
 src="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20sc/_follow%20i/_datasource%20'Loading%20Bar%20Image'%20|%20sc/_medialink%20%7D%7D" />

 {{ # The <div> element displays the total and the amount for a minicart line item. }}
 <div class="minicart-footer">
 <span class="minicart-total-label">{{ sc\_raw i\_datasource 'Total Label' }}</span>
 <span class="minicart-total-amount" data-bind="text: total"></span>
 </div>
 {{ # The <div> element contains two buttons - Checkout and Viewcart. }}
 <div class="minicart-buttons">
 {{ if !o\_model.hide\_checkout\_button }}
 <a class="checkout-button" title="{{ sc\_raw i\_item 'Checkout Link Tooltip' }}"
 href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20o/_model.checkout/_link%20%7D%7D">
 {{ sc\_raw i\_datasource 'Checkout Link Text' }}
 </a>
 {{ end }}
 <div>
 </div>
 <a class="view-cart-button" href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20o/_model.view/_cart/_link%20%7D%7D"
 title="{{ sc\_raw i\_item 'View Cart Link Tooltip' }}">
 {{ sc\_raw i\_datasource 'View Cart Link Text' }}
 </a>
 </div>
 </div>
 </div>
 {{ # The <div> element contains two hidden fields recalculateTotals and cacheCartCount. }}
 <div class="minicart-data" style="display:none">
 <input type="hidden" value="{{ o\_model.recalculate\_totals }}" id="recalculateTotals" />
 <input type="hidden" value="{{ o\_model.cache\_cart\_count }}" id="cacheCartCount" />
 </div>
 {{ end }}
</div>

> !重要パフォーマンスを向上させるために、[ミニカートカウントキャッシュを無効にし、ミニカートの再計算](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/configure-the-minicart-rendering.html "Configure the Minicart rendering")も可能です。

## ミニカートレンダリングモデル

ミニカートレンダリング用のScribanテンプレートでは、以下の図に示すようにMinicartRenderingModelモデルに含まれるプロパティやオブジェクトにアクセスできます。

![Class diagram of the Minicart rendering model.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/MinicartRenderingModel.png)

## ミニカートコールシーケンス

以下のシーケンス図は、ショッパーがミニカートとやり取りした際の通話の概要を示しています。

![Sequence diagram](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/Visio_MinicartCalls.png)