+
+
+
+
+ {% include "lazy-image",
+ _altAttr: _entityData.data.image_alt_attr,
+ _data: productImage,
+ _targetWidth: "700",
+ _className: imageClass
+ %}
+
+
+
diff --git a/components/product-list-block-item.tpl b/components/product-list-block-item.tpl
new file mode 100644
index 0000000..a15ae0d
--- /dev/null
+++ b/components/product-list-block-item.tpl
@@ -0,0 +1,25 @@
+{%- load buy_button to "buy_button" q.content.parent_id=_entityData.page_id q.content.parent_type="page"
+q.content.name="body" s="content.position" -%}
+{%- assign product = buy_button.product -%}
+
+ {%- capture look_closer_btn -%}
+
+ {{ "look_closer" | lc | escape_once }}
+
+ {%- endcapture -%}
+
+
+ {{ _entityData.title | escape_once }}
+
+ {%- if _buyButton.product != blank and _buyButton.available? -%}
+
+ {%- if buy_button.product.out_of_stock? -%}
+
+ {%- if _buyButton.product.uses_variants == true -%}
+ {{ look_closer_btn }}
+
+ {%- else -%}
+
+
+ {%- else -%}
+ {%- if editmode or buy_button.product.out_of_stock? -%}
+ {{ look_closer_btn }}
+ {%- else -%}
+
+ {%- if _buyButton.product.price_max_with_tax != _buyButton.product.price_min_with_tax -%}
+ {{ _buyButton.product.price_min_with_tax | money_with_currency: _buyButton.product.currency }}
+ -
+ {%- endif -%}
+ {{ _buyButton.product.price_max_with_tax | money_with_currency: _buyButton.product.currency }}
+
+ {{ "add_to_cart" | lc | escape_once }}
+ {%- endif -%}
+
+
+ {{ _buyButton.product.price_with_tax | money_with_currency: _buyButton.product.currency }}
+
+
+
+ {%- endif -%}
+
+ {{ look_closer_btn }}
+
+ {%- endif -%}
+ {{ "out_of_stock" | lc | escape_once }}
+ {%- endif -%}
+
+
diff --git a/components/product-list-block.tpl b/components/product-list-block.tpl
new file mode 100644
index 0000000..2dd5b99
--- /dev/null
+++ b/components/product-list-block.tpl
@@ -0,0 +1,20 @@
+
+
+
+ {%- if _entityData.layout_title == product_list_layout -%}
+ {% include "content-item", _imageData: _entityData.data.item_image, _entityData: _entityData,
+ _itemType: "page", _id: _entityData.page_id, _targetWidth: "600" %}
+
+ {%- else -%}
+ {% include "product-item", _buyButton: buy_button, _entityData: _entityData %}
+ {%- endif -%}
+
+
+ {%- assign level_str = "menuitems_on_level_" | append: page.level -%}
+ {% if site.root_item.selected? %}
+ {% for level_1 in site.visible_menuitems_with_data %}
+ {% if level_1.layout_title == product_list_layout or level_1.layout_title == product_layout %}
+ {% include "product-list-block-item", _entityData: level_1 %}
+ {% endif %}
+ {% endfor %}
+ {% else %}
+ {%- for item in site[level_str] -%}
+ {%- if item.current? -%}
+ {%- for item_child in item.visible_children_with_data -%}
+ {%- if item_child.layout_title == product_list_layout or item_child.layout_title == product_layout -%}
+ {% include "product-list-block-item", _entityData: item_child %}
+ {%- endif -%}
+ {%- endfor -%}
+ {%- endif -%}
+ {%- endfor -%}
+ {%- endif -%}
+
diff --git a/components/template-cs-product-list.tpl b/components/template-cs-product-list.tpl
new file mode 100644
index 0000000..21591be
--- /dev/null
+++ b/components/template-cs-product-list.tpl
@@ -0,0 +1,11 @@
+:root {
+ /* VoogStyle
+ "pathI18n": ["product_list"],
+ "titleI18n": "max_nr_of_columns",
+ "editor": "listPicker",
+ "list": {{ base_number_of_columns_set }},
+ "featured": true,
+ "scope": "global"
+ */
+ --product-list-item__width: 33.3%;
+}
\ No newline at end of file
diff --git a/javascripts/application.js b/javascripts/application.js
index 345947f..3ba8bdd 100644
--- a/javascripts/application.js
+++ b/javascripts/application.js
@@ -544,27 +544,27 @@ MMCQ = (function() {
return $('html').hasClass('editmode');
};
- // Remove comments if debouncing is used.
// Function to limit the rate at which a function can fire.
- // var debounce = function(func, wait, immediate) {
- // var timeout;
- // return function() {
- // var context = this, args = arguments;
- // var later = function() {
- // timeout = null;
- // if (!immediate) func.apply(context, args);
- // };
- // var callNow = immediate && !timeout;
- // clearTimeout(timeout);
- // timeout = setTimeout(later, wait);
- // if (callNow) func.apply(context, args);
- // };
- // };
+ var debounce = function(func, wait, immediate) {
+ var timeout;
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (!immediate) func.apply(context, args);
+ };
+ var callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ if (callNow) func.apply(context, args);
+ };
+ };
var bindSideClicks = function() {
$('.content').on('mousedown', function(event) {
if (!$(event.target).closest('.js-prevent-sideclick').length) {
$('.js-popover').removeClass('expanded');
+ $('.js-image-settings-popover').toggleClass('active');
};
});
};
@@ -658,23 +658,6 @@ MMCQ = (function() {
});
};
- var toggleFlags = function() {
- $('.js-option-toggle-flags').on('click', function(event) {
- event.stopPropagation();
-
- if ($(this).hasClass('js-flag-disable-btn')) {
- var flagsState = false;
- } else {
- var flagsState = true;
- }
-
- siteData.set("flags_state", flagsState);
-
- $(this).toggleClass('js-flag-disable-btn');
- $('.js-menu-lang').toggleClass('flags-enabled flags-disabled');
- });
- };
-
var bindFallbackHeaderLeftWidthCalculation = function() {
var headerWidth = $('.js-header').width(),
headerRight = $('.js-header-right'),
@@ -684,145 +667,69 @@ MMCQ = (function() {
$('.js-header-left').css('min-width', headerWidth - headerRightWidth - headerRightMargin);
};
- // Returns the suitable version of the image depending on the viewport width.
- var getImageByWidth = function(sizes, targetWidth) {
- var prevImage;
-
- for (var i = 0, max = sizes.length; i < max; i++) {
- if (sizes[i].width < targetWidth) {
- return prevImage || sizes[i];
- }
- prevImage = sizes[i];
- }
- // Makes sure that smallest is returned if all images bigger than targetWidth.
- return sizes[sizes.length - 1];
- };
-
- var frontPageContentBgImageSizesContains = function(sizes, url) {
- for (var i = sizes.length; i--;) {
- if (url.indexOf(sizes[i].url.trim()) > -1) {
- return true;
- }
- }
- return false;
- };
-
- // Checks the lightness sum of header background image and color and sets the lightness class depending on it's value.
- var handlefrontPageContentLightnessClass = function() {
- if (frontPageContentCoverCombinedLightness >= 0.5) {
- $('.js-background-type').addClass('light-background').removeClass('dark-background');
- } else {
- $('.js-background-type').addClass('dark-background').removeClass('light-background');
- }
+ // ===========================================================================
+ // Load product cover images only when they are close or appearing in the
+ // viewport.
+ // ===========================================================================
+ var callback_loaded = function (element) {
+ var $contentItemBox = $(element).closest('.js-content-item-box');
+ $contentItemBox.removeClass('not-loaded with-error').addClass('is-loaded');
};
- // Header background image and color preview logic function.
- var frontPageContentCoverBgPreview = function(data, frontPageContent) {
- // Defines the variables used in preview logic.
-
- var frontPageContentBgImagePrevious = $('.js-bgpicker-cover-image').css('background-image'),
- frontPageContentBgImageSuitable = data.imageSizes ? getImageByWidth(data.imageSizes, $(window).width()) : null,
- frontPageContentBgImage = (data.image && data.image !== '') ? 'url(' + frontPageContentBgImageSuitable.url + ')' : 'none',
- frontPageContentBgImageSizes = (data.imageSizes && data.imageSizes !== '') ? data.imageSizes : null,
- frontPageContentBgColor = (data.color && data.color !== '') ? data.color : 'rgba(0,0,0,0)',
- frontPageContentBgColorDataLightness = (data.colorData && data.colorData !== '') ? data.colorData.lightness : 1,
- colorExtractImage = $('