@apicart/vue-components
Version:
Apicart Vue.Js components for simple e-commerce platform development
270 lines (252 loc) • 13.1 kB
JavaScript
/**
* @apicart/vue-components v1.0.0-alpha7
* (c) 2018-2020 Apicart Company
* Released under the MIT License.
*/
import Apicart from '@apicart/core-sdk';
import { Translator } from '../..';
import { ApicartButton, ApicartDrawer, ApicartCategoriesList, ApicartProductsList } from './..';
var config = {
titleEnabled: true,
descriptionEnabled: true,
categories: {
enabled: true
},
products: {
list: []
}
};
var store;
var translator = Apicart.VueComponentsTranslator || Translator;
var i18n = translator.getI18n();
var getProductsAndCategories = function (productsList, actualKey) {
if (actualKey === void 0) { actualKey = ''; }
var productsByCategory = {};
var categories = {};
if (Array.isArray(productsList)) {
productsByCategory = productsList;
}
else {
Apicart.Utils.Loops.forEach(productsList, function (value, categoryKey) {
if (!Array.isArray(value)) {
var productAndCategoriesData = getProductsAndCategories(value, categoryKey);
productsByCategory[categoryKey] = productAndCategoriesData.productsByCategory;
categories[categoryKey] = {
keyPath: actualKey ? actualKey + '.' + categoryKey : categoryKey,
subcategories: productAndCategoriesData.categories
};
}
else {
categories[categoryKey] = {
keyPath: actualKey ? actualKey + '.' + categoryKey : categoryKey,
subcategories: {}
};
productsByCategory[categoryKey] = value;
}
});
}
return {
productsByCategory: productsByCategory,
categories: categories,
};
};
var getFirstCategoryKeyPath = function (categories) {
var categoryKeyPath = 'default';
Apicart.Utils.Loops.forEach(categories, function (value) {
if (Object.keys(value.subcategories).length) {
categoryKeyPath = getFirstCategoryKeyPath(value.subcategories);
}
else {
categoryKeyPath = value.keyPath;
}
return false;
});
return categoryKeyPath;
};
var productAndCategories;
var windowIsDefined = typeof window !== 'undefined';
var script = {
name: 'apicart-category',
i18n: i18n,
components: {
'apicart-button': windowIsDefined && window.ApicartButton ? window.ApicartButton : ApicartButton,
'apicart-drawer': windowIsDefined && window.ApicartDrawer ? window.ApicartDrawer : ApicartDrawer,
'apicart-categories-list': windowIsDefined && window.ApicartCategoriesList
? window.ApicartCategoriesList
: ApicartCategoriesList,
'apicart-products-list': windowIsDefined && window.ApicartProductsList
? window.ApicartProductsList
: ApicartProductsList
},
data: function () {
return {
categories: {},
showCategories: false,
categoriesDrawer: null,
selectedCategoryKeyPath: 'default',
categoriesEnabled: true,
categoryTitleEnabled: null,
categoryDescriptionEnabled: null,
products: null
};
},
methods: {
showCategoriesDrawer: function () {
this.$refs.apicartDrawer.open();
},
configure: function () {
config = Apicart.Utils.Objects.merge(config, Apicart.getConfigParameter('vueComponents.category'));
productAndCategories = getProductsAndCategories(config.products.list);
this.categoriesEnabled = config.categories.enabled;
this.categoryTitleEnabled = config.titleEnabled;
this.categoryDescriptionEnabled = config.descriptionEnabled;
this.selectedCategoryKeyPath = getFirstCategoryKeyPath(productAndCategories.categories);
this.categories = productAndCategories.categories;
this.showCategories = this.categoriesEnabled && Object.keys(this.categories).length;
this.products = Array.isArray(productAndCategories.productsByCategory)
? productAndCategories.productsByCategory
: Apicart.Utils.Objects.find(productAndCategories.productsByCategory, this.selectedCategoryKeyPath);
}
},
created: function () {
var _this = this;
store = Apicart.getConfigParameter('store');
this.configure();
Apicart.Utils.EventDispatcher.addListener('apicart-category-selection-' + this._uid, 'apicart:category:selected', function (selectedCategoryKeyPath) {
_this.selectedCategoryKeyPath = selectedCategoryKeyPath;
_this.products = Array.isArray(productAndCategories.productsByCategory)
? productAndCategories.productsByCategory
: Apicart.Utils.Objects.find(productAndCategories.productsByCategory, _this.selectedCategoryKeyPath);
});
Apicart.Utils.EventDispatcher.addListener('apicart-category-configuration-' + this._uid, 'apicart:configure', function () {
_this.configure();
});
}
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".apicart-category{font-family:-apple-system,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";-webkit-font-smoothing:antialiased;box-sizing:border-box;outline:0}.apicart-category *{box-sizing:border-box;outline:0}.apicart-category__title{font-size:20px;line-height:32px;display:flex;align-items:center;margin-top:0}.apicart-category__title-products-quantity{line-height:22px;display:inline-block;font-size:10px;text-align:center;font-weight:600;font-family:\"Mark Pro\",sans-serif;color:#b3b3b3;background-color:#f2f2f2;margin-left:8px;height:22px;border-radius:22px;padding:0 12px;margin-left:12px}.apicart-category__content{display:flex;align-items:flex-start}.apicart-category__categories-toggle-button-wrapper{margin-bottom:30px;text-align:center}@media (min-width:992px){.apicart-category__categories-toggle-button-wrapper{display:none}}.apicart-category__categories-toggle-button-wrapper--sidebar{border-bottom:1px solid;text-align:left;margin-bottom:20px;padding:8px}@media (min-width:992px){.apicart-category__categories-toggle-button-wrapper--sidebar{display:none}}.apicart-category__categories-drawer .apicart-drawer__container{padding-top:10px;padding-bottom:10px}.apicart-category__categories-wrapper{display:none;width:100%;position:sticky;top:24px}@media (min-width:992px){.apicart-category__categories-wrapper{display:flex;margin-right:26px;max-width:224px}}@media (min-width:1200px){.apicart-category__categories-wrapper{margin-right:46px;max-width:254px}}.apicart-category__categories-wrapper--visible{transform:translateX(0)}.apicart-category__products-wrapper{width:100%;margin:0 auto;max-width:1440px}.apicart-category__footer{border-top:1px solid #e5e5e5;padding:30px 0}";
styleInject(css_248z);
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.products.length)?_c('div',{staticClass:"apicart-category",attrs:{"id":_vm.$t('category.id')}},[(_vm.showCategories)?_c('div',{staticClass:"apicart-category__categories-toggle-button-wrapper"},[_c('apicart-button',{attrs:{"type":"outlined"},nativeOn:{"click":function($event){return _vm.showCategoriesDrawer($event)}}},[_vm._v(_vm._s(_vm.$t('category.showCategories')))])],1):_vm._e(),_c('div',{staticClass:"apicart-category__content"},[(_vm.showCategories)?_c('apicart-drawer',{ref:"apicartDrawer",staticClass:"apicart-category__categories-drawer"},[_c('apicart-categories-list',{attrs:{"selectedCategoryKeyPath":_vm.selectedCategoryKeyPath,"toggled":true,"categories":_vm.categories}})],1):_vm._e(),(_vm.showCategories)?_c('aside',{staticClass:"apicart-category__categories-wrapper"},[_c('apicart-categories-list',{attrs:{"selectedCategoryKeyPath":_vm.selectedCategoryKeyPath,"toggled":true,"categories":_vm.categories}})],1):_vm._e(),_c('div',{staticClass:"apicart-category__products-wrapper"},[(_vm.categoryTitleEnabled && _vm.showCategories)?_c('h1',{staticClass:"apicart-category__title"},[_c('span',[_vm._v(_vm._s(_vm.$t('categories.' + _vm.selectedCategoryKeyPath + '.title')))]),_c('span',{staticClass:"apicart-category__title-products-quantity"},[_vm._v(_vm._s(_vm.products.length))])]):_vm._e(),_c('div',{staticClass:"apicart-category__products"},[_c('apicart-products-list',{attrs:{"productsList":_vm.products,"categoryKeyPath":_vm.selectedCategoryKeyPath}})],1)])],1),(_vm.categoryDescriptionEnabled && _vm.showCategories)?_c('div',{staticClass:"apicart-category__footer",domProps:{"innerHTML":_vm._s(_vm.$t('categories.' + _vm.selectedCategoryKeyPath + '.description'))}}):_vm._e()]):_vm._e()};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
export default __vue_component__;