<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- GRID EXAMPLE --> <div class="container"> <div class="product" data-id="id03" data-price="36.00" data-title="Self Cooling Shot Glasses" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/113190_A2_Self_Cooling_Shot_Glasses.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Self%20Cooling%20Shot%20Glasses_10451_10001_208772_-1_26715_11497_208858" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/113190_A2_Self_Cooling_Shot_Glasses.jpg);background-size: cover;"> <span>Self Cooling Shot Glasses</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id02" data-price="250.00" data-title="Stockwell Travel Speaker" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/116923_A2_Speaker_Marshall_Stockwell_Travel.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Stockwell%20Travel%20Speaker_10451_10001_223993_-1_26707_26707_224026" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/116923_A2_Speaker_Marshall_Stockwell_Travel.jpg);background-size: cover;"> <span>Stockwell Travel Speaker</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id04" data-price="350.00" data-title="Tivoli Model Three BT Radio" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/97960_B2_Radio_Tivoli_Model_One_Walnut.jpg" data-url="https://www.momastore.org/webapp/wcs/stores/servlet/ProductDisplay_Tivoli%20Model%20One%20Radio_10467_10001_160674_-1_26663_26666_144554" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/97960_B2_Radio_Tivoli_Model_One_Walnut.jpg);background-size: cover;"> <span>Tivoli Model Three BT Radio</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id05" data-price="849.60" data-title="OP-1 Portable Synthesizer" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/107081_A2_OP-1_Portable_Synthesizer.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_OP%201%20Portable%20Synthesizer_10451_10001_183571_-1_26663_26666_183605" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/107081_A2_OP-1_Portable_Synthesizer.jpg);background-size: cover;"> <span>OP-1 Portable Synthesizer</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id06" data-price="200.00" data-title="Glass Pot" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/107152_A2_Glass_Pot.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Glass%20Pot_10451_10001_191558_-1_26669_46171_185600" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/107152_A2_Glass_Pot.jpg);background-size: cover;"> <span>Glass Pot</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id07" data-price="40.00" data-title="All-In-One Kitchen Tool Set" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/104927_A2_All_in_One_Kitchen_Tool_Set.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_All%20In%20One%20Kitchen%20Tool%20Set_10451_10001_172698_-1_26708_48664_172711" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/104927_A2_All_in_One_Kitchen_Tool_Set.jpg);background-size: cover;"> <span>All-In-One Kitchen Tool Set</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id08" data-price="25.00" data-title="Pixel Worktop Saver" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110390_A2_Pixel_Worktop_Saver.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Pixel%20Worktop%20Saver_10451_10001_199069_-1_26669_26670_199110" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110390_A2_Pixel_Worktop_Saver.jpg);background-size: cover;"> <span>Pixel Worktop Saver</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id09" data-price="13.99" data-title="Andy Warhol Pocket Planner" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/99694_A2_Andy_Warhol_The_World_Fascinates_Me.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Andy%20Warhol%20Pocket%20Planner_10451_10001_154662_-1_26674_26677_154679" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/99694_A2_Andy_Warhol_The_World_Fascinates_Me.jpg);background-size: cover;"> <span>Andy Warhol Pocket Planner</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id10" data-price="3.95" data-title="2016 Modern Art Mini Wall Calendar" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/112835_A2_2016_Modern_Art_Mini_Wall_Calendar_7_x_7.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_2016%20Modern%20Art%20Mini%20Wall%20Calendar_10451_10001_207782_-1_26674_11527_207788" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/112835_A2_2016_Modern_Art_Mini_Wall_Calendar_7_x_7.jpg);background-size: cover;"> <span>2016 Modern Art Mini Wall Calendar</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id11" data-price="21.95" data-title="New York Art Print" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_New%20York%20Art%20Print_10451_10001_136554_-1_26674_26678_136576" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg);background-size: cover;"> <span>New York Art Print</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id12" data-price="145.00" data-title="Ototo Musical Invention Kit + 3 Sensors" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110025_A2_Music_Invention_Kit_Ototo_with_3_Sensors.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Ototo%20Musical%20Invention%20Kit%20+%203%20Sensors_10451_10001_195332_-1_26674_64661_195337" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110025_A2_Music_Invention_Kit_Ototo_with_3_Sensors.jpg);background-size: cover;"> <span>Ototo Musical Invention Kit + 3 Sensors</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id13" data-price="250.00" data-title="Cubetto Playset" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/113058_A2_Kit_Cubetto_Robot_plus_App.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Cubetto%20Playset_10451_10001_208117_-1_26674_64661_208166" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/113058_A2_Kit_Cubetto_Robot_plus_App.jpg);background-size: cover;"> <span>Cubetto Playset</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id14" data-price="120.00" data-title="Reveal Watch" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/46798_A2_Black_Reveal_Watch.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Reveal%20Watch_10451_10001_53194_-1_26690_11474_16375" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/46798_A2_Black_Reveal_Watch.jpg);background-size: cover;"> <span>Reveal Watch</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id15" data-price="290.00" data-title="Miniature Chair, Rietveld Red Blue" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/94313_A2_Chair_Mini_Rietveld_Red_Blue.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Miniature%20Chair%20Rietveld%20Red%20Blue_10451_10001_125565_-1_26674_26679_125575" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/94313_A2_Chair_Mini_Rietveld_Red_Blue.jpg);background-size: cover;"> <span>Miniature Chair, Rietveld Red Blue</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id16" data-price="65.00" data-title="Bi-Color Pitcher" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96683_A2_Pitcher_Luisa_IVV.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Bi-Color%20Pitcher_10451_10001_137088_-1_26669_11519_137112" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96683_A2_Pitcher_Luisa_IVV.jpg);background-size: cover;"> <span>Bi-Color Pitcher</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id17" data-price="55.00" data-title="Yanagi Flatware, Five Piece Set" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/50394_A2_Yanagi_Flatware_Five_Piece_Set.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Yanagi%20Flatware,%20Five%20Piece%20Set_10451_10001_15622_-1_26669_26672_15623" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/50394_A2_Yanagi_Flatware_Five_Piece_Set.jpg);background-size: cover;"> <span>Yanagi Flatware, Five Piece Set</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id18" data-price="28.00" data-title="Girachille Spinning Votive" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/112540_A2_DM_Tealight_Girachille_Spinner.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Girachille_10451_10001_206094_-1_26669_11550_206132" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/112540_A2_DM_Tealight_Girachille_Spinner.jpg);background-size: cover;"> <span>Girachille Spinning Votive</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <div class="container"> <div class="product" data-id="id19" data-price="159.00" data-title="Lampadina Table Lamp" data-img="https://www.momastore.org/wcsstore/MOMASTORE1/images/products/98696_A2_Lamp_Lampadina.jpg" data-url="https://www.momastore.org/museum/moma/ProductDisplay_Lampadina%20Table%20Lamp_10451_10001_144905_-1_11476_11600_144920" style="background: url(https://www.momastore.org/wcsstore/MOMASTORE1/images/products/98696_A2_Lamp_Lampadina.jpg);background-size: cover;"> <span>Lampadina Table Lamp</span> </div> <span class="add-to-cart">Add to cart</span> <span class="add-to-wish">Add to wish</span> </div> <script> (function(modules) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) return installedModules[moduleId].exports; // Create a new module (and put it into the cache) var module = installedModules[moduleId] = { exports: {}, id: moduleId, loaded: false }; // Execute the module function modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // Flag the module as loaded module.loaded = true; // Return the exports of the module return module.exports; } // expose the modules object (__webpack_modules__) __webpack_require__.m = modules; // expose the module cache __webpack_require__.c = installedModules; // __webpack_public_path__ __webpack_require__.p = ""; // Load entry module and return exports return __webpack_require__(0); }) /************************************************************************/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var $ = __webpack_require__(1), _ = __webpack_require__(2), Backbone = __webpack_require__(3); /** * Require base */ var Options = __webpack_require__(4), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Cart = __webpack_require__(7); /** * Require component */ var Controller = __webpack_require__(8), TemplateOptions = __webpack_require__(10); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ МОДУЛЬ КОРЗИНЫ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ /** * @private static vars */ var c = null, e = null; var CartModule = function (params) { // экземпляр singleton if (c || e) return; // СОЗДАЕТ ОБЪЕКТ С НАСТРОЙКАМИ КОРЗИНЫ // --------------------------------------------------------------------------------- // контейнер для настроек корзины TemplateOptions.vars = {}; // расширяет контейнер объектами "Options.defaults", "TemplateOptions.defaults" и "params" $.extend( true, TemplateOptions.vars, Options.defaults, TemplateOptions.defaults, params && typeof params === 'object' || typeof params === 'function' ? params : {} ); // СОЗДАЕТ КОНТРОЛЛЕР (ТОЧКА ВХОДА) // --------------------------------------------------------------------------------- c = new Controller(); // ПРИВАТНЫЕ МЕТОДЫ // --------------------------------------------------------------------------------- /** * @private * Освобождает ресурсы модуля */ var onDisposed = function () { e.stopListening(); TemplateOptions.vars = null; c = null; e = null; } // СЛУШАТЕЛИ // --------------------------------------------------------------------------------- e = _.extend({}, Backbone.Events); e.listenTo(Lifecycle, LifecycleEvent.DISPOSED, _.bind(onDisposed, this)); }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ API МОДУЛЯ │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ CartModule.prototype = { /** * Добавляет продукт в список корзины */ addToCart: function (item) { Cart.addTo('cartlist', item); }, /** * Добавляет продукт в список отложенных товаров */ addToWish: function (item) { TemplateOptions.vars.iswish && Cart.addTo('wishlist', item); }, /** * Показывает панель */ show: function (section) { var s = section ? section : 'cart'; Lifecycle.next(LifecycleEvent.SHOW, s); }, /** * Скрывает панель */ hide: function () { Lifecycle.next(LifecycleEvent.HIDE); }, /** * Скрывает компоненты корзины и освобождает ресурсы модуля */ destroy: function () { Lifecycle.next(LifecycleEvent.DISPOSE); } }; window.CartModule = CartModule; /***/ }, /* 1 */ /***/ function(module, exports) { module.exports = jQuery; /***/ }, /* 2 */ /***/ function(module, exports) { module.exports = _; /***/ }, /* 3 */ /***/ function(module, exports) { module.exports = Backbone; /***/ }, /* 4 */ /***/ function(module, exports) { //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ КОНФИГУРАЦИЯ КОРЗИНЫ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ module.exports = { defaults: { /** * Формат валюты [usd] */ currency: 'usd', /** * Поддержка нескольких едениц одного товара */ ismultiple: false, /** * Поддержка списка отложенных товаров */ iswish: false, /** * Подгружаемые шрифты */ googlefonts: ['Montserrat:400,700', 'Montserrat Alternates:400,700'], /** * Ссылка на чекаут для отправки содержимого корзины */ checkout: 'https://xyz.cart.com/xx-user-id/checkout?pay=true&sem=0089323114', /** * Внешние обработчики */ onready: null, onshow: null, onhide: null, onenter: null, onexit: null, ondispose: null, ondisposed: null } }; /***/ }, /* 5 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var _ = __webpack_require__(2), Backbone = __webpack_require__(3); /** * Require base */ //var LifecycleEvent = require('./LifecycleEvent'); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ЖИЗНЕННЫЙ ЦИКЛ КОРЗИНЫ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Lifecycle = function () { this._state = ''; }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ API LIFECYCLE │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Lifecycle.prototype, Backbone.Events, { /** * Меняет состояние */ next: function (state) { var a = Array.prototype.slice.call(arguments); if (_.isString(state)) { this._state = state; this.trigger.apply(this, a); } }, /** * Возвращает текущее состояние */ current: function () { return this._state; } }); module.exports = new Lifecycle(); /***/ }, /* 6 */ /***/ function(module, exports) { //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ LIFECYCLE EVENTS ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ module.exports = { ACTIVATE: "lifecycle.event:Activate", DEACTIVATE: "lifecycle.event:Deactivate", EMPTY: "lifecycle.event:Empty", READY: "lifecycle.event:Ready", SHOW: "lifecycle.event:Show", HIDE: "lifecycle.event:Hide", ENTER: "lifecycle.event:Enter", EXIT: "lifecycle.event:Exit", DISPOSE: "lifecycle.event:Dispose", DISPOSED: "lifecycle.event:Disposed" }; /***/ }, /* 7 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var _ = __webpack_require__(2); /** * Require base */ var Options = __webpack_require__(4); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ПРОДУКТ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Item = Backbone.Model.extend( { defaults: function () { return { id: '', // идентификатор продукта price: 0, // цена продукта (float) quantity: 1, // кол-во едениц по умолчанию title: '', // название продукта img: '', // картинка продукта (абсолютная ссылка) url: '' // карточка продукта (абсолютная ссылка) } } }); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ СПИСОК ПРОДУКТОВ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var List = Backbone.Collection.extend( { model: Item, multiple: false, label: '', initialize: function (params) { this.multiple = params.multiple; this.label = params.id; this.localStorage = new Backbone.LocalStorage('cart.storage:' + this.label); }, /** * Обновляет и возвращает объект stats: * @totalItems кол-во продуктов * @totalQuantity итоговое кол-во едениц * @totalCost итоговая цена */ getStats: function () { var stats = {}; stats.totalItems = this.models.length; stats.totalQuantity = 0; stats.totalCost = 0; this.models.length > 0 && this.each(function(m) { stats.totalQuantity += m.get('quantity'); stats.totalCost += m.get('price') * m.get('quantity'); }, this); return stats; } }); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ КОРЗИНА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Cart = function() { this.list = {}; // хеш списков this.item = Item; }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ API КОРЗИНЫ │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Cart.prototype, Backbone.Events, { /** * Освобождает ресурсы хелпера */ dispose: function () { this.list = null; }, /** * Кол-во списков */ length: function () { return _.values(this.list).length; }, /** * Создает список * @key:string идентификатор списка */ createList: function (key, multiple) { if (!this.list[key]) { this.list[key] = new List({ id: key, multiple: multiple }); } return this.list[key]; }, /** * 1. Возвращает конкретный список - getList(list id) * @key:string идентификатор списка * * 2. Возвращает массив всех списков - getList() */ getList: function (key) { return key ? this.list[key] : _.values(this.list); }, /** * Удаляет все элементы из списка * @key:string идентификатор списка */ clearList: function (key) { if (!this.list[key]) { return; } _.chain(this.list[key].models).clone().each(function(model) { model.destroy(); }); }, /** * Удаляет список * @key:string идентификатор списка */ removeList: function (key) { if (!this.list[key]) { return; } this.list[key] = null; }, /** * Добавляет продукт в список * @to:string идентификатор списка * @model:object модель */ addTo: function (to, model) { if (!this.list[to]) { return } var l = this.list[to], m = l.get(model.id); if (!m) { l.create(model); } else { if (l.multiple) { m.set({ quantity: m.attributes.quantity + 1 }); m.save(); } } }, /** * Перемещаяет продукт из списка from в список to * @from:string идентификатор списка * @to:string идентификатор списка * @id:string идентификатор модели */ moveTo: function (from, to, id) { if (!this.list[from] || !this.list[to] || !id) { return; } var m = this.list[from].get(id); if (m) { this.addTo(to, m.clone()); this.removeFrom(from, m.id); } }, /** * Удаляет продукт из списка from * @from:string идентификатор списка * @id:string идентификатор модели */ removeFrom: function (from, id) { if (!this.list[from] || !id) { return; } var m = this.list[from].get(id); m && m.destroy(); }, /** * Возвращает true если все списки пустые */ isEmpty: function () { for(var p in this.list) { if (!this.list[p].isEmpty()) { return false; } } return true; } }); module.exports = new Cart(); /***/ }, /* 8 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var $ = __webpack_require__(1), _ = __webpack_require__(2), Backbone = __webpack_require__(3), webfont = __webpack_require__(9); /** * Require base */ var Cart = __webpack_require__(7), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6); /** * Require component */ var Options = __webpack_require__(10), Hooks = __webpack_require__(30), Animator = __webpack_require__(11), PanelView = __webpack_require__(13), TintView = __webpack_require__(21), ButtonView = __webpack_require__(22); /** * Require template */ var WrapperHTML = __webpack_require__(24); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ КОНТРОЛЛЕР ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Controller = function () { this.isactive = false; this.iswish = Options.vars.iswish; this.isempty = false; // СОЗДАЕТ СПИСКИ // --------------------------------------------------------------------------------- this.cartlist = Cart.createList('cartlist', Options.vars.ismultiple); this.wishlist = this.iswish ? Cart.createList('wishlist', false) : null; this.cartlistReceived = false; this.wishlistReceived = false; // ПОДКЛЮЧАЕТ СТИЛИ // --------------------------------------------------------------------------------- __webpack_require__(25); $('head > style').last().attr('id', 'cart-style'); // ПОДКЛЮЧАЕТ ШРИФТЫ // --------------------------------------------------------------------------------- webfont.load({ google: { families: Options.vars.googlefonts }, classes: false, events: false }); $('head > link').last().attr('id', 'cart-webfont'); // ПОДКЛЮЧАЕТ ОСНОВНОЙ КОНТЕЙНЕР // --------------------------------------------------------------------------------- $(WrapperHTML()).prependTo('body'); // СОЗДАЕТ КОМПОНЕНТЫ // --------------------------------------------------------------------------------- this.button = new ButtonView({ el: '.cart-button' }); this.panel = new PanelView({ el: '.cart-panel' }); this.tint = new TintView({ el: '.cart-tint' }); this.animator = new Animator(this); this.hooks = new Hooks(); // СЛУШАЕТ СОБЫТИЯ LIFECYCLE // --------------------------------------------------------------------------------- this.listenTo(Lifecycle, LifecycleEvent.ACTIVATE, this.onActivate); this.listenTo(Lifecycle, LifecycleEvent.DEACTIVATE, this.onDeactivate); this.listenTo(Lifecycle, LifecycleEvent.READY, this.onReady); this.listenTo(Lifecycle, LifecycleEvent.EMPTY, this.onEmpty); this.listenTo(Lifecycle, LifecycleEvent.SHOW, this.onShow); this.listenTo(Lifecycle, LifecycleEvent.HIDE, this.onHide); this.listenTo(Lifecycle, LifecycleEvent.ENTER, this.onEnter); this.listenTo(Lifecycle, LifecycleEvent.EXIT, this.onExit); this.listenTo(Lifecycle, LifecycleEvent.DISPOSE, this.onDispose); this.listenTo(Lifecycle, LifecycleEvent.DISPOSED, this.onDisposed); // СЛУШАЕТ RESET В СПИСКАХ // --------------------------------------------------------------------------------- this.listenToOnce(this.cartlist, 'reset', this.onStartup); this.iswish && this.listenToOnce(this.wishlist, 'reset', this.onStartup); // ЗАПОЛНЯЕТ СПИСКИ ДАННЫМИ // --------------------------------------------------------------------------------- this.cartlist.fetch({ reset: true }); this.iswish && this.wishlist.fetch({ reset: true }); }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ ОБРАБОТЧИКИ СОБЫТИЙ LYFECYCLE │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Controller.prototype, { /** * Запускает lifecycle * инициирует: this.cartlist:reset, this.wishlist:reset */ onStartup: function (e) { if (e.label == 'cartlist') { this.cartlistReceived = true; } if (e.label == 'wishlist') { this.wishlistReceived = true; } if (this.cartlistReceived && (this.wishlistReceived || !this.wishlist)) { if (this.cartlist.models.length > 0 || (this.wishlist && this.wishlist.models.length > 0)) { Lifecycle.next(LifecycleEvent.ACTIVATE); } else { Lifecycle.next(LifecycleEvent.DEACTIVATE, LifecycleEvent.EMPTY); } } }, /** * Активирует корзину * инициирует: this.onStartup, this.cartlist:add, this.cartlist:add */ onActivate: function () { if (this.active) return; if (this.isempty) { this.isempty = false; this.stopListening(this.cartlist, 'add'); this.iswish && this.stopListening(this.wishlist, 'add'); } this.isactive = true; // активирует рендер кнопки this.button.activateRendering(); // деактивирует панель this.panel.deactivateInteraction(); this.panel.deactivateRendering(); // деактивирует тинт this.tint.deactivateInteraction(); // запускает анимацию активации this.animator.activate(); }, /** * Оповещает о готовности корзины после активации * инициирует: this.animator */ onReady: function () { // активирует кнопку this.button.activateInteraction(); }, /** * Деактивирует корзину * инициирует: this.onStartup, this.onHide */ onDeactivate: function (reason) { this.isactive = false; // деактивирует кнопку this.button.deactivateInteraction(); this.button.deactivateRendering(); // деактивирует панель this.panel.deactivateInteraction(); this.panel.deactivateRendering(); // деактивирует тинт this.tint.deactivateInteraction(); // запускает анимацию деактивации this.animator.deactivate(reason); }, /** * Оповещает о деактивации пустой корзины * инициирует: this.animator */ onEmpty: function () { this.isempty = true; this.listenTo(this.cartlist, 'add', this.onActivate); this.iswish && this.listenTo(this.wishlist, 'add', this.onActivate); }, /** * Показывает панель * инициирует: this.button, api */ onShow: function (section) { var section = section ? section : 'cart'; // деактивирует полностью кнопку this.button.deactivateInteraction(); this.button.deactivateRendering(); // активирует рендер панели this.panel.activateRendering(section); // показывает панель this.animator.show(); document.body.addEventListener('touchmove', this._ontouchmove); $('body').addClass('block'); }, _ontouchmove: function (e) { if(!$(e.target).hasClass("scrollable")) { e.preventDefault(); } }, /** * Оповещает о том, что плавающая кнопка скрылась и панель появилась * инициирует: this.animator */ onEnter: function () { // активирует панель и тинт this.panel.activateInteraction(); this.tint.activateInteraction(); }, /** * Скрывает панель * инициирует: this.button, api */ onHide: function () { // активирует рендер кнопки this.button.activateRendering(); // деактивирует панель и тинт this.panel.deactivateInteraction(); this.panel.deactivateRendering(); this.tint.deactivateInteraction(); if (this.cartlist.models.length > 0 || (this.wishlist && this.wishlist.models.length > 0)) { // запускает анимацию this.animator.hide(); } else { Lifecycle.next(LifecycleEvent.DEACTIVATE, LifecycleEvent.EMPTY); } document.body.removeEventListener('touchmove', this._ontouchmove); $('body').removeClass('block'); }, /** * Оповещает о том, что панель скрылась и плавающая кнопка появилась * инициирует: this.animator */ onExit: function () { // активирует кнопку this.button.activateInteraction(); }, /** * Скрывает все перед разрушением * инициирует: api */ onDispose: function () { // дективирует все this.button.deactivateInteraction(); this.button.deactivateRendering(); this.panel.deactivateInteraction(); this.panel.deactivateRendering(); this.tint.deactivateInteraction(); // дективирует панель this.animator.dispose(); }, /** * Освобождает ресурсы и зачищает DOM * инициирует: this.animator */ onDisposed: function () { // перестает слушать события this.stopListening(); // разрушает hooks this.hooks.destroy(); // обнуляет ссылки на компоненты this.hooks = null; this.animator = null; this.panel = null; this.tint = null; this.button = null; this.cartlist = null; this.wishlist = null; // удаляет из head шрифты и стили $('#cart-style').remove(); $('#cart-webfont').remove(); // удаляет списки Cart.removeList('cartlist'); Cart.removeList('wishlist'); // удаляет контейнер $('.cart-wrapper').remove(); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ РАСШИРЯЕТ BACKBONE EVENTS │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Controller.prototype, Backbone.Events); module.exports = Controller; /***/ }, /* 9 */ /***/ function(module, exports) { module.exports = WebFont; /***/ }, /* 10 */ /***/ function(module, exports) { //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ КОНФИГУРАЦИЯ ШАБЛОНА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ module.exports = { defaults: { /** * Анимация корзины */ animation: { /** * Настройка плавующей кнопки */ button: { TransitionIN: { y: 0, opacity: 1, display: 'block', delay: 0.2, ease: Back.easeOut.config(1) }, DurationIN: 0.3, TransitionOUT: { y: -200, opacity: 0, display: 'none', ease: Back.easeIn.config(3) }, DurationOUT: 0.3 }, /** * Настройка панели */ panel: { TransitionIN: { xPercent: 0, display:'block', ease: Power1.easeOut, delay: 0.3 }, DurationIN: 0.3, TransitionOUT: { xPercent: 100, display:'none' }, DurationOUT: 0.3 }, /** * Настройка тинт */ tint: { TransitionIN: { opacity: 1, display: 'block', ease: Power1.easeOut, delay: 0.3 }, DurationIN: 0.3, TransitionOUT: { opacity: 0, display: 'none' }, DurationOUT: 0.3 } } } }; /***/ }, /* 11 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var $ = __webpack_require__(1), _ = __webpack_require__(2); TweenMax = __webpack_require__(12); /** * Require base */ var Options = __webpack_require__(10), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Cart = __webpack_require__(7); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ АНИМАТОР ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Animator = function (controller) { this.$tint = controller.tint.$el; this.$button = controller.button.$el; this.$panel = controller.panel.$el; this.animation = Options.vars.animation; }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ API АНИМАТОРА │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Animator.prototype, Backbone.Events, { activate: function () { TweenMax.set(this.$button, this.animation.button.TransitionOUT); TweenMax.to(this.$button, this.animation.button.DurationIN, _.extend({}, this.animation.button.TransitionIN, { onComplete: _.bind(this._ready, this), delay: 0 })); }, _ready: function () { Lifecycle.next(LifecycleEvent.READY); }, deactivate: function (reason) { Lifecycle.next(reason); TweenMax.to(this.$button, this.animation.button.DurationOUT, this.animation.button.TransitionOUT); TweenMax.to(this.$tint, this.animation.tint.DurationOUT, this.animation.tint.TransitionOUT); TweenMax.to(this.$panel, this.animation.panel.DurationOUT, this.animation.panel.TransitionOUT); }, show: function () { TweenMax.set(this.$tint, this.animation.tint.TransitionOUT); TweenMax.set(this.$panel, this.animation.panel.TransitionOUT); TweenMax.to(this.$button, this.animation.button.DurationOUT, this.animation.button.TransitionOUT); TweenMax.to(this.$tint, this.animation.tint.DurationIN, this.animation.tint.TransitionIN); TweenMax.to(this.$panel, this.animation.panel.DurationIN, _.extend({}, this.animation.panel.TransitionIN, { onComplete: _.bind(this._enter, this) })); }, _enter: function () { Lifecycle.next(LifecycleEvent.ENTER); }, hide: function () { TweenMax.to(this.$panel, this.animation.panel.DurationOUT, this.animation.panel.TransitionOUT); TweenMax.to(this.$tint, this.animation.tint.DurationOUT, this.animation.tint.TransitionOUT); TweenMax.to(this.$button, this.animation.button.DurationIN, _.extend(this.animation.button.TransitionIN, { onComplete: _.bind(this._exit, this) })); }, _exit: function () { Lifecycle.next(LifecycleEvent.EXIT); }, dispose: function () { // animation out // .. this._disposed(); }, _disposed: function () { Lifecycle.next(LifecycleEvent.DISPOSED); } }); module.exports = Animator; /***/ }, /* 12 */ /***/ function(module, exports) { module.exports = TweenMax; /***/ }, /* 13 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var _ = __webpack_require__(2), Backbone = __webpack_require__(3); /** * Require base */ var Cart = __webpack_require__(7), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Utils = __webpack_require__(14); /** * Require component */ var Options = __webpack_require__(10), SectionView = __webpack_require__(15); /** * Require HTML template */ var HeaderHTML = __webpack_require__(18); var ContentHTML = __webpack_require__(19); var FooterHTML = __webpack_require__(20); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ПАНЕЛЬ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var PanelView = Backbone.View.extend( { /** Interaction events */ events: { 'click .cp-back' : 'hidePanel', 'click .cart-tab' : 'selectCartSection', 'click .wish-tab' : 'selectWishSection' }, initialize: function () { this.iswish = Options.vars.iswish; this.currency = Options.vars.currency; this.cartList = Cart.getList('cartlist'); this.wishList = Cart.getList('wishlist'); this.section = 'cart'; this.$el.append(HeaderHTML({ iswish: this.iswish })); this.$el.append(ContentHTML({ iswish: this.iswish })); this.$el.append(FooterHTML()); this.$headerTotalCostLabel = $('.cart-tab .cp-tab-label'); this.$headerTotalWishLabel = this.iswish ? $('.wish-tab .cp-tab-label') : null; this.$checkoutButton = $('.cp-checkout-btn'); this.cartSection = new SectionView({ el: '.cp-section-cart', list: this.cartList, panel: this }); this.wishSection = this.iswish ? new SectionView({ el: '.cp-section-wish', list: this.wishList, panel: this }) : null; }, /** * Меняет секцию */ change: function (section) { this.section = section; var cartListStats = this.cartList.getStats(); this.$checkoutButton.toggleClass('hidden', cartListStats.totalItems == 0 || this.section != 'cart' ? true : false); // переключает секции this.$el.toggleClass('cp-section_cart', this.section == 'cart'); this.iswish && this.$el.toggleClass('cp-section_wish', this.section == 'wish'); // переключает табы $('.cart-tab').toggleClass('gs-tab-selected', this.section == 'cart'); this.iswish && $('.wish-tab').toggleClass('gs-tab-selected', this.section == 'wish'); this.section == 'cart' ? this.cartSection.activate() : this.cartSection.deactivate(); this.iswish ? this.section == 'wish' ? this.wishSection.activate() : this.wishSection.deactivate() : null; } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ INTERACTION │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(PanelView.prototype, { /** * Скрывает панель */ hidePanel: function () { Lifecycle.next(LifecycleEvent.HIDE); }, /** * Выбирает таб корзины */ selectCartSection: function () { this.section != 'cart' && this.change('cart'); }, /** * Выбирает таб отложенных товаров */ selectWishSection: function () { this.section != 'wish' && this.change('wish'); }, /** * Активирует взаимодействие */ activateInteraction: function () { this.delegateEvents(this.events); }, /** * Деактивирует взаимодействие */ deactivateInteraction: function () { this.undelegateEvents(); }, }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ RENDERING │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(PanelView.prototype, { /** * Активирует рендер */ activateRendering: function (section) { this.cartSection.clear(); this.iswish && this.wishSection.clear(); setTimeout(_.bind(function () { this.change(section); }, this), 350); this.listenTo(this.cartList, 'destroy change add reset', this.render); this.iswish && this.listenTo(this.wishList, 'destroy change add reset', this.render); this.render(); }, /** * Деактивирует рендер */ deactivateRendering: function () { this.stopListening(this.cartList); this.iswish && this.stopListening(this.wishList); this.section == 'cart' && this.cartSection.deactivate(); this.iswish && this.section == 'wish' && this.wishSection.deactivate(); }, /** * Рендер представления */ render: function () { var cartListStats = this.cartList.getStats(), wishListStats = this.iswish ? this.wishList.getStats() : null; // обновляет данные табов this.$headerTotalCostLabel.html(Utils.format(cartListStats.totalCost, this.currency)); this.$headerTotalWishLabel && this.$headerTotalWishLabel.html(wishListStats ? wishListStats.totalItems : 0); // отображает или скрывает кнопку чекаута this.$checkoutButton.toggleClass('hidden', cartListStats.totalItems == 0 || this.section != 'cart' ? true : false); } }); module.exports = PanelView; /***/ }, /* 14 */ /***/ function(module, exports) { /** * Currency */ var currencyFormat = { 'usd': { before: '$', after: '', divider: ',', n: 2, x: 3 }, 'rub': { before: '', after: ' руб.', divider: ' ', n: 0, x: 3 } }; //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ UTILS ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ module.exports = { /** * Форматирует значение цены и возвращает ее строковое представление * @params { * number:number значение цены * currency:string символ валюты * before:string * currency:string символ валюты * divider:string разделитель нулей * n:number кол-во символов в остатке (копейки, центы и т.д.) * x:number делитель тысячных * } * * @return string ($5,000.00) * * пример: format(10000, '$', 'before', ',', 2, 3) // return $10,000.00 * пример: format(10000, ' РУБ.', 'after', ' ', 0, 3) // return 10 000 РУБ. * ¥1,430,000 */ format: function(price, currency) { // params var p = currencyFormat[currency]; var number = parseFloat(price); var r = '\\d(?=(\\d{' + (p.x || 3) + '})+' + (p.n > 0 ? '\\.' : p.currency) + ')'; return p.before + '' + number.toFixed(Math.max(0, ~~p.n)).replace(new RegExp(r, 'g'), '$&' + p.divider) + '' + p.after; } //number, placed, currency, devider, n, x }; /***/ }, /* 15 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var _ = __webpack_require__(2), Backbone = __webpack_require__(3), IScroll = __webpack_require__(16); /** * Require base */ var Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6); /** * Require component */ var Options = __webpack_require__(10), CartSectionItem = __webpack_require__(31), WishSectionItem = __webpack_require__(32); /** * Require HTML template */ var EmptyHTML = __webpack_require__(35); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ СЕКЦИЯ ПАНЕЛИ ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var SectionView = Backbone.View.extend( { initialize: function (options) { this.isempty = false; this.list = options.list; this.panel = options.panel; this.iswish = Options.vars.iswish; //this.listenTo(this.list, 'add', this.insertItem); //this.listenTo(this.list, 'reset', this.insertItems); this.$list = this.$el.find('.cp-section-list'); //console.log(); this.scroller = new IScroll('.' + this.el.className + ' .cp-section-wrapper', { mouseWheel: true, scrollbars: true, fadeScrollbars: true, interactiveScrollbars: true, resizeScrollbars: true, shrinkScrollbars: true, bounce: true, directionLockThreshold: 5, bounceTime: 600, snapThreshold: 0.334, click: true, deceleration: 0.0006, probeType: 3, scrollbars: 'custom' }); this.scroller.on('flick', _.bind(function(e){ if (Math.abs(this.scroller.distX) > 60) { if (this.scroller.distX > 0) { // right direction this.el.className == 'cp-section-cart' && this.panel.hidePanel(); this.iswish && this.el.className == 'cp-section-wish' && this.panel.selectCartSection(); } else { // left direction this.iswish && this.el.className == 'cp-section-cart' && this.panel.selectWishSection(); } } }, this)); this.deactivate(); }, activate: function () { this.insertItems(); setTimeout(_.bind(function () { var someClassName = '.' + this.el.className + ' .cp-item-wrapper'; TweenMax.staggerTo(someClassName, 0.3, { className: '+=active', ease: Power4.easeIn }, 0.025); this.delegateEvents(this.events); this.scroller.scrollTo(0, 0); this.scroller.enable(); this.refresh(); }, this), 50); this.setEmpty(); this.listenTo(Lifecycle, LifecycleEvent.ENTER, _.bind(this.refresh, this)); this.listenTo(this.list, 'destroy', _.bind(this.itemDestroy, this)); }, itemDestroy: function () { this.refresh(); this.setEmpty(); }, deactivate: function () { this.undelegateEvents(); this.scroller.disable(); this.stopListening(); }, insertItem: function (item) { var o = { model: item }, view = this.el.className == 'cp-section-cart' ? new CartSectionItem(o) : new WishSectionItem(o); this.$list.append(view.render().el); }, insertItems: function () { this.clear(); this.list.each(this.insertItem, this); }, clear: function () { this.$list.html(''); }, refresh: function () { this.scroller.refresh(); }, setEmpty: function () { $('.' + this.el.className + ' .cp-empty-section').remove(); if (this.list.getStats().totalItems < 1) { $('.' + this.el.className + ' .cp-section-wrapper').append(EmptyHTML({ message: "Your " + (this.el.className == 'cp-section-cart' ? "shopping cart" : "wish list") + " is empty." })); } setTimeout(_.bind(function () { $('.' + this.el.className + ' .cp-empty-section').addClass('active'); }, this), 250); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ RENDERING │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(SectionView.prototype, { /** * Рендер представления */ render: function () { // } }); module.exports = SectionView; /***/ }, /* 16 */ /***/ function(module, exports) { module.exports = IScroll; /***/ }, /* 17 */, /* 18 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<header class="cp-header gs-tabs">\n <ul>\n <li class="cp-back">\n <span class="cp-tab-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><polyline points="14.7,25.7 5,16 14.7,6.3"/><line x1="5.3" y1="16" x2="27" y2="16"/></g></svg>\n </span>\n </li>\n <li class="cp-tabs">\n <ul>\n <li class="cart-tab">\n <div class="cp-tab-wrapper">\n <span class="cp-tab-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"/><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"/></g></svg>\n </span>\n <span class="cp-tab-label">$0.00</span>\n </div>\n </li>\n '; if (iswish) { ; __p += '\n <li class="wish-tab">\n <div class="cp-tab-wrapper">\n <span class="cp-tab-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29 S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"/></svg>\n </span>\n <span class="cp-tab-label">0</span>\n </div>\n </li>\n '; } ; __p += '\n </ul>\n '; if (iswish) { ; __p += '\n <span class="cp-tab-cursor p-color"></span>\n '; } ; __p += '\n </li>\n </ul>\n</header>'; } return __p }; /***/ }, /* 19 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<div class="cp-container gs-container">\n <ul'; if (iswish) { print(' class="cp-sections"') } ; __p += '>\n <li class="cp-section-cart">\n <div class="cp-section-wrapper">\n <div class="cp-section-content">\n <span class="cp-section-top"></span>\n <ul class="cp-section-list"></ul>\n <span class="cp-section-bottom"></span>\n </div>\n </div>\n </li>\n '; if (iswish) { ; __p += '\n <li class="cp-section-wish">\n <div class="cp-section-wrapper">\n <div class="cp-section-content">\n <span class="cp-section-top"></span>\n <ul class="cp-section-list"></ul>\n <span class="cp-section-bottom"></span>\n </div>\n </div>\n </li>\n '; } ; __p += '\n </ul>\n</div>'; } return __p }; /***/ }, /* 20 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = ''; with (obj) { __p += '<!-- <footer class="cp-footer"> -->\n <div class="cp-checkout-btn gs-btn">\n <span class="cp-checkout-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"/><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"/></g></svg>\n </span>\n <span class="cp-checkout-label">Checkout</span>\n </div>\n<!-- </footer> -->'; } return __p }; /***/ }, /* 21 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var Backbone = __webpack_require__(3); /** * Require base */ var Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ТИНТ КОНТЕЙНЕРА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var TintView = Backbone.View.extend( { events: { 'click' : 'hidePanel' }, initialize: function (params) { //.. } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ INTERACTION │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(TintView.prototype, { /** * Скрывает панель */ hidePanel: function () { Lifecycle.next(LifecycleEvent.HIDE); }, /** * Активирует взаимодействие */ activateInteraction: function () { this.delegateEvents(this.events); }, /** * Деактивирует взаимодействие */ deactivateInteraction: function () { this.undelegateEvents(); }, }); module.exports = TintView; /***/ }, /* 22 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var _ = __webpack_require__(2), Backbone = __webpack_require__(3); /** * Require base */ var Options = __webpack_require__(10), Cart = __webpack_require__(7), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Utils = __webpack_require__(14); /** * Require HTML template */ var ButtonHTML = __webpack_require__(23); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ПЛАВАЮЩАЯ КНОПКА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ /** * Состояния кнопки */ var ButtonView = Backbone.View.extend( { /** Interaction events */ events: { "click .cb-cart-cell": 'showCartlist', "click .cb-wish-cell": 'showWishlist', }, initialize: function () { this.iswish = Options.vars.iswish; this.currency = Options.vars.currency; this.cartList = Cart.getList('cartlist'); this.wishList = this.iswish ? Cart.getList('wishlist') : null; } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ INTERACTION │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(ButtonView.prototype, { /** * Открывает панель (корзина) */ showCartlist: function () { Lifecycle.next(LifecycleEvent.SHOW, 'cart'); }, /** * Открывает панель (отложенные товары) */ showWishlist: function () { Lifecycle.next(LifecycleEvent.SHOW, 'wish'); }, /** * Активирует взаимодействие */ activateInteraction: function () { this.delegateEvents(this.events); }, /** * Деактивирует взаимодействие */ deactivateInteraction: function () { this.undelegateEvents(); }, }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ RENDERING │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(ButtonView.prototype, { /** * Активирует рендер */ activateRendering: function () { this.listenTo(this.cartList, 'reset add destroy change', this.render); this.iswish && this.listenTo(this.wishList, 'reset add destroy change', this.render); this.render(); }, /** * Деактивирует рендер */ deactivateRendering: function () { this.stopListening(this.cartList); this.iswish && this.stopListening(this.wishList); }, /** * Рендер представления */ render: function () { var cartListStats = _.clone(this.cartList.getStats()), wishListStats = this.iswish ? _.clone(this.wishList.getStats()) : null; this.$el.html(ButtonHTML({ iswish: this.iswish, cost: Utils.format(cartListStats.totalCost, this.currency), totalCart: cartListStats.totalItems, totalWish: this.iswish ? wishListStats.totalItems : 0 })); } }); module.exports = ButtonView; /***/ }, /* 23 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { if (totalCart > 0 || totalWish > 0) { ; __p += '\n<div class="cb-wrapper gs-btn'; print( totalWish > 0 && totalCart > 0 ? ' cb-state_both' : (totalCart > 0 ? ' cb-state_cart' : ' cb-state_wish') ) ; __p += '">\n <ul>\n <li class="cb-cart-cell">\n <span class="cb-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"/><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"/></g></svg>\n </span>\n <span class="cb-label">'; print(cost) ; __p += '</span>\n </li>\n '; if (iswish && totalWish > 0) { ; __p += '\n <li class="cb-wish-cell">\n <span class="cb-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"/></svg>\n </span>\n </li>\n '; } ; __p += '\n </ul>\n '; if (totalCart > 0) { ; __p += '\n <span class="cb-counter">\n <span class="cb-counter-label">'; print(totalCart) ; __p += '</span>\n </span>\n '; } ; __p += '\n</div>\n'; } ; __p += '\n\n\n\n'; } return __p }; /***/ }, /* 24 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = ''; with (obj) { __p += '<!-- Cart Wrapper -->\n<div class="cart-wrapper">\n <div class="cart-panel gs-panel"></div>\n <div class="cart-tint gs-tint"></div>\n <div class="cart-button"></div>\n</div>'; } return __p }; /***/ }, /* 25 */ /***/ function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a <style> tag // load the styles var content = __webpack_require__(26); if(typeof content === 'string') content = [[module.id, content, '']]; // add the styles to the DOM var update = __webpack_require__(28)(content, {}); if(content.locals) module.exports = content.locals; // Hot Module Replacement if(false) { // When the styles change, update the <style> tags if(!content.locals) { module.hot.accept("!!./../../../../node_modules/css-loader/index.js!./style.css", function() { var newContent = require("!!./../../../../node_modules/css-loader/index.js!./style.css"); if(typeof newContent === 'string') newContent = [[module.id, newContent, '']]; update(newContent); }); } // When the module is disposed, remove the <style> tags module.hot.dispose(function() { update(); }); } /***/ }, /* 26 */ /***/ function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(27)(); // imports // module exports.push([module.id, "html {\n font-size: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody,\ndiv,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\nth,\ntd,\narticle,\naside,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n margin: 0;\n padding: 0;\n border: 0;\n}\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n /* 1 */\n vertical-align: baseline;\n /* 2 */\n}\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n[hidden],\ntemplate {\n display: none;\n}\na {\n background-color: transparent;\n}\na:active,\na:hover {\n outline: 0;\n}\nabbr[title] {\n border-bottom: 1px dotted;\n}\nb,\nstrong {\n font-weight: bold;\n}\ndfn {\n font-style: italic;\n}\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\nmark {\n background: #ff0;\n color: #000;\n}\nsmall {\n font-size: 80%;\n}\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsup {\n top: -0.5em;\n}\nsub {\n bottom: -0.25em;\n}\nimg {\n border: 0;\n}\nsvg:not(:root) {\n overflow: hidden;\n}\nfigure {\n margin: 1em 40px;\n}\nhr {\n box-sizing: content-box;\n height: 0;\n}\npre {\n overflow: auto;\n}\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n /* 1 */\n font: inherit;\n /* 2 */\n margin: 0;\n /* 3 */\n}\nbutton {\n overflow: visible;\n}\nbutton,\nselect {\n text-transform: none;\n}\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n cursor: pointer;\n /* 3 */\n}\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\ninput {\n line-height: normal;\n}\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\ninput[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n box-sizing: content-box;\n /* 2 */\n}\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\nfieldset {\n border: 1px solid #c0c0c0;\n margin: 0 2px;\n padding: 0.35em 0.625em 0.75em;\n}\nlegend {\n border: 0;\n /* 1 */\n padding: 0;\n /* 2 */\n}\ntextarea {\n overflow: auto;\n}\noptgroup {\n font-weight: bold;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\ntd,\nth {\n padding: 0;\n}\n/* 1 */\n/*img[src*=\".svg\"] { \n\t\twidth: 100%;\n\t}*/\n/* 2 */\n/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n\t\timg[src*=\".svg\"] {\n\t\t\twidth: 100%; \n\t\t}\n\t}*/\n/**\n\t\t * BODY COMMON STYLE\n\t\t */\nhtml,\nbody {\n width: 100%;\n height: 100%;\n background-color: #eee;\n}\nbody.blocked {\n overflow: hidden;\n}\n.cart-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 16px;\n font-family: 'Montserrat', sans-serif;\n font-weight: 400;\n letter-spacing: -0.02em;\n color: #262626;\n z-index: 100000;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n/**\n\t\t *\tPrimary color\n\t\t */\n.p-color {\n background-color: #111111;\n}\n/**\n\t\t *\tButton\n\t\t */\n.gs-btn {\n background-color: #111111;\n color: #ffffff;\n cursor: pointer;\n -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);\n}\n.gs-btn svg {\n stroke: #ffffff;\n}\n.gs-btn:hover {\n background-color: #292929;\n color: #ffffff;\n}\n.gs-btn:hover svg {\n stroke: #ffffff;\n}\n/**\n\t\t *\tTint\n\t\t */\n.gs-tint {\n background-color: rgba(0, 0, 0, 0.9);\n}\n/**\n\t\t *\tPanel\n\t\t */\n.gs-panel {\n background-color: #f5f5f5;\n}\n.gs-tabs {\n background-color: rgba(255, 255, 255, 0.9);\n color: #262626;\n}\n.gs-tabs svg {\n stroke: #262626;\n}\n.gs-tabs .gs-tab-selected {\n color: #424346;\n cursor: default;\n}\n.gs-tabs .gs-tab-selected svg {\n stroke: #424346;\n}\n.gs-container {\n color: #bdc3c7;\n}\n.gs-item {\n background-color: #ffffff;\n}\n.gs-item .gs-item-price {\n color: #a8a8b2;\n}\n.gs-item .gs-item-label {\n color: #111111;\n}\n.gs-item svg {\n stroke: #bdc3c7;\n}\n.iScrollVerticalScrollbar {\n position: absolute;\n z-index: 9999;\n width: 0.25em;\n bottom: 0.5em;\n top: 0.5em;\n right: 0.125em;\n overflow: hidden;\n margin: 0.25em 0em;\n margin-top: 3.5em;\n}\n.iScrollVerticalScrollbar.iScrollBothScrollbars {\n bottom: 0.5em;\n}\n.iScrollIndicator {\n position: absolute;\n background: rgba(38, 38, 38, 0.2);\n border-radius: 2px;\n}\n.iScrollVerticalScrollbar .iScrollIndicator {\n width: 100%;\n background: rgba(38, 38, 38, 0.5);\n}\n@media screen and (min-width: 20em) {\n .iScrollVerticalScrollbar {\n margin-top: 4.25em;\n }\n}\n@media (min-width: 26.25em) and (max-height: 26em) {\n .iScrollVerticalScrollbar {\n margin-top: 3em;\n }\n}\n.cart-panel {\n width: 100%;\n height: 100%;\n top: 0;\n right: 0;\n min-width: 17.5em;\n display: none;\n position: fixed;\n z-index: 30;\n -webkit-transition: width 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -moz-transition: width 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -o-transition: width 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n transition: width 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n}\n/** 550 */\n@media screen and (min-width: 34.375em) {\n .cart-panel {\n width: 34.375em;\n }\n}\n/** 1024 */\n@media screen and (min-width: 64em) {\n .cart-panel {\n width: 40em;\n }\n}\n.cp-header {\n width: 100%;\n height: 3em;\n position: absolute;\n z-index: 20;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.cp-header ul {\n width: 100%;\n height: 100%;\n display: table;\n}\n.cp-header li {\n height: 100%;\n position: relative;\n display: table-cell;\n white-space: nowrap;\n}\n.cp-tab-ic {\n margin-right: 0.125em;\n vertical-align: middle;\n display: inline-block;\n width: 1em;\n height: 1em;\n}\n.cp-tab-ic svg {\n fill: none;\n stroke-width: 2.6;\n stroke-linecap: round;\n stroke-miterlimit: 4;\n}\n.cp-tab-label {\n vertical-align: middle;\n display: inline-block;\n font-size: 0.875em;\n line-height: 1em;\n}\n/*.cp-section_cart .cart-tab, .cp-section_wish .wish-tab {\n\t\t\tcursor: default;\n\n\t\t\t.cp-tab-label {\n\t\t\t\tcolor: @panel-selected-color;\n\t\t\t}\n\n\t\t\t.cp-tab-ic {\n\t\t\t\tsvg {\n\t\t\t\t\tstroke: @panel-selected-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}*/\n.cp-back {\n width: 3em;\n cursor: pointer;\n}\n.cp-back .cp-tab-ic {\n position: absolute;\n top: 50%;\n -webkit-transform: translate(0.625em, -50%);\n -moz-transform: translate(0.625em, -50%);\n -ms-transform: translate(0.625em, -50%);\n -o-transform: translate(0.625em, -50%);\n transform: translate(0.625em, -50%);\n}\n.cp-back:hover .cp-tab-ic {\n -webkit-transform: translate(0.5em, -50%);\n -moz-transform: translate(0.5em, -50%);\n -ms-transform: translate(0.5em, -50%);\n -o-transform: translate(0.5em, -50%);\n transform: translate(0.5em, -50%);\n}\n.cp-tab-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.cp-tabs li {\n cursor: pointer;\n}\n.cp-tabs li.selected {\n cursor: default;\n}\n.cp-tab-cursor {\n width: 50%;\n height: 0.125em;\n top: 0;\n left: 0;\n position: absolute;\n -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.cp-section_cart .cp-tab-cursor {\n -webkit-transform: translateX(0);\n -moz-transform: translateX(0);\n -ms-transform: translateX(0);\n -o-transform: translateX(0);\n transform: translateX(0);\n}\n.cp-section_wish .cp-tab-cursor {\n -webkit-transform: translateX(100%);\n -moz-transform: translateX(100%);\n -ms-transform: translateX(100%);\n -o-transform: translateX(100%);\n transform: translateX(100%);\n}\n@media screen and (min-width: 20em) {\n .cp-header {\n height: 3.75em;\n }\n .cp-back {\n width: 3.75em;\n }\n .cp-back .cp-tab-ic {\n -webkit-transform: translate(1.125em, -50%);\n -moz-transform: translate(1.125em, -50%);\n -ms-transform: translate(1.125em, -50%);\n -o-transform: translate(1.125em, -50%);\n transform: translate(1.125em, -50%);\n }\n .cp-back:hover .cp-tab-ic {\n -webkit-transform: translate(1em, -50%);\n -moz-transform: translate(1em, -50%);\n -ms-transform: translate(1em, -50%);\n -o-transform: translate(1em, -50%);\n transform: translate(1em, -50%);\n }\n .cp-tab-ic {\n margin-right: 0.25em;\n width: 1.1875em;\n height: 1.1875em;\n }\n .cp-tab-label {\n font-size: 1em;\n line-height: 1.25em;\n }\n}\n/**\n\t\t * PORTRAIT MOBILE MODE (~416px)\n\t\t */\n@media (min-width: 26.25em) and (max-height: 26em) {\n .cp-header {\n height: 2.5em;\n }\n .cp-back {\n width: 2.5em;\n }\n .cp-back .cp-tab-ic {\n -webkit-transform: translate(0.625em, -50%);\n -moz-transform: translate(0.625em, -50%);\n -ms-transform: translate(0.625em, -50%);\n -o-transform: translate(0.625em, -50%);\n transform: translate(0.625em, -50%);\n }\n .cp-back:hover .cp-tab-ic {\n -webkit-transform: translate(0.5em, -50%);\n -moz-transform: translate(0.5em, -50%);\n -ms-transform: translate(0.5em, -50%);\n -o-transform: translate(0.5em, -50%);\n transform: translate(0.5em, -50%);\n }\n .cp-tab-ic {\n margin-right: 0.125em;\n width: 1em;\n height: 1em;\n }\n .cp-tab-label {\n font-size: 0.875em;\n line-height: 1em;\n }\n}\n.cp-container {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n.cp-container ul {\n list-style-type: none;\n}\n.cp-container > ul {\n width: 100%;\n height: 100%;\n display: table;\n position: relative;\n}\n.cp-container > ul > li {\n height: 100%;\n width: 50%;\n position: relative;\n display: table-cell;\n}\n.cp-container > ul.cp-sections {\n width: 200%;\n}\n.cp-container > ul {\n -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.cp-section_cart .cp-container > ul {\n -webkit-transform: translateX(0);\n -moz-transform: translateX(0);\n -ms-transform: translateX(0);\n -o-transform: translateX(0);\n transform: translateX(0);\n}\n.cp-section_wish .cp-container > ul {\n -webkit-transform: translateX(-50%);\n -moz-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n -o-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n.cp-section-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n /* Prevent native touch events on Windows */\n -ms-touch-action: none;\n /* Prevent the callout on tap-hold and text selection */\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n /* Prevent text resize on orientation change, useful for web-apps */\n -webkit-text-size-adjust: none;\n -moz-text-size-adjust: none;\n -ms-text-size-adjust: none;\n -o-text-size-adjust: none;\n text-size-adjust: none;\n}\n.cp-section-content {\n position: absolute;\n width: 100%;\n /* Prevent elements to be highlighted on tap */\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n /* Put the scroller into the HW Compositing layer right from the start */\n -webkit-transform: translateZ(0);\n -moz-transform: translateZ(0);\n -ms-transform: translateZ(0);\n -o-transform: translateZ(0);\n transform: translateZ(0);\n}\n.cp-section-top,\n.cp-section-bottom {\n display: block;\n}\n.cp-section-top {\n height: 3.625em;\n}\n.cp-section-cart .cp-section-bottom {\n height: 3.5em;\n}\n.cp-section-wish .cp-section-bottom {\n height: 0em;\n}\n.cp-section-list {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 0.625em;\n}\n.cp-section-list > li {\n margin-bottom: 0.625em;\n}\n.cp-item-wrapper {\n width: 100%;\n position: relative;\n overflow: hidden;\n -webkit-border-radius: 20px;\n -moz-border-radius: 20px;\n border-radius: 20px;\n -webkit-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -moz-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -o-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -webkit-transform: translateY(10%);\n -moz-transform: translateY(10%);\n -ms-transform: translateY(10%);\n -o-transform: translateY(10%);\n transform: translateY(10%);\n opacity: 0;\n}\n.cp-item-wrapper.active {\n -webkit-transform: translateY(0%);\n -moz-transform: translateY(0%);\n -ms-transform: translateY(0%);\n -o-transform: translateY(0%);\n transform: translateY(0%);\n opacity: 1;\n}\n.cp-item-img {\n width: 100%;\n padding-bottom: 100%;\n background-repeat: no-repeat;\n -webkit-background-size: cover;\n -moz-background-size: cover;\n -o-background-size: cover;\n background-size: cover;\n -webkit-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -moz-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -o-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n}\n/** CART ITEM BLOCK */\n.cp-item-block-wrapper {\n width: 100%;\n height: 5em;\n display: table;\n -webkit-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -moz-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -o-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n}\n.cp-item-block-wrapper > div {\n position: relative;\n display: table-cell;\n}\n.cp-item-description > span {\n position: absolute;\n padding: 0 1.125em;\n top: 50%;\n -webkit-transform: translate(0, -50%);\n -moz-transform: translate(0, -50%);\n -ms-transform: translate(0, -50%);\n -o-transform: translate(0, -50%);\n transform: translate(0, -50%);\n}\n.cp-item-label {\n line-height: 1.3em;\n max-height: 2.6em;\n font-size: 0.875em;\n overflow: hidden;\n display: block;\n}\n.cp-item-price {\n font-size: 0.875em;\n display: block;\n margin-top: 0.125em;\n}\n.cp-item-cart,\n.cp-item-wish,\n.cp-item-trash {\n width: 2.5em;\n cursor: pointer;\n}\n.cp-item-trash .cp-item-ic {\n transform: translate(-16px, -50%);\n left: auto;\n right: 0;\n}\n.cp-item-ic {\n position: absolute;\n display: inline-block;\n width: 0.9375em;\n height: 0.9375em;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.cp-item-ic svg {\n fill: none;\n stroke-width: 2.6;\n stroke-linecap: round;\n stroke-miterlimit: 4;\n}\n.cp-empty-section {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -moz-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -o-transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n transition: all 0.5s cubic-bezier(0.61, 0, 0.25, 0.99);\n -webkit-transform: translateY(1em);\n -moz-transform: translateY(1em);\n -ms-transform: translateY(1em);\n -o-transform: translateY(1em);\n transform: translateY(1em);\n opacity: 0;\n}\n.cp-empty-section.active {\n -webkit-transform: translateY(0%);\n -moz-transform: translateY(0%);\n -ms-transform: translateY(0%);\n -o-transform: translateY(0%);\n transform: translateY(0%);\n opacity: 1;\n}\n.cp-empty-section-label {\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n font-size: 0.875em;\n white-space: nowrap;\n}\n@media screen and (min-width: 20em) {\n .cp-section-top {\n height: 4.375em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 5em;\n }\n .cp-item-ic {\n width: 1.5em;\n height: 1.5em;\n }\n .cp-item-cart,\n .cp-item-wish,\n .cp-item-trash {\n width: 3em;\n }\n}\n@media screen and (min-width: 22.5em) {\n .cp-section-top {\n height: 5em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 5em;\n }\n .cp-section-wish .cp-section-bottom {\n height: 0em;\n }\n .cp-section-list {\n padding: 0 1.25em;\n }\n .cp-section-list > li {\n margin-bottom: 1.25em;\n }\n .cp-item-label {\n line-height: 1.3em;\n max-height: 2.6em;\n font-size: 1em;\n }\n .cp-item-price {\n font-size: 1em;\n }\n}\n@media screen and (min-width: 26.25em) {\n .cp-section-list {\n padding: 0 0.625em;\n }\n .cp-section-list > li {\n margin-bottom: 0.125em;\n }\n .cp-section-top {\n height: 4.375em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 6.125em;\n }\n .cp-section-wish .cp-section-bottom {\n height: 0.5em;\n }\n .cp-item-wrapper {\n height: 5em;\n display: table;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n /** CART ITEM IMG */\n }\n .cp-item-wrapper > div {\n display: table-cell;\n }\n .cp-item-wrapper .cp-item-img {\n width: 5em;\n padding: 0;\n display: table-cell;\n }\n .cp-item-ic {\n width: 0.9375em;\n height: 0.9375em;\n }\n .cp-item-label {\n line-height: 1.3em;\n max-height: 2.6em;\n font-size: 0.875em;\n }\n .cp-item-price {\n font-size: 0.875em;\n }\n .cp-item-cart,\n .cp-item-wish,\n .cp-item-trash {\n width: 2.5em;\n }\n}\n/**\n\t\t * PORTRAIT MOBILE MODE (~416px)\n\t\t */\n@media (min-width: 26.25em) and (max-height: 26em) {\n .cp-section-top {\n height: 3.125em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 4em;\n }\n}\n@media screen and (min-width: 30em) {\n .cp-section-list {\n padding: 0 1.25em;\n }\n .cp-section-list > li {\n margin-bottom: 0.25em;\n }\n .cp-section-top {\n height: 5em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 6.625em;\n }\n .cp-section-wish .cp-section-bottom {\n height: 1em;\n }\n .cp-item-cart,\n .cp-item-wish,\n .cp-item-trash {\n width: 3em;\n }\n .cp-item-ic {\n width: 1.25em;\n height: 1.25em;\n }\n}\n/**\n\t\t * PORTRAIT MOBILE MODE (~480px)\n\t\t */\n@media (min-width: 30em) and (max-height: 26em) {\n .cp-section-top {\n height: 3.75em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 4.5em;\n }\n}\n@media screen and (min-width: 64em) {\n .cp-item-ic {\n width: 1.375em;\n height: 1.375em;\n }\n .cp-section-list {\n padding: 0 1.875em;\n }\n .cp-section-list > li {\n margin-bottom: 0.25em;\n }\n .cp-section-top {\n height: 5.625em;\n }\n .cp-section-cart .cp-section-bottom {\n height: 7.25em;\n }\n .cp-section-wish .cp-section-bottom {\n height: 1.625em;\n }\n .cp-item-block-wrapper {\n height: 7.5em;\n }\n .cp-item-wrapper {\n height: 7.5em;\n /** CART ITEM IMG */\n }\n .cp-item-wrapper .cp-item-img {\n width: 7.5em;\n }\n .cp-item-label {\n line-height: 1.3em;\n max-height: 2.6em;\n font-size: 1em;\n }\n .cp-item-price {\n font-size: 1em;\n }\n .cp-item-cart,\n .cp-item-wish,\n .cp-item-trash {\n width: 3.75em;\n }\n .cp-item-trash .cp-item-ic {\n left: 50%;\n right: auto;\n transform: translate(-50%, -50%);\n }\n}\n/*.cp-footer {\n\n\t}*/\n.cp-checkout-btn {\n position: absolute;\n z-index: 30;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 2.5em;\n height: 2.5em;\n -webkit-border-radius: 1.25em;\n -moz-border-radius: 1.25em;\n border-radius: 1.25em;\n bottom: 1em;\n left: 50%;\n -webkit-transform: translate(-50%, 0);\n -moz-transform: translate(-50%, 0);\n -ms-transform: translate(-50%, 0);\n -o-transform: translate(-50%, 0);\n transform: translate(-50%, 0);\n /*&:hover {\n\t\t\t\tbackground-color: @checkout-color-hover;\n\t\t\t}*/\n -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n -webkit-transition-property: width, height, bottom, -webkit-border-radius, -webkit-transform, opacity;\n -moz-transition-property: width, height, bottom, border-radius, -moz-transform, opacity;\n -o-transition-property: width, height, bottom, border-radius, -o-transform, opacity;\n transition-property: width, height, bottom, border-radius,-webkit-transform,-moz-transform,-o-transform,transform, opacity;\n -webkit-transition-delay: 0s;\n -moz-transition-delay: 0s;\n -o-transition-delay: 0s;\n transition-delay: 0s;\n}\n.cp-checkout-btn.hidden {\n -webkit-transition-delay: 0s;\n -moz-transition-delay: 0s;\n -o-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transform: translate(-50%, 300%);\n -moz-transform: translate(-50%, 300%);\n -ms-transform: translate(-50%, 300%);\n -o-transform: translate(-50%, 300%);\n transform: translate(-50%, 300%);\n opacity: 0;\n}\n.cp-checkout-label {\n display: none;\n}\n.cp-checkout-ic {\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n display: block;\n width: 1em;\n height: 1em;\n}\n.cp-checkout-ic svg {\n fill: none;\n stroke: #ffffff;\n stroke-width: 2.6;\n stroke-linecap: round;\n stroke-miterlimit: 4;\n}\n@media screen and (min-width: 20em) {\n .cp-checkout-ic {\n width: 1.5em;\n height: 1.5em;\n }\n .cp-checkout-btn {\n width: 3.75em;\n height: 3.75em;\n -webkit-border-radius: 1.875em;\n -moz-border-radius: 1.875em;\n border-radius: 1.875em;\n bottom: 1.25em;\n }\n}\n@media screen and (min-width: 26.25em) {\n .cp-checkout-ic {\n display: none;\n }\n .cp-checkout-btn {\n width: 15.625em;\n height: 3.125em;\n bottom: 2.5em;\n }\n .cp-checkout-label {\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n display: block;\n color: #ffffff;\n font-size: 0.875em;\n text-transform: uppercase;\n }\n}\n/**\n\t\t * PORTRAIT MOBILE MODE (~416px)\n\t\t */\n@media (min-width: 26.25em) and (max-height: 26em) {\n .cp-checkout-btn {\n bottom: 1em;\n width: 11.25em;\n height: 2.5em;\n }\n .cp-checkout-label {\n font-size: 0.75em;\n }\n}\n.cart-tint {\n width: 100%;\n height: 100%;\n display: none;\n position: fixed;\n z-index: 20;\n}\n.cart-button {\n position: fixed;\n left: auto;\n top: 1.5em;\n right: 1.5em;\n bottom: auto;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: none;\n z-index: 10;\n}\n.cb-wrapper {\n width: 2.5em;\n height: 2.5em;\n position: relative;\n -webkit-border-radius: 1.25em;\n -moz-border-radius: 1.25em;\n border-radius: 1.25em;\n /*&:hover {\n\t\t\t\tbackground-color: @button-color-hover;\n\t\t\t}*/\n}\n.cb-wrapper ul {\n display: table;\n list-style-type: none;\n height: 100%;\n width: 100%;\n}\n.cb-wrapper li {\n display: table-cell;\n height: 100%;\n}\n.cb-ic {\n width: 1.125em;\n height: 1.125em;\n position: absolute;\n display: inline-block;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.cb-ic svg {\n fill: none;\n stroke-width: 2.6;\n stroke-linecap: round;\n stroke-miterlimit: 4;\n}\n.cb-label {\n display: none;\n}\n.cb-wrapper.cb-state_both .cb-wish-cell,\n.cb-wrapper.cb-state_cart .cb-wish-cell {\n display: none;\n}\n.cb-wrapper.cb-state_wish .cb-cart-cell {\n display: none;\n}\n.cb-counter {\n width: 1.25em;\n height: 1.25em;\n position: absolute;\n display: inline-block;\n right: -12%;\n top: -12%;\n background-color: #ffffff;\n color: #424346;\n -webkit-border-radius: 0.625em;\n -moz-border-radius: 0.625em;\n border-radius: 0.625em;\n -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n z-index: 10;\n}\n.cb-counter-label {\n position: absolute;\n display: inline-block;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n font-size: 0.6875em;\n}\n@media screen and (min-width: 20em) {\n .cb-ic {\n width: 1.5em;\n height: 1.5em;\n }\n .cb-wrapper {\n width: 3.75em;\n height: 3.75em;\n -webkit-border-radius: 1.875em;\n -moz-border-radius: 1.875em;\n border-radius: 1.875em;\n }\n .cb-counter {\n width: 1.625em;\n height: 1.625em;\n right: -0.25em;\n top: -0.25em;\n -webkit-border-radius: 0.8125em;\n -moz-border-radius: 0.8125em;\n border-radius: 0.8125em;\n }\n .cb-counter-label {\n font-size: 0.75em;\n }\n}\n@media screen and (min-width: 26.25em) {\n .cb-wrapper.cb-state_both,\n .cb-wrapper.cb-state_cart {\n width: auto;\n height: 3.125em;\n -webkit-border-radius: 1.5625em;\n -moz-border-radius: 1.5625em;\n border-radius: 1.5625em;\n }\n .cb-wrapper.cb-state_both ul > li,\n .cb-wrapper.cb-state_cart ul > li {\n padding: 0 1em;\n padding-top: 0.875em;\n }\n .cb-wrapper.cb-state_both .cb-ic,\n .cb-wrapper.cb-state_cart .cb-ic {\n width: 1.25em;\n height: 1.25em;\n position: relative;\n display: inline-block;\n top: auto;\n left: auto;\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n transform: translate(0, 0);\n }\n .cb-wrapper.cb-state_both .cb-label,\n .cb-wrapper.cb-state_cart .cb-label {\n display: inline-block;\n font-size: 0.875em;\n -webkit-transform: translate(0, 0.125em);\n -moz-transform: translate(0, 0.125em);\n -ms-transform: translate(0, 0.125em);\n -o-transform: translate(0, 0.125em);\n transform: translate(0, 0.125em);\n vertical-align: top;\n padding-left: 0.25em;\n }\n .cb-counter {\n right: -0.375em;\n top: -0.375em;\n }\n}\n@media screen and (min-width: 48em) {\n .cb-wrapper.cb-state_both .cb-wish-cell {\n display: table-cell;\n }\n .cb-wrapper.cb-state_both .cb-cart-cell {\n padding-right: 0;\n }\n}\n", ""]); // exports /***/ }, /* 27 */ /***/ function(module, exports) { /* MIT License https://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function() { var list = []; // return the list of modules as css string list.toString = function toString() { var result = []; for(var i = 0; i < this.length; i++) { var item = this[i]; if(item[2]) { result.push("@media " + item[2] + "{" + item[1] + "}"); } else { result.push(item[1]); } } return result.join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; /***/ }, /* 28 */ /***/ function(module, exports, __webpack_require__) { /* MIT License https://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ var stylesInDom = {}, memoize = function(fn) { var memo; return function () { if (typeof memo === "undefined") memo = fn.apply(this, arguments); return memo; }; }, isOldIE = memoize(function() { return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); }), getHeadElement = memoize(function () { return document.head || document.getElementsByTagName("head")[0]; }), singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = []; module.exports = function(list, options) { if(false) { if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); } options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style> // tags it will allow on a page if (typeof options.singleton === "undefined") options.singleton = isOldIE(); // By default, add <style> tags to the bottom of <head>. if (typeof options.insertAt === "undefined") options.insertAt = "bottom"; var styles = listToStyles(list); addStylesToDom(styles, options); return function update(newList) { var mayRemove = []; for(var i = 0; i < styles.length; i++) { var item = styles[i]; var domStyle = stylesInDom[item.id]; domStyle.refs--; mayRemove.push(domStyle); } if(newList) { var newStyles = listToStyles(newList); addStylesToDom(newStyles, options); } for(var i = 0; i < mayRemove.length; i++) { var domStyle = mayRemove[i]; if(domStyle.refs === 0) { for(var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](); delete stylesInDom[domStyle.id]; } } }; } function addStylesToDom(styles, options) { for(var i = 0; i < styles.length; i++) { var item = styles[i]; var domStyle = stylesInDom[item.id]; if(domStyle) { domStyle.refs++; for(var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]); } for(; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j], options)); } } else { var parts = []; for(var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j], options)); } stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts}; } } } function listToStyles(list) { var styles = []; var newStyles = {}; for(var i = 0; i < list.length; i++) { var item = list[i]; var id = item[0]; var css = item[1]; var media = item[2]; var sourceMap = item[3]; var part = {css: css, media: media, sourceMap: sourceMap}; if(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]}); else newStyles[id].parts.push(part); } return styles; } function insertStyleElement(options, styleElement) { var head = getHeadElement(); var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1]; if (options.insertAt === "top") { if(!lastStyleElementInsertedAtTop) { head.insertBefore(styleElement, head.firstChild); } else if(lastStyleElementInsertedAtTop.nextSibling) { head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling); } else { head.appendChild(styleElement); } styleElementsInsertedAtTop.push(styleElement); } else if (options.insertAt === "bottom") { head.appendChild(styleElement); } else { throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'."); } } function removeStyleElement(styleElement) { styleElement.parentNode.removeChild(styleElement); var idx = styleElementsInsertedAtTop.indexOf(styleElement); if(idx >= 0) { styleElementsInsertedAtTop.splice(idx, 1); } } function createStyleElement(options) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; insertStyleElement(options, styleElement); return styleElement; } function createLinkElement(options) { var linkElement = document.createElement("link"); linkElement.rel = "stylesheet"; insertStyleElement(options, linkElement); return linkElement; } function addStyle(obj, options) { var styleElement, update, remove; if (options.singleton) { var styleIndex = singletonCounter++; styleElement = singletonElement || (singletonElement = createStyleElement(options)); update = applyToSingletonTag.bind(null, styleElement, styleIndex, false); remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true); } else if(obj.sourceMap && typeof URL === "function" && typeof URL.createObjectURL === "function" && typeof URL.revokeObjectURL === "function" && typeof Blob === "function" && typeof btoa === "function") { styleElement = createLinkElement(options); update = updateLink.bind(null, styleElement); remove = function() { removeStyleElement(styleElement); if(styleElement.href) URL.revokeObjectURL(styleElement.href); }; } else { styleElement = createStyleElement(options); update = applyToTag.bind(null, styleElement); remove = function() { removeStyleElement(styleElement); }; } update(obj); return function updateStyle(newObj) { if(newObj) { if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return; update(obj = newObj); } else { remove(); } }; } var replaceText = (function () { var textStore = []; return function (index, replacement) { textStore[index] = replacement; return textStore.filter(Boolean).join('\n'); }; })(); function applyToSingletonTag(styleElement, index, remove, obj) { var css = remove ? "" : obj.css; if (styleElement.styleSheet) { styleElement.styleSheet.cssText = replaceText(index, css); } else { var cssNode = document.createTextNode(css); var childNodes = styleElement.childNodes; if (childNodes[index]) styleElement.removeChild(childNodes[index]); if (childNodes.length) { styleElement.insertBefore(cssNode, childNodes[index]); } else { styleElement.appendChild(cssNode); } } } function applyToTag(styleElement, obj) { var css = obj.css; var media = obj.media; var sourceMap = obj.sourceMap; if(media) { styleElement.setAttribute("media", media) } if(styleElement.styleSheet) { styleElement.styleSheet.cssText = css; } else { while(styleElement.firstChild) { styleElement.removeChild(styleElement.firstChild); } styleElement.appendChild(document.createTextNode(css)); } } function updateLink(linkElement, obj) { var css = obj.css; var media = obj.media; var sourceMap = obj.sourceMap; if(sourceMap) { // http://stackoverflow.com/a/26603875 css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */"; } var blob = new Blob([css], { type: "text/css" }); var oldSrc = linkElement.href; linkElement.href = URL.createObjectURL(blob); if(oldSrc) URL.revokeObjectURL(oldSrc); } /***/ }, /* 29 */, /* 30 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var $ = __webpack_require__(1), Backbone = __webpack_require__(3), webfont = __webpack_require__(9); /** * Require base */ var Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ HOOKS ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var Hooks = function () { // СЛУШАЕТ СОБЫТИЯ LIFECYCLE // --------------------------------------------------------------------------------- this.listenTo(Lifecycle, LifecycleEvent.SHOW, this._onshow); this.listenTo(Lifecycle, LifecycleEvent.HIDE, this._onhide); }; //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ ОБРАБОТЧИКИ СОБЫТИЙ LYFECYCLE │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Hooks.prototype, { /** Показывает панель */ _onshow: function () { document.body.addEventListener('touchmove', this._ontouchmove); $('body').addClass('blocked'); }, _ontouchmove: function (e) { if (!$(e.target).hasClass("scrollable")) { e.preventDefault(); } }, /** * Скрывает панель */ _onhide: function () { document.body.removeEventListener('touchmove', this._ontouchmove); $('body').removeClass('blocked'); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ .. │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Hooks.prototype, { destroy: function () { this.stopListening(); document.body.removeEventListener('touchmove', this._ontouchmove); $('body').removeClass('block'); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ РАСШИРЯЕТ BACKBONE EVENTS │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(Hooks.prototype, Backbone.Events); module.exports = Hooks; /***/ }, /* 31 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var Backbone = __webpack_require__(3); /** * Require base */ var Cart = __webpack_require__(7), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Utils = __webpack_require__(14); /** * Require component */ var Options = __webpack_require__(10); /** * Require HTML template */ var ItemHTML = __webpack_require__(33); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ПРЕДСТАВЛЕНИЕ ПРОДУКТА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var CartSectionItem = Backbone.View.extend( { tagName: "li", model: Cart.Item, events: { 'click .cp-item-trash': 'trash', 'click .cp-item-wish': 'copyToWish' }, initialize: function () { this.currency = Options.vars.currency; this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'change:quantity', this.render); }, trash: function () { this.model.destroy(); }, copyToWish: function () { var m = this.model.clone(); Cart.addTo('wishlist', m); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ RENDERING │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(CartSectionItem.prototype, { /** * Рендер представления */ render: function () { if (this.model.changed.id !== undefined) { return; } var m = this.model.toJSON(); m.price = Utils.format(m.price, this.currency); m.iswish = Options.vars.iswish; this.$el.html(ItemHTML(m)); return this; } }); module.exports = CartSectionItem; /***/ }, /* 32 */ /***/ function(module, exports, __webpack_require__) { /** * Require third-party library */ var Backbone = __webpack_require__(3); /** * Require base */ var Cart = __webpack_require__(7), Lifecycle = __webpack_require__(5), LifecycleEvent = __webpack_require__(6), Utils = __webpack_require__(14); /** * Require component */ var Options = __webpack_require__(10); /** * Require HTML template */ var ItemHTML = __webpack_require__(34); //┐ //│ ╔══════════════════════════════════════════════════════════════════════════════════════════╗ //│ ║ ║ //╠──╢ ПРЕДСТАВЛЕНИЕ ПРОДУКТА ║ //│ ║ ║ //│ ╚══════════════════════════════════════════════════════════════════════════════════════════╝ //┘ var WishSectionItem = Backbone.View.extend( { tagName: "li", model: Cart.Item, events: { 'click .cp-item-trash': 'trash', 'click .cp-item-cart': 'copyToCart' }, initialize: function () { this.currency = Options.vars.currency; this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'change:quantity', this.render); }, trash: function () { this.model.destroy(); }, copyToCart: function () { var m = this.model.clone(); Cart.addTo('cartlist', m); } }); //┐ //│ ┌──────────────────────────────────────────────────────────────────────────────────────┐ //╠──┤ RENDERING │ //│ └──────────────────────────────────────────────────────────────────────────────────────┘ //┘ _.extend(WishSectionItem.prototype, { /** * Рендер представления */ render: function () { if (this.model.changed.id !== undefined) { return; } var m = this.model.toJSON(); m.price = Utils.format(m.price, this.currency) this.$el.html(ItemHTML(m)); return this; } }); module.exports = WishSectionItem; /***/ }, /* 33 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<div class="cp-item-wrapper gs-item">\n <div class="cp-item-img" style="background-image: url(\'' + ((__t = (img)) == null ? '' : __t) + '\');"></div>\n <div class="cp-item-block">\n <div class="cp-item-block-wrapper">\n <div class="cp-item-description">\n <span>\n <span class="cp-item-label gs-item-label">' + ((__t = (title)) == null ? '' : __t) + '</span>\n <span class="cp-item-price gs-item-price">' + ((__t = (price)) == null ? '' : __t) + '</span>\n </span>\n </div>\n '; if (iswish) { ; __p += '\n <div class="cp-item-wish">\n <span class="cp-item-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29 S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"/></svg>\n </span>\n </div>\n '; } ; __p += '\n <div class="cp-item-trash">\n <span class="cp-item-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><g><line x1="7" y1="7" x2="25" y2="25"/><g><line x1="25" y1="7" x2="7" y2="25"/></g></g></g></svg>\n </span>\n </div>\n </div>\n </div>\n</div>'; } return __p }; /***/ }, /* 34 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = ''; with (obj) { __p += '<div class="cp-item-wrapper gs-item">\n <div class="cp-item-img" style="background-image: url(\'' + ((__t = (img)) == null ? '' : __t) + '\');"></div>\n <div class="cp-item-block">\n <div class="cp-item-block-wrapper">\n <div class="cp-item-description">\n <span>\n <span class="cp-item-label gs-item-label">' + ((__t = (title)) == null ? '' : __t) + '</span>\n <span class="cp-item-price gs-item-price">' + ((__t = (price)) == null ? '' : __t) + '</span>\n </span>\n </div>\n <div class="cp-item-cart">\n <span class="cp-item-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"/><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"/></g></svg>\n </span>\n </div>\n <div class="cp-item-trash">\n <span class="cp-item-ic">\n <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><g><line x1="7" y1="7" x2="25" y2="25"/><g><line x1="25" y1="7" x2="7" y2="25"/></g></g></g></svg>\n </span>\n </div>\n </div>\n </div>\n</div>'; } return __p }; /***/ }, /* 35 */ /***/ function(module, exports) { module.exports = function(obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<div class="cp-empty-section">\n <span class="cp-empty-section-label">'; print(message) ; __p += '</span>\n</div>'; } return __p }; /***/ } ]); //# sourceMappingURL=cart.modern.0.5.0.js.map var cart = new CartModule({ iswish: true, ismultiple: false }); //console.log(cart); $('.add-to-cart').click(function() { cart.addToCart($(this).prev().data()); }); $('.add-to-wish').click(function() { cart.addToWish($(this).prev().prev().data()); }); </script>

.product { width: 200px; height: 200px; font-size: 10px; font-family: 'Arial'; margin-bottom: 8px; padding-top: 8px; } .container .product span { text-transform: uppercase; font-size: 8px; font-family: 'Arial'; color: #ccc; display: inline-block; transform: translateY(-16px); } .add-to-cart { margin-right: 8px; } .container { display: inline-block; margin: 24px; text-align: center; } .container span.add-to-cart, .container span.add-to-wish { font-size: 10px; font-family: 'Arial'; font-weight: 800; color: #666; padding-bottom: 12px; display: inline-block; cursor: pointer; }