Your IP : 216.73.216.52
<div id="generate-code">
<button class="button primary" data-bind="i18n: 'Generate Code', click: generateCode.bind($data);"></button>
</div>
<div class="bb-sidebar bb-left" afterRender="function(target, viewModel) {viewModel.afterTemplateRender();}">
<div class="bb-customizer-tools">
<div class="bb-add-action admin__field" data-bind="visible: showTemplate()">
<label class="bb-label admin__field-label" data-bind="i18n: 'Template'"></label>
<div class="admin__field-control">
<div class="bb-template" data-bind="click: function() {designTemplate(1)}">Template1</div>
<div class="bb-template"data-bind="click:function() {designTemplate(2)}">Template2</div>
<div class="bb-template"data-bind="click:function() {designTemplate(3)}">Template3</div>
</div>
</div>
<div class="bb-alignment admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Alignment'"></label>
<div class="admin__field-control">
<select name="alignment" class="select admin__control-select" data-bind="event: {change: alignChange}">
<option value="center" data-bind="i18n: 'Center'"></option>
<option value="left" data-bind="i18n: 'Left'"></option>
<option value="Right" data-bind="i18n: 'Right'"></option>
</select>
</div>
</div>
<div class="bb-size admin__field" data-bind="visible: showSizeDropdown">
<label class="bb-label admin__field-label" data-bind="i18n: 'Size'"></label>
<div class="admin__field-control">
<select name="size" class="select admin__control-select" data-bind="event: {change: sizeChange}">
<option value="small" data-bind="i18n: 'Small'"></option>
<option value="medium" data-bind="i18n: 'Medium'"></option>
<option value="large" data-bind="i18n: 'Large'"></option>
</select>
</div>
</div>
<div class="bb-typography admin__field">
<label class="bb-tab-title" id="bbt" data-bind="i18n: 'Typography'"></label>
<div class="bb-tab-content bbt">
<div class="bb-button-font admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Font'"></label>
<div class="admin__field-control">
<select name="button_font" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSerifFonts,
event: {change: buttonFontChange}">
</select>
</div>
</div>
<div class="bb-heading-font admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Heading Font'"></label>
<div class="admin__field-control">
<select name="heading_font" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSerifFonts,
event: {change: headingFontChange}">
</select>
</div>
</div>
<div class="bb-price-font admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Price & Description Font'"></label>
<div class="admin__field-control">
<select name="price_font" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSerifFonts,
event: {change: priceFontChange}">
</select>
</div>
</div>
<div class="bb-heading-size admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Heading Size'"></label>
<div class="admin__field-control">
<select name="heading_size" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSizes,
event: {change: headingFontSizeChange}">
</select>
</div>
</div>
<div class="bb-heading-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Heading Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text heading_color" name="heading_color" data-bind="event: {change:headingColorChange }" />
</div>
</div>
<div class="bb-price-size admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Price Size'"></label>
<div class="admin__field-control">
<select name="price_size" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSizes,
event: {change: priceFontSizeChange}">
</select>
</div>
</div>
<div class="bb-price-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Price Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text price_color" name="price_color" data-bind="event: {change: priceColorChange}"/>
</div>
</div>
</div>
</div>
<div class="bb-button-style admin__field" >
<label class="bb-tab-title" id="bbs" data-bind="i18n: 'Cart Button Style'"></label>
<div class="bb-tab-content bbs">
<div class="bb-button-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text button_color" name="button_color" data-bind="event: {change: buttonColorChange}"/>
</div>
</div>
<div class="bb-button-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Background Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text button_background_color" name="button_background_color" data-bind="event: {change: buttonBackgroundColorChange}"/> <label data-bind="i18n: 'Background Color'"></label>
</div>
</div>
<div class="bb-button-text-size admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Text Size'"></label>
<div class="admin__field-control">
<select name="button_text_size" class="select admin__control-select" data-bind="
optionsValue: 'value',
optionsText: 'label',
optgroup: availableSizes,
event: {change: buttonFontSizeChange}">
</select>
</div>
</div>
<div class="bb-button-border-radius admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Border Radius (in pixel)'"></label>
<div class="admin__field-control">
<input type="text" class="select admin__control-text" name="button_border_radius" data-bind="event:{change:buttonBorderRadiusChange}" />
</div>
</div>
<div class="bb-button-text admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Text'"></label>
<div class="admin__field-control">
<input type="text" class="select admin__control-text" name="button_text" data-bind="textInput: addToCartText"/>
</div>
</div>
<div class="bb-view-button-text admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'View Button Text'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text" name="view_button_text" data-bind="textInput: vButtonText">
</div>
</div>
</div>
</div>
<div class="bb-shopping-cart admin__field" >
<label class="bb-tab-title" id="bsc" data-bind="i18n: 'Shopping Cart'"></label>
<div class="bb-tab-content bsc">
<div class="bb-cart-heading admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Heading'"></label>
<div class="admin__field-control">
<input type="text" class="select admin__control-text" name="cart_heading" data-bind="textInput: miniCartText"/>
</div>
</div>
<div class="bb-cart-total admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Total'"></label>
<div class="admin__field-control">
<input type="text" class="select admin__control-text" name="cart_total" data-bind="textInput: subTotalText" />
</div>
</div>
<div class="bb-item admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'No Item In Cart Text'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text" name="no_item_in_cart" data-bind="textInput: noItemFoundText"/>
</div>
</div>
<div class="bb-item admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Item In Cart Text'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text" name="item_in_cart" data-bind="textInput: itemInCartText"/>
</div>
</div>
<div class="bb-cart-button-text admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Add To Cart Button Text'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text" name="cart_button_text" data-bind="textInput: cButtonText">
</div>
</div>
<div class="bb-cart-button-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Button Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text cart_button_color" id="cart_button_color" name="cart_button_color" data-bind="event: {change: checkoutColorChange}" />
</div>
</div>
<div class="bb-cart-background-color admin__field">
<label class="bb-label admin__field-label" data-bind="i18n: 'Background Color'"></label>
<div class="admin__field-control">
<input type="text" class="admin__control-text cart_background_color" id="cart_background_color" name="cart_background_color" data-bind="event: {change: checkoutBackgroundChange}" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bb-sidebar bb-right">
<div class="bb-demo"><h1 data-bind="i18n: 'Demo'"></h1></div>
<iframe id="bb-demo" afterRender="function(target, viewModel) {let iContent = viewModel.initChildFrameVars();target.setAttribute('srcDoc', iContent );}">
</iframe>
</div>