ショッピング カート品目レンダリングのカスタマイズ

概要

ショッピング カート品目レンダリング Scriban テンプレートの概要。

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

注記

ショッピング カート品目非推奨レンダリングは、既存のサイトでのみ使用でき、Scriban テンプレートの代わりに標準ビューと分離コードを使用します。

次のコードは、デフォルトのレンダリングバリアント内で定義されたショッピング カート品目レンダリングの Scriban テンプレートを示しています。ビュー コンテンツ (ラベル テキストなど) が MVC モデルに渡され、埋め込みオブジェクト o_model として Scriban コンテキストで使用できますが、商品情報 (商品の詳細、単価、在庫など) は、フロントエンドで Knockout バインディングと AJAX 呼び出しを使用して入力されます。

{{ # Error message area }}
{{if o_model.error_message}}
<div class="error-message">
    {{ o_model.error_message }}
</div>
{{ # If there is no error, cart lines will be rendered }}
{{ else }}
<div class="shopping-cart-lines" data-bind="with: cart, visible: isVisible" style="display: none;">
    {{ # Cart lines header, contains the columns titles }}
    {{ if o_model.display_table_header }}
    <div class="shoppingcart-header">
        <div title="{{ o_model.product_details_tooltip }}" class="shoppingcart-header-productdetails">
            {{ sc_field i_datasource 'Product Details Label' }}
        </div>
        {{ if o_model.display_unit_price_column }}
        <div title="{{ o_model.unit_price_tooltip }}" class="shoppingcart-header-unitprice">
            {{ sc_field i_datasource 'Unit Price Label' }}
        </div>
        {{ end }}
        {{ if o_model.display_quantity_column }}
        <div title="{{ o_model.quantity_tooltip }}" class="shoppingcart-header-quantity">
            {{ sc_field i_datasource 'Quantity Label' }}
        </div>
        {{ end }}
        <div title="{{ o_model.product_total_tooltip }}" class="shoppingcart-header-total">
            {{ sc_field i_datasource 'Total Label' }}
        </div>
        {{ if o_model.display_delete_button_column }}
        <div class="shoppingcart-header-delete">&nbsp;</div>
        {{ end }}
    </div>
    {{ end }}
    {{ # Cart lines body, the following <div> will render all the cart lines with respect to the configurations on the component properties }}
    <div class="shoppingcart-body" data-bind="foreach: cartLines">
        <div class="shoppingcart-item">
            <div class="shoppingcart-item-details">
                <div class="shoppingcart-item-productdetails">
                    <div class="shoppingcart-freegifttext" data-bind="visible: isFreeGift">
                        <span>{{ sc_raw i_datasource 'Free Gift Label' }}</span>
                    </div>
                    <div class="shoppingcart-image">
                        <a data-bind="attr: { href: productUrl }">
                            <img data-bind="attr: { src: image }" alt="" pid="image" />
                        </a>
                    </div>
                    <div class="shoppingcart-info">
                        <a data-bind="attr: { href: productUrl }">
                            <h5 class="displayName" data-bind="text: displayName"></h5>
                        </a>
                        <div class="product-variant-information" data-bind="foreach: properties">
                            <div class="variant-information">
                                <span class="variant-label" data-bind="text: label"></span>
                                <span class="variant-value" data-bind="text: value"></span>
                            </div>
                        </div>
                        {{ # If the Display Shipping Information configuration on the component properties is enabled, the following section renders the cart line shipping information }}
                        {{ if o_model.display_shipping_information }}
                        <p class="shoppingcart-delivery" data-bind="if: shippingMethodName">
                            <span>{{ sc_raw i_datasource 'Delivery Label' }}</span>
                            <span class="shippingMethodName" data-bind="text: shippingMethodName"></span>
                        </p>
                        <div class="shoppingcart-delivery" data-bind="if: address">
                            <span>{{ sc_raw i_datasource 'Address Label' }}</span>
                            <ul class="lineShippingAddress">
                                <li>
                                    <span data-bind="text: address.Address1"></span>
                                    <span data-bind="text: address.City"></span>
                                </li>
                                <li>
                                    <span data-bind="text: address.State"></span>
                                    <span data-bind="text: address.ZipPostalCode"></span>
                                </li>
                                <li>
                                    <span data-bind="text: address.Country"></span>
                                </li>
                            </ul>
                        </div>
                        {{ end }}
                    </div>
                </div>

                {{ # If the Display Unit Price configuration on the component properties is enabled, the following section renders the cart line unit  price information }}
                {{ if o_model.display_unit_price_column }}
                <div class="shoppingcart-price" data-bind="visible: !isFreeGift">
                    <span class="price" data-bind="text: linePrice"></span>
                    <p data-bind="visible: discountOfferNames.length > 0">
                        <span>{{ sc_raw i_datasource 'Discount Label' }}</span>
                        <span data-bind="text: discountOfferNames" class="shoppingcart-saving"></span>
                    </p>
                </div>
                {{ end }}

                {{ # If the Display Quantity configuration on the component properties is enabled, the following section renders the cart line quantity information }}
                {{ if o_model.display_quantity_column }}
                <div class="shoppingcart-quantity">
                    <div class="numeric-input-group" data-bind="visible: !isFreeGift">
                        <button class="decrease"
                            data-bind="event: { click: $parents[1].decreaseQuantity }, disable: $parents[1].quantityUpdating"
                            style="display: none"></button>
                        <input class="quantity" min="1" type="number" placeholder="1"
                            data-bind="event: { change: $parents[1].updateQuantity }, value: quantity, valueUpdate: 'input', fireChange:true, attr: {'data-ajax-lineitemid': externalCartLineId}, disable: $parents[1].quantityUpdating">
                        <button class="increase"
                            data-bind="event: { click: $parents[1].increaseQuantity } , disable: $parents[1].quantityUpdating"
                            style="display: none"></button>
                    </div>
                    <div class="display-quantity" data-bind="visible: isFreeGift">
                        <span>{{ sc_raw i_datasource 'Quantity Label' }}: </span>
                        <span class="quantity" data-bind="text: quantity"></span>
                    </div>
                </div>
                {{ end }}
                {{ # The following section renders the line total }}
                <div class="shoppingcart-total">
                    <span class="total" data-bind="text: lineTotal"></span>
                    <p data-bind="visible: discountOfferNames.length > 0 && !isFreeGift">
                        <span>{{ sc_raw i_datasource 'Savings Label' }}</span>
                        <span data-bind="text: lineItemDiscount" class="shoppingcart-total-saving"></span>
                    </p>
                    <span class="shoppingcart-freegiftlistprice" data-bind="text: linePrice, visible: isFreeGift"></span>
                </div>
                {{ # If the Display Delete Button configuration on the component properties is enabled, the following section renders the cart line delete button information }}
                {{ if o_model.display_delete_button_column }}
                <div class="shoppingcart-delete">
                    <a class="remove-line" data-bind="attr: {'data-ajax-lineitemid': externalCartLineId}">
                        <span data-bind="click: $parents[1].removeItem"></span>
                    </a>
                </div>
                {{ end }}
            </div>
            {{ # If the Display Sublines configuration on the component properties is enabled, the following section renders the cart line sublines information }}
            {{ if o_model.display_sub_lines }}
            <div class="shoppingcart-item-sublines" data-bind="foreach: sublines, visible: sublines().length > 0">
                <div class="shoppingcart-subline-item">
                    <div class="shoppingcart-subline-image-space"></div>
                    <div class="shoppingcart-image">
                        <a data-bind="attr: { href: productUrl }">
                            <img data-bind="attr: { src: image }" alt="" pid="image" />
                        </a>
                    </div>
                    <div class="shoppingcart-info">
                        <a data-bind="attr: { href: productUrl }">
                            <h5 class="displayName" data-bind="text: displayName"></h5>
                        </a>
                        <div class="product-variant-information" data-bind="foreach: properties">
                            <div class="variant-information">
                                <span class="variant-label" data-bind="text: label"></span>
                                <span class="variant-value" data-bind="text: value"></span>
                            </div>
                        </div>
                    </div>
                    {{ if o_model.display_quantity_column }}
                    <div class="shoppingcart-quantity">
                        <span>{{ sc_raw i_datasource 'Quantity Label' }}: </span>
                        <span class="quantity" data-bind="text: quantity"></span>
                    </div>
                    {{ end }}
                    <div class="shoppingcart-subline-total-space"></div>
                    {{ if o_model.display_delete_button_column }}
                    <div class="shoppingcart-subline-delete-space"></div>
                    {{ end }}
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}

ショッピング カート品目 Scriban テンプレートでは、埋め込まれたアイテム o_model を介して ShoppingCartLinesRenderingModel モデルに含まれているプロパティとオブジェクトにアクセスします。次の図に、ショッピング カート品目レンダリング モデルのクラス図を示します。

ショッピング カート品目レンダリング モデルの図

次のシーケンス図は、買い物客が無料ギフト セレクションのコンテキストでショッピング カート品目を操作したときに行われる呼び出しの概要を示しています。

注記

このシーケンス図は、手動の無料ギフト セレクションに適用され、無料ギフトがカートに自動的に追加されたときに実行されるアクションを反映していません。

ショッピング カート品目のシーケンス図