Categories

de_epages > de_epages.design.inc.customizeButtonStyle

Categories:

de_epages.design.inc.customizeButtonStyle.init( [ options ] )

Plugin: de_epages.design.inc.customizeButtonStyle

Description: Initialize and open dialog to configure buttons on the SF.

  • de_epages.design.inc.customizeButtonStyle.init( [ options ] )

    version added: 6.15.0

    options   A map of additional options pass to the function.

The de_epages.design.inc.customizeButtonStyle.init() creates dialog to configure buttons (e.g. the basket button). After calling de_epages.design.inc.customizeButtonStyle.init(),

you should call de_epages.design.inc.customizeButtonStyle.openDialog() to actually open the dialog. (See example.)
  • Init dialog on hover and open dialog on click.

    HTML:
    <button id="ep-CustomizeButtonStyle">Open Dialog</button>
    
    Code:
    var customizeButtonsLink = $('#ep-CustomizeButtonStyle');
      // The dialog is built on *mouseenter* and opened on *click*.
      customizeButtonsLink
        .on('mouseenter', function (event) {
          $.ready('de_epages.design.inc.customizeButtonStyle', function ($) {
            de_epages.design.inc.customizeButtonStyle.init(
              {
                CustomizableBasketButton : '<button name="AddToBasket" type="submit"><span class="ep-sprite ep-sprite-s" style="background-image: url(/WebRoot/StoreTypes/6.15.0/Store/SF/Icon/WireframeBlack/ico_s_basket.png)"></span>Add to basket</button>',
                BubbleHelpSource : '/WebRoot/StoreTypes/6.15.0/Store/BO/icons/ico_s_bubblehelp.png'
              },
              {
                title : '{AdjustAddToBasketButton}',
                restoreDefaults : '{RevertToDefault}',
                replaceButtonWithCustomImage : '{UploadOwnImage}',
                restoreDefaultImage : '{RemoveImage}',
                borderColor : '{BorderColor}',
                borderRadius : '{BorderRadius}',
                backgroundGradient : '{ColorGradient}',
                fontColor : '{FontColor}',
                fontSize : '{FontSize}',
                infoWarning : '{OptionNotAvailableInAllBrowsers}',
                apply : 'Apply',
                cancel : 'Cancel',
                width : 'Width',
                height : 'Height'
              },
              {
                ChangeAction: 'JSONSaveCustomizableBasketButton',
                ObjectID : epConfig.siteId,
    
    
                CustomizableBasketButton : {
                  Font : {
                    Size : 13,
                    Color : '#000'
                  },
                  Padding : {
                    Height : 1,
                    Width : 10,
                  },
                  Gradient : {
                    Color1 : '#F9F9F9',
                    Color2 : '#E2E2E2'
                  },
                  Border : {
                    Radius : 3,
                    Color : '#AAA'
                  },
                  Image : {
                    Path :  null,
                    Height :  null,
                    Width :  null
                  }
                },
    
              },
              ['CustomizableBasketButton'],
              {
                ChangeAction: 'JSONSaveCustomizableBasketButton',
                ObjectID : epConfig.siteId,
                  CustomizableBasketButton :  {
    
                Font : {
                  Size : 13,
                  Color : '#000'
                },
                Padding : {
                  Height : 1,
                  Width : 10,
                },
                Gradient : {
                  Color1 : '#F9F9F9',
                  Color2 : '#E2E2E2'
                },
                Border : {
                  Radius : 3,
                  Color : '#AAA'
                },
                Image : {
                  Path : null,
                  Height : null,
                  Width : null
                }
    
              }
              }
            );
          });
        })
        .on('click', function (event) {
          $.ready({script : 'builtCustomizeButtonsDialog'}, function ($) {
            de_epages.design.inc.customizeButtonStyle.openDialog();
          })
        });
    
    
  • defaults

    version added: 6.15.0

    A map with keys defining the default buttons as html strings.

  • wording

    version added: 6.15.0

    A map with keys defining the wording. (See example for possible keys.)

  • data

    version added: 6.15.0

    Button data for init.

  • dataNames

    version added: 6.15.0

    Array of names of data properties to pass to the server on apply. (E.g. "CustomizableBasketButton")

  • defaultValues

    version added: 6.15.0

    Default button data. Used for restoring defaults in the dialog.