Cart_SaveCartPopup Widget

A save cart popup widget. Introduced in 2023.1.

Remarks

The Cart_SaveCartPopup widget provides an interface that allows shoppers to provite a custom name to a saved cart when saving. The widget is automatically loaded and implemented by the ShoppingCartDisplayControl.

When clicking the Save Cart button, a pop up will appear asking the Shopper to type a name for the cart which will be saved along with the cart details for future use. The name can contain any characters, but the field input is limited to 50 characters. When the Shopper completes entering their name, they can click the Save Cart button within the pop up which will then save the cart and return the user the Shopping Cart page.

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.

The popupTitle option is used to customize the text in the title bar of the popup. The default value is "Save Cart".

The dimensions of the popup dialog box can be set using the popupWidth (default of 450) and popupHeight (default of 250). The values represent pixel dimensions.

The width of the input box where the shopper enters their cart name can be set using the nameFieldWidth option. The default pixel width is 400.

The default message displayed above the input box can be customized using the instructionText option. The default message is "Enter the name you would like to assign to your Saved Cart."

Example

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

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.

WidgetName.html

<div id="popSaveCart"></div>

<script type="text/javascript">
    $(function () {
        var buttonIndicator;
        $("#popSaveCart").dxPopup({
            title: widgetOptions.popupTitle || 'Save Cart',
            contentTemplate: $('#popSaveCart-template'),
            width: widgetOptions.popupWidth || 450,
            height: widgetOptions.popupHeight || 250,
            onShowing: function () {
                $("#txtSavedCartName").dxTextBox({
                    placeholder: widgetOptions.nameFieldEmptyText || 'Cart Name',
                    width: widgetOptions.nameFieldWidth || 400,
                    maxLength: 50
                });
                $("#btnSaveCart").dxButton({
                    text: 'Save Cart',
                    onClick: function (e) {
                        e.component.option('text', 'Saving...');
                        buttonIndicator.option('visible', true);
                        saveCart($('#txtSavedCartName').dxTextBox('instance').option('value'));
                    },
                    template: function(data, container) {
                        $("<div class='button-indicator DT-Button'></div><span class='dx-button-text DT-Button'>" + data.text + "</span>").appendTo(container);
                        buttonIndicator = container.find(".button-indicator").dxLoadIndicator({
                            visible: false,
                            width: 24, 
                            height: 24, 
                        }).dxLoadIndicator("instance");

                    }
                });
            },
            onHidden: function () {
                $('#txtSavedCartName').dxTextBox('instance').option('value', '');
                $('.message').css("display", "none");
                $('.form').css("display", "block");
            },
            animation: {
                hide: "{ type: 'pop', duration: 400, from: { position: { my: 'center', at: 'center', of: window } }, to: { position: { my: 'top', at: 'bottom', of: window } }} (iOS)",
                show: "{ type: 'pop', duration: 400, from: { position: { my: 'top', at: 'bottom', of: window } }, to: { position: { my: 'center', at: 'center', of: window } }} (iOS)"
            },
        });

        function saveCart(name) {
            MakeAJAXCall("Cart.SaveCart", { Name: name.replace("'","\\'") }, validateSavedCart)
        }

        function validateSavedCart(DATA) {
            if (DATA != '') {
                var d = JSON.parse(DATA);
                var result = d.Result;
                $('.form').css("display", "none");
                $('.message').css("display", "block");
                $("h3.message").text(result.Message);

                if (result.Success) {
                    setTimeout(function () { $("#popSaveCart").dxPopup("hide"); }, 2000)
                }
            }
        }
    });


</script>

<script type="text/html" id="popSaveCart-template">
    <% var instructionText = widgetOptions.instructionText || 'Enter the name you would like to assign to your Saved Cart.' %>
    <div class="popupWrapper form">
        <p>
            <%= instructionText %>
        </p>
        <div id="txtSavedCartName"></div>
        <br />
        <div id="btnSaveCart"></div>
    </div>
    <div class="popupWrapper message">
        <h3 class="message"></h3>
    </div>
</script>

<style type="text/css">
    .popupWrapper{text-align:center;padding:20px}#button,#button .dx-button-content{padding:0}#button .button-indicator{height:24px;width:24px;display:inline-block;vertical-align:middle;margin-right:10px}.message{display:none}
</style>