CyberStore E-Payment 2023 Documentation
ShoppingCartQuickEntryControl Class
Members  Example 


Dovetail.Ecommerce.Controls Namespace : ShoppingCartQuickEntryControl Class

A Shopping Cart quick entry control. Introduced in v2.13.

Remarks

With the ShoppingCartQuickEntryControl, shoppers can add Items directly to the Shopping Cart. It sends real-time queries to the server using AJAX to optimize performance and the shopper's experience. 

It can be used as an alternative to the CatalogItemQuickOrderEntry control. 

See the example of the ShoppingCartQuickEntryControl in use:

 

 

When the shopper inputs an Item's stock codeSKU, an alternative part number,  or name into the designated field, CyberStore provides them with a list of Items that best match their entry.

Within this list of search results, the shopper can adjust the quantities of any Items they want to purchase. They must simply type their desired quantity in the blank field and click outside of that box when finished. They can also remove Cart selections by clicking the Del button.

To complete the quantity adjustment, the shopper must click the Add to Cart button. If the selection is successful, the shopper can see the recently added Items as well as the new subtotal for the order within the Cart.

To check out or to make additional changes to the selected Items, the shopper should visit the Shopping Cart page and proceed as normal.

Note: 

Any Items that the shopper adds to the Shopping Cart during the entirety of their session are displayed in the grid of ShoppingCartQuickEntryControl.

Property Usage

By changing the values of the control's properties in the SitePages.config file for your Site, you can enable or disable certain behaviors, set certain defaults, alter aspects of the display or otherwise cusomtize your site's implementaion of the control.

The following describes properties pertaining to key functional areas of the control that can be configured to suit your needs.

Lookup Filter Properties

Item search functionality can be configured using several of the control's properties:

By default, the control allows for searching available Items. When use of the control would prefer disabling of the search functionality altogether, set the EnableStockCodeFilter property to false.

To define the scope and experience of the shopper's search, use the StockCodeFilterMode property. Take care to use only the values described below:

Property Value Behavior
"StartsWith"
(default)
Searches for terms in either the Stock Code of Item Name field that start with the characters you enter triggering the search drop-down with suggested matches as you type.
"Contains" Searches for terms in either the Stock Code or Item Name fields that contain the characters you enter anywhere in the fields triggering the search drop-down with suggested matches for you.
"Exact" Searches for Stock Code values only that exactly match the characters you enter. No drop-down is triggered.
Note:
No matter which values is used for the StockCodeFilterMode property, all lookup searches are case insensitive.

Use the StockCodeFilterMinimumLength property to establish the number of characters that a user must type in the stock code box before any search results appear.

A delay can be specified that determines how long (in milliseconds) after a user stops typing and the minimum filter number characters have been typed before the search results appear. Use the StockCodeFilterDelay property to set this delay. 

Item search results can be configured to show a specified number of search result rows at a time using the StockCodeFilterDropDownLength property.

To provide the shopper with the most flexibility, you can use the EnableFilterModeSelection property and use the value of true, the control will present the user with a radio selection that lets them choose between the "Exact" and "Contains" or "StartsWith" stock code filter mode. The default value is false. When the shopper first loads a page with the control present, the initial mode selection will be set the value of the StockCodeFilterMode, and if the value is set to "Exact" the search option will only be available as a "Contains" search.

Inventory Lookup Properties 

When the EnableOnHandQuantityDisplay property is set to true (default), the shopper can click the Check Stock button to view the total available quantity of that Item. The returned text is based on the configuration in the "Quantity Settings" under the Catalog Configuration tab.

Individual Item quantity messages can be set to override the Site Manager's quantity settings in the "Messages" tab in Item Maintenance.

Both the site and Item settings for quantity messages may be set using either the LimitedAvailableMessage and LimitedUnavailableMessage properties when an Item is of a limited quanitity or the UnlimitedAvailableMessage and UnlimitedUnavailableMessage properties when it is of an unlimited quantity.

Tip:

Use the Replacement Tags [QTY] and [UOM] within your messages to display the inventory quantity (determined using the On Hand Quantity Basis as setup in the Management Console in Site ManagerCatalog Configuration), and the unit of measure.

For example: "[QTY] [UOM] In Stock" might render as "1,234 EA In Stock" using the unallocated quantity as a basis.

Alternatively, a fixed message text could also be used which would not present actual inventory quantity.

For example: "Out of Stock".

 

Display Properties

The ShowByWarehouse property allows for one to configure the ability to show or hide quanty subtotals by warehouse. The default is to use the value specified by the "Display Quanty Subtotals by Warehouse" setting in the Site Manager > Catalog Configuration screen found in the Quantity Settings tab.

When displaying quantity subtotals by warehouse, the WarehouseQuantityMessage property allows for customizing the HTML code used to render each row of the warehouse listing.

Important Note:

It is not recommended that sites display inventory quantity by warehouse when utilizing the CyberStore inventory buffer feature. Current business logic will display quanties by each warehouse, with each quantity being reduced by the buffer amount.

Text Properties

Default text used as hint labels within the quantity and stock input boxes before a user types can be set using the QuantityEmptyHintText and StockCodeEmptyHintText properties.

The text for the Add to Cart and Check Stock buttons can be customized with the AddToCartButtonText and CheckStockButtonText properties.

Properties Inherited from the Base CyberStoreBaseControl

Properties specific to the CyberStoreBaseControl can be listed in the following categories:

Override Properties

When the IgnoreControl property is set to true, all processing of a control is skipped, and the control's Visible property is set to false ensuring that it is not rendered in the resulting CyberStore page.

Contextual Properties

Contextual properties define specific details about the current instance of the control based on context. Context can be set by any number of factors including the log in state of the Shopper, the Site being visited, or the properties that have been established for a control.

The AttributesBag property is used internal to control processing and is the collection of attributes, or properties, and their values based on how the control is configured. The attributes in this property are set by processing the SitePages.config file as well as any specific declared property values in any registered sub controls. It allows for the passing down of all properties to a control and any registered sub controls.

The ComConfigUserData and Site_ID properties are read-only values made available to all CyberStore controls to aid in processing and establishing context about the Site and Shopper.

Example
See an example of how to configure this control in SitePages.config.
<Control src="ShoppingCartQuickEntryControl.ascx" Name="QuickEntry"
    StockCodeFilterMode="StartsWith"
    EnableFilterModeSelection="false"
    StockCodeFilterDelay="10"
    StockCodeFilterMinimumLength="2"
    EnableOnHandQuantityDisplay="true"
    LimitedAvailableMessage="Only [qty] [uom] Available"
    LimitedUnavailableMessage="Unavailable"
    UnlimitedAvailableMessage="[qty] [uom] In Stock"
    UnlimitedUnavailableMessage="On Backorder"
    StockCodeFilterDropDownLength="8"
    StockCodeCssClass="FormField QuickEntryStockCode"
    AddToCartButtonText="Add To Cart"
    AddToCartButtonCssClass="btn btn-inverse"
    QuantityInputCssClass=""
    AnimatedLoadingGif="/Ecommerce/Images/loading.gif"
    CheckStockButtonText="Check Stock"
 />
See an example of how to embed this control into another control as a sub control.
<@ Register TagPrefix="uc1" TagName="ShoppingCartQuickEntryControl" Src="~/Control/ShoppingCartQuickEntryControl.ascx" >

<uc1:ShoppingCartQuickEntryControl ID="ShoppingCartQuickEntry" runat="server" 
    StockCodeFilterMode="StartsWith"
    StockCodeFilterDelay="10"
    StockCodeFilterMinimumLength="2"
    EnableOnHandQuantityDisplay="true"
    LimitedAvailableMessage="Only [qty] [uom] Available"
    LimitedUnavailableMessage="Unavailable"
    UnlimitedAvailableMessage="[qty] [uom] In Stock"
    UnlimitedUnavailableMessage="On Backorder"
    StockCodeFilterDropDownLength="8"
    StockCodeCssClass="FormField QuickEntryStockCode"
    AddToCartButtonText="Add To Cart"
    AddToCartButtonCssClass="btn btn-inverse"
    QuantityInputCssClass=""
    AnimatedLoadingGif="/Ecommerce/Images/loading.gif"
    CheckStockButtonText="Check Stock"
/>
CSS Classes

Configurable CSS Class Names 

The following list of properties can be used to specify CSS class name overrides of certain elements in the ShoppingCartQuickEntryControl:

Property Name Applied To
AddToCartButtonCssClass The control's Add To Cart button.
QuantityInputCssClass The control's quantity input box.
StockCodeCssClass The controls' stock code input box.

Pre-Defined CSS Class Names 

Several CSS classes are rendered by the control to present and format the layout of the HTML output. By default, the base styling for these classes can be found in the CyberStore's global.css file in the application's /Ecommerce/css/ folder.

Developer's Note:

To change any of these styles, do not edit the global.css file directly, but instead add the classes to the site theme's CSS directly and override the defaults.

 

Quick Entry Cart Subtotal Area

The output of the Shopping Cart subtotal, as calculated when items or quantities are added or adjusted, produces HTMl content that will include references to the following pre-defined CSS classes.

CSS Class Applied To
.QE-ShoppingCartSubtotal-Wrapper The <div> wrapper that contains the subtotal content.
.QE-Subtotal-Wrapper The <div> wrapper that contains the subtotal label and amount.
.QE-Subtotal-Label The <div> that contains the subtotal label.
.QE-Subtotal-Amount The <div> that contains the subtotal amount.

Quick Entry Input Area

The input area produces HTML content that will include references to the following pre-defined CSS classes.

CSS Class Applied To
.QE-Input-Panel The <div> wrapper that contains the input contents.
.QE-Input-Wrapper The <div> that contains the stock code input box, quantity input box and Add to Cart button are contained.
.QE-StockCodeInput The <div> that contains the stock code input box is wrapped.
.QE-ClearText The <div> that contains the "Clear" button is wrapped.
.QE-QtyInput The <div> that contains the quantity input box is wrapped.
.QE-AddToCartInput The <div> that contains the "Add to Cart' button is wrapped.
.QE-AddToCartSpinner The <div> that contains the loading GIF is wrapped.

Quick Entry Shopping Cart Contents Area 

The output of the Shopping Cart lines displayed produces HTML that will include references to the following pre-defined CSS classes.

CSS Class Applied To
.QE-Wrapper The <div> wrapper that contains the shopping cart contents.
.QE-Row The <div> wrapper that contains a row of shopping cart contents.
.QE-AltRow The <div> wrapper that contains a alternate row of shopping cart contents.
.QE-Del The <div> that contains a line's delete line button.
.QE-StockCode The <div> that contains a line's Item stock code.
.QE-Name The <div> that contains a line's Item name
.QE-Qty The <div> that contains a line's quantity input box.
.QE-UOM The <div> that contains a line's unit of measure.
.QE-UnitPrice The <div> that contains a line's Unit Price per each unit of measure.
.QE-Price The <div> that contains a line's total price (quantity x Unit Price).
.QE-QOH The <div> that contains the inventory quantity results.

 

Control Markup

The following is the markup for this control.

Developer's Note:

To create a custom version of the control, copy all of the code below into a file of the same name and place it into your Site's control folder (e.g., ../YourSiteFolder/Control). The CyberStore page engine will then override the default markup with your customized version.

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ShoppingCartQuickEntryControl.ascx.cs" Inherits="Dovetail.Ecommerce.Controls.ShoppingCartQuickEntryControl" %>
<div id="QEShoppingCartSubtotalWrapper" class="QE-ShoppingCartSubtotal-Wrapper">
</div>
<style>
.qoe-fixer { padding: 1px 1px 2px 1px!important; border-radius: 0px!important; }
</style>
<dx:ASPxPanel ID="QEInputPanel" runat="server" ClientIDMode="Static" DefaultButton="btnAddToCart" CssClass="QE-Input-Panel">
    <PanelCollection>
        <dx:PanelContent runat="server">
            <div class="QE-Input-Wrapper">
                <div class="QE-StockCodeInput">
                    <dx:ASPxRadioButtonList ID="rdoSearchType" runat="server" ClientIDMode="Static" RepeatDirection="Horizontal" Border-BorderStyle="None" CssClass="QE-SearchTypeBox" >
                        <Items>
                            <dx:ListEditItem Value="Exact" Text="Exact" />
                            <dx:ListEditItem Value="Search" Text="Search" />
                        </Items>
                        <ClientSideEvents SelectedIndexChanged="
                            function(s,e) {
                                if(s.GetSelectedIndex() == 0) { 
                                    cmbStockCode.SetVisible(false);
                                    cmbStockCode.SetText('');
                                    txtStockCode.SetVisible(true);
                                }
                                else {
                                    txtStockCode.SetVisible(false);
                                    txtStockCode.SetText('');
                                    cmbStockCode.SetVisible(true);
                                }
                                toggleFocuser();
                                focuser.Focus();
                            }" />
                    </dx:ASPxRadioButtonList>
                    <br />
                    <dx:ASPxComboBox ID="cmbStockCode" runat="server" ClientIDMode="Static"
                        AnimationType="Auto" DropDownStyle="DropDownList" TextField="StockCode" ValueField="Item_ID" TextFormatString="{0} - {1}"
                        EnableCallbackMode="true" ValueType="System.Int32" AllowMouseWheel="true" OnInit="cmbStockCode_Init"
                        DropDownButton-Visible="false" Width="300" DropDownWidth="600" Height="30" Paddings-Padding="4"
                        DisabledStyle-Border-BorderStyle="None" DisabledStyle-ForeColor="Black"
                        DisabledStyle-BackColor="Transparent" DisabledStyle-BackgroundImage-ImageUrl="nothing.gif"
                        DisabledStyle-Cursor="default" AutoPostBack="false">
                        <Columns>
                            <dx:ListBoxColumn FieldName="StockCode" Width="100px" />
                            <dx:ListBoxColumn FieldName="Name" Width="150px" />
                        </Columns>
                    </dx:ASPxComboBox>
                    <dx:ASPxTextBox ID="txtStockCode" runat="server" ClientIDMode="Static" ClientInstanceName="txtStockCode" Width="300" AutoCompleteType="Disabled" />
                    
                </div>
                <div class="QE-ClearText">
                    <dx:ASPxButton ID="btnClearStockCode" ClientIDMode="Static" runat="server" AutoPostBack="false" />
                </div>
                <div class="QE-QtyInput col-xs-3">
                    <dx:ASPxTextBox ID="txtStockCodeQuantity" runat="server" ClientIDMode="Static" />
                </div>
                <div class="QE-AddToCartInput">
                    <dx:ASPxButton ID="btnAddToCart" runat="server" ClientIDMode="Static" AutoPostBack="false" class="DT-Button"/>
                </div>
                <div class="QE-AddToCartSpinner">
                    <img height="32" width="32" id="QEAnimatedSpinner" src='<%= AnimatedLoadingGif %>' style="display: none;" />
                </div>
            </div>
        </dx:PanelContent>
    </PanelCollection>
</dx:ASPxPanel>
<br />
<div id="QEShoppingCartMessaging" runat="server"></div>
<dx:ASPxButton ID="btnCheckout" runat="server" Text="Checkout" Visible="false" OnClick="btnCheckout_Click" />
<div id="QEShoppingCartContents">
</div>
<asp:HiddenField ID="hfLeadTimeMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfEnableOnHandQuantityDisplay" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfEnableLeadTimeMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfLimitedAvailableMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfLimitedUnavailableMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfUnlimitedAvailableMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfUnlimitedUnavailableMessage" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfCheckStockButtonText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfShowColumnHeader" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfStockCodeColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfDescriptionColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfQuantityColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfDefaultPriceColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfCustomerPriceColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfExtPriceColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfOnHandQuantityColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfDiscountPriceColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfWebPriceColumnHeaderText" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfUnitPriceColumnHeaderText" ClientIDMode="Static" runat="server" />


Inheritance Hierarchy

System.Object
   System.Web.UI.Control
      System.Web.UI.TemplateControl
         System.Web.UI.UserControl
            Dovetail.Ecommerce.ControlBases.CyberStoreBaseControl
               Dovetail.Ecommerce.Controls.ShoppingCartQuickEntryControl

See Also

Reference

ShoppingCartQuickEntryControl Members
Dovetail.Ecommerce.Controls Namespace