ミニカートレンダリングのカスタマイズ
Version: 10.1
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ミニカートレンダリングには、Scribanテンプレートの形式のレンダリングバリアントが含まれています。ミニカートレンダリングには、独自のデフォルトレンダリングバリアントルートと、マークアップを生成するためのScribanテンプレートを使用するデフォルトのレンダリングバリアント(/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Minicart)があります。Scribanテンプレートは変更できますが、この場合は、ソフトウェアのアップグレード中にカスタマイズが上書きされないように、新しいカスタム レンダリング バリアントを作成することをお勧めします。レンダリングのラベルを変更することもできます。
メモ
The Minicart - 非推奨のレンダリングは、既存のサイトでのみ使用でき、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。
次のコードは、デフォルトのレンダリングバリアント内で定義されたミニカートレンダリングのScribanテンプレートを示しています。
RequestResponse
<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="{{o_model.top_link}}" 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="#">
<span data-bind="click: $parents[1].removeItem"></span>
</a>
</span>
</div>
</div>
<!-- /ko -->
{{ # The <img> element displays the loading bar image. }}
<img class="loading-bar" data-bind="visible: $parents[0].isFetchInProgress"
src="{{ sc_follow i_datasource 'Loading Bar Image' | sc_medialink }}" />
{{ # 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="{{ o_model.checkout_link }}">
{{ sc_raw i_datasource 'Checkout Link Text' }}
</a>
{{ end }}
<div>
</div>
<a class="view-cart-button" href="{{ o_model.view_cart_link }}"
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>大事な
パフォーマンスを向上させるために、ミニカートカウントキャッシュを無効にし、ミニカートの再計算を無効にすることができます。
ミニカートレンダリングモデル
ミニカート レンダリングのScribanテンプレートでは、次の図に示すように、MinicartRenderingModelモデルに含まれるプロパティとオブジェクトにアクセスします。
ミニカートの通話シーケンス
次のシーケンス図は、買い物客がミニカートを操作するときに行われる通話の概要を示しています。
