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.0options 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()
,
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(); }) });