Your IP : 216.73.216.52
define([
'uiComponent',
'uiLayout',
'uiRegistry',
'mage/template',
'jquery',
'ko',
'Magento_Ui/js/modal/modal',
'Webkul_BuyButton/js/tabs',
'jquery/colorpicker/js/colorpicker',
'mage/translate'
], function(
Component,
layout,
registry,
mageTemplate,
$,
ko,
modal,
collapsible
) {
'use strict';
return Component.extend({
defaults: {
template: "Webkul_BuyButton/create.html",
inputType: false,
productIds: '',
showSizeDropdown: false,
jsTemplate: '<div id="buybutton-init"></div> <script>(function(d,s,id){var js,bjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.async=true;js.src="${window.staticUrl}";js.onload=function(){new BuyButton({productIds:<%- productIds %>, baseUrl: <%- baseUrl %>, styles: <%- styles %>});};bjs.parentNode.insertBefore(js,bjs);}(document,"script","buybutton-js"));</script>',
iframeWinodw:{},
iframeDocument: {},
changesCss: [],
lessinput:'@containerBackground: #FFFFFF;@itemsAlign: center;@itemBackground: #FFFFFF;@itemWidth:18.4%;@buttonFont:Arial, Helvetica, sans-serif;@buttonFontSize:16px;@buttonFontColor:#FFF;@buttonBackgroundColor:#1979c3;@buttonBorderRadius:3px;@headingFont:Arial, Helvetica, sans-serif;@headingFontSize:18px;@headingFontColor:#000;@priceFont:Arial, Helvetica, sans-serif;@priceFontSize:18px;@priceFontColor:#000;@checkoutButtonColor: #fff;@checkoutButtonBackground: #1979c3;.buybutton-container{background: @containerBackground}.buybutton-item{text-align:@itemsAlign;background:@itemBackground;width:@itemWidth}.buybutton-item-name{font-family:@headingFont;font-size:@headingFontSize;color:@headingFontColor;}.buybutton-item-price{font-family:@priceFont;font-size:@priceFontSize;color:@priceFontColor;}.buybutton-item-view > button, .buybutton-product-addtocart > button.buybutton-primary {background:@buttonBackgroundColor;border-radius: @buttonBorderRadius;font-family:@buttonFont;font-size:@buttonFontSize;color:@buttonFontColor}.bb-cart-checkout > .button{font-family: @buttonFont; color: @checkoutButtonColor;background: @checkoutButtonBackground;border-color:@checkoutButtonBackground;}.buybutton-product-price, .bb-cart-item-price{font-family:@priceFont;font-size:@priceFontSize;color:@priceFontColor;} .bb-cart-item-name, .buybutton-product-name{font-family:@headingFont;font-size:@headingFontSize;color:@headingFontColor;}.buybutton-product-sku,.buybutton-product-description{font-family:@priceFont;font-size:@priceFontSize;color:#666666;}',
dynamicCss: '',
miniCartText: 'Cart',
addToCartText: 'Add To Cart',
buyNowText: 'Buy Now',
itemInCartText: 'Item In Cart',
cButtonText: 'Proceed To Checkout',
vButtonText: 'View Details',
noItemFoundText: 'No items found in cart.',
shippingInfoText: '',
qtyText: 'Qty',
subTotalText: 'Cart Subtotal',
dTemplate: 1,
availableSerifFonts: [
{
label: 'Sans Serif',
value: [
{label:'Helvetica',value:'Helvetica, sans-serif'},
]
},
{
label: 'Serif',
value: [
{label:'Times New Roman',value:'Times New Roman, Times, serif'},
]
},
{
label: 'Mono',
value : [
{label:'Courier New', value:'Courier'},
{label:'FreeMono',value:'FreeMono, monospace'},
{label:'Monospace', value:'Lucida Console, Monaco, monospace'}
]
}
],
availableSizes: [
{label: '12px', value:'12px'},
{label: '14px', value:'14px'},
{label: '16px', value:'16px'},
{label: '18px', value:'18px'},
{label: '20px', value:'20px'}
]
},
/**
* @extends
*/
initialize: function () {
var self = this;
this._super();
/**
* initialize buy button create page left customization panel
*/
collapsible({element: '.bb-tab-title'});
/**
* updating style in the by button demo when a customization is done in the customization panel
*/
self.dynamicCss.subscribe(function(css) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.styles = css;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.addStyleTag;
});
/**
* changesCss is to array on modified css that needs to be merged with original css and update in the buy button code
*/
self.changesCss.subscribe(function(cssArray) {
let cssObj = {};
$.each(cssArray, function(key, value) {
$.extend(cssObj, value);
});
self.lessCompile(less, cssObj);
});
/**
* listening mini cart text change to reflect it in the demo
*/
self.miniCartText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.miniCartText = text;
});
/**
* listening add to cart text change to reflect it in the demo
*/
self.addToCartText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.addToCartText = text;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueQuickModel.addToCartLabel = text;
self.iframeWinodw.wkaddTocartLabel.text = text;
});
/**
* listening buy now button text change to reflect it in the demo
*/
self.buyNowText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.buyNowText = text;
});
/**
* listening view details button text change to reflect it in the demo
*/
self.vButtonText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.vButtonText = text;
});
/**
* listening item in cart text change to reflect it in the demo
*/
self.itemInCartText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.itemInCartText = text;
});
/**
* listening proceed to checkout button text change to reflect it in the demo
*/
self.cButtonText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.cButtonText = text;
});
/**
* listening item not found text change to reflect it in the demo
*/
self.noItemFoundText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.noItemFoundText = text;
});
/**
* listening quantity text change to reflect it in the demo
*/
self.qtyText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.qtyText = text;
});
/**
* listening subtotal text change to reflect it in the demo
*/
self.subTotalText.subscribe(function(text) {
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.childData.subTotalText = text;
});
},
/**
* show buy button template or not
*/
showTemplate: function() {
let productIds = window.productIds.split(",");
if (productIds.length > 1) {
return false;
}
return true;
},
/**
* update the design template(button, button with image name, button with image name desc )
* in the demo and buy button code
*/
designTemplate: function(v) {
let self = this;
self.iframeWinodw = document.getElementById("bb-demo").contentWindow;
let productIds = window.productIds.split(",");
if (productIds.length > 1) {
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.designTemplate = 1;
self.dTemplate(1);
} else {
self.iframeWinodw.wkBuyButtonRegistry.currenctObject.vueContainerModel.designTemplate = parseInt(v);
self.dTemplate(v);
}
},
/**
* compile less to generate css
*/
lessCompile: function (less, modifyVars) {
var self = this;
less.render(this.lessinput, {modifyVars: modifyVars}, (function(e, result) {
if (e) {
//console.log(e);
} else {
self.dynamicCss(result.css.trim());
}
}).bind(self));
},
/**
* initialize observers
*/
initObservable: function () {
this._super().observe('showSizeDropdown inputType productIds availableSerifFonts availableSizes dynamicCss changesCss miniCartText addToCartText buyNowText itemInCartText cButtonText noItemFoundText qtyText subTotalText dTemplate vButtonText');
return this;
},
/**
* demo iframe initialization content
*/
initChildFrameVars: function() {
let iframeContent = `<html><body><div id="buybutton-init"></div> <script>(function(d, s, id) { var js, bjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s);js.id = id; js.async = true; setTimeout(function() { js.src = '${window.jsUrl}'; js.onload = function() { new BuyButton({redirectToProduct: '${window.redirectToProduct}',locale: '${window.locale}', storeId: '${window.storeId}', currency_code: '${window.currency}', productIds: '${window.productIds}', baseUrl: '${window.baseUrl}', staticUrl:'${window.staticUrl}'}); }; bjs.parentNode.insertBefore(js, bjs); }, 2000); }(document, "script", "buybutton-js"));</script></body></html>`;
return iframeContent;
},
/**
* alignment change css
*/
alignChange: function(data, event) {
this.changesCss.push({'@itemsAlign': $(event.target).val()});
},
/**
* TODO in future
*/
actionChange: function(data, event) {
// this.lessCompile(less, {'@buttonFace': 'back', '@buttonText': 'silver'});
},
/**
* on size change small medium or large
* @deprecated
*/
sizeChange: function(data, event) {
let size = $(event.target).val();
let productIds = window.productIds.split(",");
if (productIds.length > 1) {
switch(size) {
case 'small':
this.changesCss.push({'@itemWidth': '16%'});
break;
case 'medium':
this.changesCss.push({'@itemWidth': '18.4%'});
break;
case 'large':
this.changesCss.push({'@itemWidth': '20%'});
}
} else {
this.changesCss.push({'@itemWidth': '100%'});
}
},
buttonFontChange: function(data, event) {
this.changesCss.push({'@buttonFont': $(event.target).val()});
},
buttonBorderRadiusChange: function(data, event) {
this.changesCss.push({'@buttonBorderRadius': $(event.target).val()});
},
headingFontChange: function(data, event) {
this.changesCss.push({'@headingFont': $(event.target).val()});
},
priceFontChange: function(data, event) {
this.changesCss.push({'@priceFont': $(event.target).val()});
},
buttonColorChange: function(data, event) {
this.changesCss.push({'@buttonFontColor': $(event.target).val()});
},
buttonBackgroundColorChange: function(data, event) {
this.changesCss.push({'@buttonBackgroundColor': $(event.target).val()});
},
headingColorChange: function(data, event) {
this.changesCss.push({'@headingFontColor': $(event.target).val()});
},
priceColorChange: function(data, event) {
this.changesCss.push({'@priceFontColor': $(event.target).val()});
},
buttonFontSizeChange: function(data, event) {
this.changesCss.push({'@buttonFontSize': $(event.target).val()});
},
headingFontSizeChange: function(data, event) {
this.changesCss.push({'@headingFontSize': $(event.target).val()});
},
priceFontSizeChange: function(data, event) {
this.changesCss.push({'@priceFontSize': $(event.target).val()});
},
checkoutColorChange: function(data, event) {
this.changesCss.push({'@checkoutButtonColor': $(event.target).val()});
},
checkoutBackgroundChange: function(data, event) {
this.changesCss.push({'@checkoutButtonBackground': $(event.target).val()});
},
/**
* generate the code for buybutton
*/
generateCode: function() {
var self = this;
let options = {
buttons: [{
text: $.mage.__('Copy To Clipboard'),
class: 'copy-button',
click: function() {
var range = document.createRange();
range.selectNode(document.getElementById("bb-code-viewer"));
document.getElementById("bb-code-viewer").focus();
document.getElementById("bb-code-viewer").select();
var sel = window.getSelection();
//sel.removeAllRanges();
sel.addRange(range);
document.execCommand("copy");
let buttonText = $(".copy-button").text();
$(".copy-button").text("Copied");
$(".copy-button").attr("disabled", true);
setTimeout(function() {
$(".copy-button").text(buttonText);
$(".copy-button").removeAttr("disabled");
}, 2000);
}
}],
closed: function() {
document.getElementById("bb-code-viewer").removeEventListener("dblclick", function() {});
$(".buybutton-code-generate-modal").parent().remove();
},
modalClass: 'buybutton-code-generate-modal',
responsive: true,
title: $.mage.__('Embed Code'),
type: 'popup'
};
let template = this.jsTemplate, tmpl, progressTemplate;
progressTemplate = mageTemplate("#buybutton-call-code");
tmpl = progressTemplate({
productIds: window.productIds,
baseUrl: window.baseUrl,
staticUrl: window.staticUrl,
redirectToProduct: window.redirectToProduct,
styles: self.dynamicCss().trim().replace(/(\r\n\t|\n|\r\t)/gm,""),
jsUrl: window.jsUrl,
miniCartText: self.miniCartText(),
addToCartText: self.addToCartText(),
buyNowText: self.buyNowText(),
itemInCartText: self.itemInCartText(),
cButtonText: self.cButtonText(),
vButtonText: self.vButtonText(),
noItemFoundText: self.noItemFoundText(),
shippingInfoText: self.shippingInfoText,
qtyText: self.qtyText(),
subTotalText: self.subTotalText(),
designTemplate: self.dTemplate(),
locale: window.locale,
currency_code: window.currency,
storeId: window.storeId
});
var popup = modal(options, tmpl);
popup.openModal();
document.getElementById("bb-code-viewer").addEventListener("dblclick", function() {
var range = document.createRange();
this.select();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand("copy");
let buttonText = $(".copy-button").text();
$(".copy-button").text("Copied");
setTimeout(function() {
$(".copy-button").text(buttonText);
}, 2000);
});
},
/**
* after knockout initialized adding color picker on different classes
*/
afterTemplateRender: function() {
var self = this;
$.each(
['.cart_background_color', '.cart_button_color', '.button_color', '.button_background_color', '.price_color', '.heading_color'],
function (key, value) {
$(value).ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function(hsb, hex, rgb) {
$(value).val('#'+hex);
$(value).css({"backgroundColor": '#'+hex});
$(value).trigger("change");
},
});
}
);
// self.lessinput = "@buttonFace: red;@buttonText: green;.buybutton-view-product {color: @buttonFace;background: @buttonText;}"
require(["//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"], (function() {}).bind(self));
//console.log(self.iframeDocument.querySelector(".buybutton-item-name > span").style.font);
}
});
});