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

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

メモ

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="{{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>
                    &#x3C;span class="price" data-bind="text: lineTotal, visible: !isFreeGift">&#x3C;/span>
                    &#x3C;span class="freegift-label" data-bind="visible: isFreeGift">{{ sc_raw i_datasource 'Free Gift Text' }}&#x3C;/span>
                &#x3C;/div>
                {{ # The &#x3C;span> element is used to delete the minicart line. }}
                &#x3C;span class="minicart-delete">
                    &#x3C;a href="#">
                        &#x3C;span data-bind="click: $parents[1].removeItem">&#x3C;/span>
                    &#x3C;/a>
                &#x3C;/span>
            &#x3C;/div>
        &#x3C;/div>
        &#x3C;!-- /ko -->
        {{ # The &#x3C;img> element displays the loading bar image. }}
        &#x3C;img class="loading-bar" data-bind="visible: $parents[0].isFetchInProgress"
            src="{{ sc_follow  i_datasource  'Loading Bar Image'  | sc_medialink }}" />

        {{ # The &#x3C;div> element displays the total and the amount for a minicart line item. }}
        &#x3C;div class="minicart-footer">
            &#x3C;span class="minicart-total-label">{{ sc_raw i_datasource 'Total Label' }}&#x3C;/span>
            &#x3C;span class="minicart-total-amount" data-bind="text: total">&#x3C;/span>
        &#x3C;/div>
        {{ # The &#x3C;div> element contains two buttons - Checkout and Viewcart. }}
        &#x3C;div class="minicart-buttons">
            {{ if !o_model.hide_checkout_button }}
            &#x3C;a class="checkout-button" title="{{ sc_raw i_item 'Checkout Link Tooltip' }}"
                href="{{ o_model.checkout_link }}">
                {{ sc_raw i_datasource 'Checkout Link Text'  }}
            &#x3C;/a>
            {{ end }}
            &#x3C;div>
            &#x3C;/div>
            &#x3C;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' }}
            &#x3C;/a>
        &#x3C;/div>
    &#x3C;/div>
&#x3C;/div>
{{ # The &#x3C;div> element contains two hidden fields recalculateTotals and cacheCartCount. }}
&#x3C;div class="minicart-data" style="display:none">
    &#x3C;input type="hidden" value="{{ o_model.recalculate_totals }}" id="recalculateTotals" />
    &#x3C;input type="hidden" value="{{ o_model.cache_cart_count }}" id="cacheCartCount" />
&#x3C;/div>
{{ end }}

</div>

大事な

パフォーマンスを向上させるために、ミニカートカウントキャッシュを無効にし、ミニカートの再計算を無効にすることができます。

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

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

Class diagram of the Minicart rendering model.

ミニカートの通話シーケンス

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

この記事を改善するための提案がある場合は、お知らせください!