AccountLogin Widget

An account login widget. Introduced in 2023.1.

Remarks

The AccountLogin widget creates a simple lightweight html form that can be used to log into the site.

The widget has been designed to incorporate Multi-Factor Authentication if that feature has been enabled for the site. If Multi-Factor Authentication has been enabled the AccountLogin widget will display a popup form where the user can enter the Authorization code. The authorization popup will also allow the user to request a new Authorization code if on is needed.

Widget Option Usage

Widget options provide a way to customize widgets in various ways. Widget options are sent to the widget when loaded with the LoadWidgetControl.

Widget options allow the Administrator set the landing page after a successful logon and set the text for several buttons that are displayed on the login form or on the designated lading page if applicable.

clickHereIfNot: The text is prepended to the currently logged in account user's name, and displayed in the link to sign out of the current account if the current account is not yours. The default is "Click if you are not"

redirectHomeAfterLogin: Boolean redirect to home page after successful login if no REDIRECT URL query string is empty and redirectCustom is not set. The default is false

redirectCustom: customized landing page after login. The default ''

loginButtonText: sets the text for login button the default is 'Login'

savedCartButtonText: sets the text for the Saved carts button the default is 'Saved Carts'

checkoutButtonText: sets the text from the checkout button the default is 'Checkout'

Widget Conventions

Example

See an example of how to load and configure this widget in SitePages.config.

#region Cart_SaveCartPopup
<!-- Example:
     Options set to default values.
-->
<Control src="LoadWidgetControl.ascx" FileLocation="Cart_SaveCartPopup.html" Options="
    popupTitle: 'Save Cart',
    popupWidth: 450,
    popupHeight : '250'
    nameFieldWidth: '400'
    instructionText: 'Enter the name you would like to assign to your Saved Cart.'" 
/>
#endregion

#region Checkout
<!-- Example:
     The Checkout widget
-->
<Control src="LoadWidgetControl.ascx" FileLocation="Checkout.html" />
#endregion

#region File_FileUploader
<!-- These are the widget options for the first widget -->
<Control src="LoadWidgetControl.ascx" FileLocation="File_FileUploader.html" Options="
    allowMultipleFiles: true,
    maxFileSize: 4500000,
    allowedExtensionsForUpload: '.jpg, .jpeg, .gif, .png, .pdf',
    uploadMode: 'instantly',
    allowDragAndDropZone: false,
    strObscureFilename: false,
    filePrefix: 'Prefix_One_',
    fileSuffix: '_Suffix_One',
    displayRules: true,
    label: 'File Uploader'" 
/>

<!-- These are the widget options for shen using multiple times on a page. This is the second widget -->
<Control src="LoadWidgetControl.ascx" FileLocation="File_FileUploader.html" Options="
    allowMultipleFiles: true,
    maxFileSize: 4500000,
    allowedExtensionsForUpload: '.jpg, .jpeg, .gif, .png, .pdf',
    uploadMode: 'instantly',
    allowDragAndDropZone: true,
    strObscureFilename: true,
    filePrefix: 'Prefix_Two',
    fileSuffix: '_Suffix_Two',
    displayRules: false,
    label: 'File Uploader'" 
/>
#endregion

#region HotSpotDiagramDisplay
<!-- Example 1:
     Options set with default values. 
     Diagram determined by evaluating URL of the Hot Spot Page in page address 
     e.g https://www.yourdomain.com/ecommerce/CatalogHotSpot.aspx?HSP=12345
-->
<Control src="LoadWidgetControl.ascx" Name="HotSpot Display"
    FileLocation="HotSpotDiagramDisplay.html"
    Options="
        shape: 'circle',
        popupShowTitle: true,
        popupWidth: 300,
        popupHeight: 400,
        popupMinWidth: null,
        popupMinHeight: null,
        popupMaxWidth: null,
        popupMaxHeight: null,
        popupEnableDrag: true,
        popupEnableResize: false,
        popupShowCloseButton: true,
        popupCloseOnOutsideClick: true,
        popupModal: false,
        popupAtPosition: 'left top',
        popupMyPosition: 'left top',
        popupOffsetX: 10,
        popupOffsetY: 0,
        addToCartButtonText: 'Add to Cart',
        addedToCartButtonText: 'Added to Cart',
        addedToCartMessageTimeout: 1500,
        addToCartErrorMessageTimeout: 3500,
        addToCartErrorMessageText: null,
        diagramNameCSSClass: 'diagramName',
        diagramHeadlineCSSClass: 'diagramHeadline',
        diagramDescriptionCSSClass: 'diagramDescription',
        hotSpotItemNameCSSClass: 'popupName',
        hotSpotItemPhotoCSSClass: 'popupPhoto',
        hotSpotItemShortDescriptionCSSClass: 'popupShortDescription',
        hotSpotMinQtyCSSClass: 'popupMinQty',
        hotSpotItemPriceCSSClass: 'WebPrice',
        addToCartButtonCSSClass: 'btnCart btnHotSpot'" 
/>

<!-- Example 2: Options set with default values. 
        diagram_ID - force diagram to use ID of 1234
        shape - use star for the hot spot shape
        addToCartButtonText - use text of 'Buy Now'
        popupModal - treat the hot spot popup as a modal window 
-->
<Control src="LoadWidgetControl.ascx" Name="HotSpot Display"
    FileLocation="HotSpotDiagramDisplay.html"
    Options="
        diagram_ID: 1234,
        shape: 'star',
        popupModal: true,
        addToCartButtonText: 'Buy Now'"
/>
#endregion

#region ItemsBoughtWith_Listing
<!-- Example 1: Options set with default values.
     Item determined by evaluating URL of the Item Detail Page in page address 
     e.g https://www.yourdomain.com/ecommerce/product/A100/15-Speed-Mountain-Bike-Boys
-->
<Control src="LoadWidgetControl.ascx" Name="BoughtWith Widget" 
    FileLocation="ItemsBoughtWith_Listing.html"
    Options="
        maxItemsToShow: 10,
        headlineText: 'Shoppers who buy this, buy these...', 
        photoWidth: 80,
        widgetHeight: '100%',
        pictureNotFoundImageUrl: '/ecommerce/images/photo-not-found.png',
        photoCssClass: 'ListingPhoto',
        detailsCssClass: 'ListingItemDetails',
        priceCssClass: 'WebPrice'"
/>

<!-- Example 2:  Use all default option values except:
        stockCode - Item forced to override anything retreived from the URL. 
        maxItemToShow - show only top 5.
        photoWidth - Set to custom of 72 pixels.
        pictureNotFoundImageUrl - use a custom image in the theme.

     e.g https://www.yourdomain.com/ecommerce/product/A100/15-Speed-Mountain-Bike-Boys
-->
<Control src="LoadWidgetControl.ascx" Name="BoughtWith Widget" 
    FileLocation="ItemsBoughtWith_Listing.html"
    Options="
        stockCode:'A100'
        maxItemsToShow: 5,
        photoWidth: 72,
        widgetHeight: '100%',
        pictureNotFoundImageUrl: '/ecommerce/site/themes/images/myphoto-not-found.png'"
/>
#endregion

#region Items_TileListing
<!-- Example: Options showing default values -->
<Control src="LoadWidgetControl.ascx"
    FileLocation="Items_TileListing.html" 
    Options="
        includeItemsFromAllChildCategories: false,
        enableHighlightOnTileClick: false,
        tileHeight: 415,
        tileWidth: 240,
        tileMargin: 12,
        showScroll: true,
        tileFlowDirection: 'vertical',
        height: 'auto',
        overrideCategoryList: PAGE_CATEGORY,
        includeModels: true,
        includeStockCodes: true,
        includeSKUs: false,
        pageSize: -1,
        showTileBorder: true,
        pagerCSSClass: 'light-theme',
        pagerButtonsDisplayedBeforeEllipsis: 3,
        previousPageButtonText: 'Prev',
        nextPageButtonText: 'Next',
        enableGoToPageByEllipsis: true,
        pagerButtonsAtEdge: 2,
        addToCartButtonText: 'Add to Cart',
        addedToCartButtonText: 'Added to Cart',
        addedToCartMessageTimeout: 1500,
        addToCartErrorMessageText: null,
        addToCartErrorMessageTimeout: 3500,
        addToCartError: null,
        learnMoreLinkText: 'Detail View',
        qtyLabelText: 'Qty:'"
/>
#endregion

#region ItemPriceRange_Filter
<Control src="LoadWidgetControl.ascx" FileLocation="ItemPriceRange_Filter.html"
  Options="
        priceBasis: 'List',
        sliderStep: 10,
        rangeBarColor: '#999',
        titleText: 'PriceRange'
    "
/>
#endregion

#region Login_Speedbump
<Control src="LoadWidgetControl.ascx" 
    FileLocation="Login_Speedbump.html" 
    RequireAnonymous="true" 
/>
#endregion

#region ProcessPayment_Popup
<Control src="LoadWidgetControl.ascx" 
    FileLocation="ProcessPayment_Popup.html" 
    RequireLogin="true" 
/>
#endregion

#region BillingHistory_Grid
<Control src="LoadWidgetControl.ascx" 
    FileLocation="BillingHistory_Grid.html" 
    RequireLogin="true" 
/>
#endregion

#region OrderHistory_Grid
<Control src="LoadWidgetControl.ascx" 
    FileLocation="OrderHistory_Grid.html" 
    RequireLogin="true" 
/>
#endregion

#region WarehouseShipFrom_Display
<Control src="LoadWidgetControl.ascx" 
    FileLocation="WarehouseShipFrom_Display.html" 
/>
#endregion

#region DocumentViewer_Popup
<Control src="LoadWidgetControl.ascx" 
    FileLocation="DocumentViewer_Popup.html" 
    RequireLogin="true" 
/>
#endregion

#region Cart_QuickOrder
<Control src="LoadWidgetControl.ascx" FileLocation="Cart_QuickOrder.html" RequireLogin="true" 
    Options=" 
        ShowColumnHeader: true,
        DisplayCartHeaderCustomerPrice: true,
        AutoCompleteSearchMode: 'StartsWith',
        StockCodeFilterMinimumLength: 2,
        EnableFilterModeSelection: true,
        StockCodeFilterDelay: 10,
        EnableOnHandQuantityDisplay: true,
        StockCodeFilterDropDownLength: 8,
        StockCodeColumnHeaderText: 'Stock Code',
        DescriptionColumnHeaderText: 'Description',
        QuantityColumnHeaderText: 'Qty',
        ExtPriceColumnHeaderText: 'Total',
        OnHandQuantityColumnHeaderText: 'Stock',
        DefaultFocusedElementID: 'skuNumber',  
        AfterQuantityFocusedElementID: 'addToCartBtn',
        QuantityInputEnterBehavior: 'addToCart'"
/>
#endregion

#region ShoppingCart
<Control src="LoadWidgetControl.ascx"
     FileLocation="ShoppingCart.html"
     Options="
        badgeParentSelector: '.icon-banknote',
        checkCartInterval:5000"
/>
#endregion

#region ItemReturnForm
<Control src="LoadWidgetControl.ascx" FileLocation="ItemReturnForm.html" RequireLogin="true" 
    Options="
        popupText: 'A member of our team will review your submission and you should expect to receive an email within 2-3
            busines days with an approval and shipping instructions or a follow-up requesting additional information
            about your return.',
        popupHeader: 'Thank you for submitting your return.',
        popupButtonText: 'Continue to Returns Section',
        submitButtonText: 'Submit Return',
        salesOrderPlaceholder: 'Enter Order Number',
        allowMultipleFiles: false,
        maxFileSize: 5000000,
        allowedExtensionsForUpload: '.Pdf',
        strObscureFilename: false,
        AddReturnNumberToFileName: true,
        fileUploadPrefix: 'pre_',
        fileUploadSuffix: '_Suf',
        displayRules: true,
        selectButtonText: 'Drop file here',"
/>
#endregion

#region Account_CreateCustomer
<Control src="LoadWidgetControl.ascx" FileLocation="Account_CreateCustomer.html" RequireLogin="false" 
    Options="
        reCaptchaSiteKey: '6Lf4q0wUAAXXXXXXXXXXXnRFjs4wnQFRNwFu7',
        reCaptchaTheme: 'light'
        redirectPage: CustomerMyAccount.aspx" 
/>
#endregion

Widget Source

The following is the source code for this widget.

Developer's Note:

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