Quick Order

CMS Components

Quick order is CMS-driven and consists of the following CMS components:

• CartQuickOrderFormComponent

• QuickOrderComponent

You can configure quick order by using SmartEdit to display the quick order components in composable storefront, or you can manually add them to content slots using ImpEx.

If you are using the Spartacus Sample Data Extension, the quick order components are already enabled. However, if you decide not to use the spartacussampledata extension, you can enable the quick order components through ImpEx.

$contentCatalog=powertools-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]

Adding Quick Order CMS Components Manually

This section describes how to add Quick Order CMS components to composable storefront using ImpEx.

You can enable the Quick Order link in the My Account drop-down menu with the following ImpEx:

UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];url
;;QuickOrderLink;/my-account/quick-order

You can add the Quick Order link in the Quick Links panel with the following ImpEx:

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;SiteLinksSlot;Slot contains some links;true;QuickOrderLink,OrdersLink,WishListLink,StoreFinderLink,ContactUsLink,HelpLink

You can enable quick order by adding the Cart Quick Order Form component with the following ImpEx:

INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType;&componentRef
;;CartQuickOrderFormComponent;Cart Quick Order Form Component;CartQuickOrderFormComponent;CartQuickOrderFormComponent

UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid, $contentCV)
;;CenterRightContentSlot-cartPage;CartTotalsComponent,CartApplyCouponComponent,CartQuickOrderFormComponent

You can also enable quick order by adding the Quick Order Page with the following ImpEx:

UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];masterTemplate(uid,$contentCV);label
;;quickOrderPage;AccountPageTemplate;/my-account/quick-order

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
;;BodyContentSlot-quickOrder;Body Content Slot for Quick Order;true;QuickOrderComponent

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;BodyContent-quickOrder;BodyContent;quickOrderPage;BodyContentSlot-quickOrder

INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType;&componentRef
;;QuickOrderComponent;Quick Order Component;QuickOrderComponent;QuickOrderComponent

Limiting the Quick Order List

By default, you can add up to ten products to the quick order list, but you can modify this value by providing a different configuration. You can either add a new CMS component as a CmsQuickOrderComponent with a quickOrderListLimit attribute, or you can modify the default configuration, as shown in the following example:

provideConfig(<CmsConfig>{
  cmsComponents: {
    QuickOrderComponent: {
      data: {
        quickOrderListLimit: 15,
      }
    },
  },
}),

In the above example, quickOrderListLimit is set to 15, which is the maximum number of products that can be added to the quick order list.

Modifying the Quick Order Form Configuration

If you are using version 4.2 or newer of the composable storefront libraries, a suggestion box appears after you have entered three characters in the quick order form, and a maximum of five products with images is displayed. These are defaults that you can modify by providing a different configuration, as shown in the following example:

provideConfig(<QuickOrderConfig>{
  quickOrderForm: {
    searchForm: {
      displayProductImages: <yourValue>,
      maxProducts: <yourValue>,
      minCharactersBeforeRequest: <yourValue>,
    }
  }
}),

The settings of the QuickOrderConfig are described as follows:

• displayProductImages is a boolean that determines whether or not suggested products include product images. The default is true.

• maxProducts is a number that determines the maximum number of suggested products to display. The default is 5.

• minCharactersBeforeRequest is a number that sets how many characters a user must enter before product suggestions are displayed. The default is 3.