サービスカタログでのカートレイアウトの使用Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } <!-- div.margin{ padding: 10px 40px 5px 30px; } table.tocTable{ border: 1px solid; border-color:#E0E0E0; background-color: rgb(245, 245, 245); padding-top: .6em; padding-bottom: .6em; padding-left: .9em; padding-right: .6em; } table.noteTable{ border:1px solid; border-color:#E0E0E0; background-color: rgb(245, 245, 245); width: 100%; border-spacing: 8px; border-collapse: separate; } table.internalTable{ border:1px solid; border-color:#E0E0E0; background-color: rgb(245, 245, 245); width: 100%; border-spacing:0; } .sp td{ border-bottom: 1px solid; border-right: 1px solid; border-color:#E0E0E0; background-color: #ffffff; height: 20px; padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; } .sphr td{ border-right: 1px solid; border-bottom: 1px solid; border-color:#E0E0E0; background-color: rgb(245, 245, 245); padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; height: 20px; } .title { color: #D1232B; font-weight:; font-size:25px; } .hd1{ color: #D1232B; font-weight:; font-size:18px; } .hd2{ color: #646464; font-weight:bold; font-size:16px; } .hd3{ color: #7a7a7a; font-weight:; font-size:16 px; text-decoration:; } .hd4{ color: #000000; font-weight:bold; font-size:14 px; text-decoration:; } --> 場合によっては、アドミニストレーターがサービスカタログで買い物かごレイアウトを有効にして設定し、買い物かごとチェックアウトのエクスペリエンスをカスタマイズしなければなりません。 この記事では、次の方法について説明します。 カートレイアウト機能を有効にするカートレイアウト設定の構成カートレイアウトを有効にした後の動作変化を理解する 概要 買い物かごレイアウトを使用すると、アドミニストレーターはサービスカタログのカートと精算エクスペリエンスの外観と動作をカスタマイズできます。 この機能は Fuji 以降のリリースで利用でき、買い物かご関連の要素をより柔軟に構成できます。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } すべて Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } カートレイアウト機能の有効化 カートレイアウトを有効にするには: [サービスカタログプロパティ] に移動します。次のプロパティを見つけます。 glide.sc.use_cart_layouts プロパティを true に設定します。変更を保存します。 重要な注意 買い物かごレイアウトは、新規顧客に対してデフォルトで有効になっています。アップグレードされたインスタンスで、買い物かごマクロが以前にカスタマイズされている場合、この機能が無効になることがあります。このプロパティを有効にすると、買い物かごおよびチェックアウト関連のウィジェットをカスタマイズできます。 カートレイアウト機能の使用 カートレイアウトを有効にすると、アドミニストレーターは次のことができます。 価格、数量、買い物かご、または買い物かご関連のボタンを非表示にする (たとえば、 今すぐ注文 または チェックアウトに進む)買い物かごボタンのラベルを変更する注文ステータス画面で要素または列の順序を変更します カートレイアウトを設定するには: 移動先: サービスカタログ>カタログ定義 > カートレイアウトの管理 必要に応じてレイアウト設定を変更します。サービスカタログの変更を保存してテストします。 動作に関する考慮事項 カートレイアウトを有効にした後: 一部のアイテム固有の買い物かご設定 ( 価格省略 や 数量なし など) は、期待どおりに動作しない場合があります。アイテムレベルで [数量なし] が選択されている場合でも、アイテムに数量が表示される場合があります。 アイテム固有の動作が必要な場合: カートレイアウトプロパティが有効なままになっていることを確認してください。特定のカタログアイテムの [カートレイアウトを使用] オプションをクリアします。これにより、アイテムの個々のカート設定でグローバルカートレイアウト構成を上書きできます。 その他の注意 カートレイアウトは、カートとチェックアウトの UI の動作にのみ影響します。本番環境で有効にする前に、変更を下位環境でテストする必要があります。予期しない UI 動作を避けるために、カスタマイズされた買い物かごマクロを有効にしないことを確認してください。