var jQ = BoostPFS.jQ;
var Labels = BoostPFS.Labels;
var Utils = BoostPFS.Utils;
var Settings = BoostPFS.Settings;
import BaseComponent from "../../components/base-component";
import AjaxCart from "../ajax-cart/ajax-cart";
/**
* Quick view
* @extends BaseComponent
*/
class AddToCart extends BaseComponent {
/**
* Get the add to cart button types enum
*/
static get Type() {
return {
ADD_TO_CART: 'add-to-cart',
SOLD_OUT: 'sold-out',
SELECT_OPTIONS: 'select-options'
}
}
getTemplate() {
return `
<form method="post" action="/cart/add" accept-charset="UTF-8" class="{{class.atcForm}}" enctype="multipart/form-data" data-href="{{productUrl}}">
<input type="hidden" name="form_type" value="product">
<input type="hidden" name="quantity" value="1" min="1">
<input type="hidden" name="id" value="{{variantId}}">
<div class="boost-pfs-addtocart-wrapper">
<button name="add" class="boost-pfs-addtocart-btn boost-pfs-addtocart-select-options" {{clickAction}}>
<span> {{icoCart}}{{label}}</span>
</button>
</div>
</form>
`
}
compileTemplate() {
var productUrl = Utils.buildProductItemUrl(this.parent.data);
var clickAction = '';
var label = '';
var variantId = '';
var buttonClass = '';
var productData = this.parent.data;
var productListData = this.parent.parent.data;
var productIsFirst = productData.id == productListData[0].id;
var icoCart = '<svg width="32" height="32" viewBox="0 0 32 32"><g id="boost-pfs-icon-cart" transform="scale(0.03125 0.03125)"><path d="M448.217 818.845c-56.377 0-102.256 45.902-102.256 102.256 0 56.377 45.879 102.256 102.256 102.256s102.256-45.879 102.256-102.256c0-56.379-45.857-102.256-102.256-102.256zM448.217 977.908c-31.312 0-56.807-25.472-56.807-56.807 0-31.312 25.495-56.807 56.807-56.807s56.807 25.495 56.807 56.807c0.003 31.335-25.472 56.807-56.807 56.807z"></path><path d="M768.66 818.845c-56.377 0-102.256 45.902-102.256 102.256 0 56.377 45.879 102.256 102.256 102.256 56.354 0 102.256-45.879 102.256-102.256 0-56.379-45.902-102.256-102.256-102.256zM768.66 977.908c-31.335 0-56.807-25.472-56.807-56.807 0-31.312 25.472-56.807 56.807-56.807 31.29 0 56.807 25.495 56.807 56.807 0.003 31.335-25.517 56.807-56.807 56.807z"></path><path d="M1019.164 259.373c-4.294-5.499-10.886-8.702-17.883-8.702h-768.3l-63.329-233.255c-0.137-0.5-0.5-0.886-0.682-1.364-0.5-1.476-1.25-2.773-2.046-4.090-0.749-1.25-1.431-2.477-2.385-3.545-0.931-1.068-2.021-1.865-3.159-2.726-1.182-0.909-2.317-1.795-3.659-2.454-1.25-0.637-2.591-0.953-3.975-1.364-1.476-0.431-2.907-0.794-4.476-0.909-0.545-0.022-1.001-0.319-1.568-0.319h-124.978c-12.543 0-22.724 10.181-22.724 22.724s10.181 22.724 22.724 22.724h107.595l63.239 232.959 113.572 460.078c2.499 10.156 11.612 17.293 22.065 17.293h558.448c10.452 0 19.543-7.112 22.065-17.293l113.617-460.282c1.7-6.796 0.154-13.955-4.162-19.476zM869.871 710.976h-522.865l-102.39-414.858h727.667l-102.413 414.858z"></path></g></svg>';
var icoCartLink = '<svg width="32" height="32" viewBox="0 0 32 32"><use xlink:href="#boost-pfs-icon-cart"></use></svg>';
if (productData.available) {
if (productData.variants.length == 1) {
// Buy now if have 1 variant
clickAction = Settings.getSettingValue('general.enableAjaxCart') ? '' : 'type="submit"';
variantId = productData.variants[0].id;
label = Labels.action_list.atcAvailableLabel;
buttonClass = Class.atcAvailable;
this.type = AddToCart.Type.ADD_TO_CART;
this.variantId = variantId;
} else {
// Select options (link to product page) if have > 1 variant
clickAction = (Settings.getSettingValue('general.enableAjaxCart') && !Utils.isMobile()) ?
'' : 'onclick="window.location.href=\'' + productUrl + '\'" type="button"';
label = Labels.action_list.atcSelectOptionsLabel;
buttonClass = Class.atcSelectOptions;
this.type = AddToCart.Type.SELECT_OPTIONS;
}
} else {
clickAction = 'disabled type="button"';
label = Labels.action_list.atcSoldOutLabel;
buttonClass = Class.atcSoldOut;
this.type = AddToCart.Type.SOLD_OUT;
}
return this.getTemplate()
.replace(/{{class.atcForm}}/g, Class.atcForm)
.replace(/{{label}}/g, label)
.replace(/{{variantId}}/g, variantId)
.replace(/{{clickAction}}/g, clickAction)
.replace(/{{buttonClass}}/g, buttonClass)
.replace(/{{productUrl}}/g, productUrl)
.replace(/{{icoCart}}/g, productIsFirst ? icoCart : icoCartLink);
}
render() {
if (!this.$element) {
this.$element = jQ(this.compileTemplate());
}
}
isBindEvents() {
return Settings.getSettingValue('general.enableAjaxCart');
}
bindEvents() {
if (this.$element) {
switch (this.type) {
case AddToCart.Type.ADD_TO_CART:
this.$element.on('click', this.onClickAddToCart.bind(this));
break;
case AddToCart.Type.SELECT_OPTIONS:
if (!Utils.isMobile()) {
this.$element.on('click', this.onClickOpenQuickView.bind(this));
}
break;
}
}
}
onClickAddToCart(e) {
if (e) e.preventDefault();
var $addingLabel = this.$element.find('.boost-pfs-addtocart-btn > span');
var $errorLabel = this.parent.$element.find('.boost-pfs-addtocart-error-label');
if (!$errorLabel || $errorLabel.length == 0) {
this.parent.$element.append('<div class="boost-pfs-addtocart-error-label"></div>');
$errorLabel = this.parent.$element.find('.boost-pfs-addtocart-error-label');
}
AjaxCart.instance.addToCart(this.variantId, 1, $addingLabel, $errorLabel);
}
onClickOpenQuickView(e) {
if (e) e.preventDefault();
if (this.parent && this.parent.quickView && this.parent.quickView.$element) {
// Setting to append the quickview's option inside the product item, instead of opening pop up (inline quickview)
if (Settings.getSettingValue('general.selectOptionInProductItem')) {
this.parent.quickView.$element.attr('data-get-quickview-option', true);
}
this.parent.quickView.$element.click();
}
}
}
export default AddToCart;