ミニカート レンダリングのカスタマイズ

概要

従来のアイテム ツリー ミニカート レンダリング バリアントを設定する方法。

ミニカート レンダリングには、Scriban テンプレートの形式のレンダリング バリアントが含まれています。ミニカート レンダリングには独自のデフォルトのレンダリング バリアント ルートとデフォルトのレンダリング バリアント (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Minicart) があり、マークアップを生成するために Scriban テンプレートを使用します。Scriban テンプレートを変更することはできますが、この場合、ソフトウェアのアップグレード時にカスタマイズがオーバーライドされないように、新しいカスタム レンダリング バリアントを作成することをお勧めします。レンダリングのラベルを変更することもできます。

注記

ミニカート非推奨レンダリングは、既存のサイトでのみ使用でき、レンダリング バリアントの 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="{{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 モデルに含まれているプロパティとオブジェクトにアクセスします。

ミニカート レンダリング モデルのクラス図。

次のシーケンス図は、買い物客がミニカートを操作したときに行われる呼び出しの概要を示しています。

シーケンス図