diff --git a/bin/css/products.css b/bin/css/products.css
index 5618ea90850d7324e415d798dbf0c2e05b257cdd..16c497c3d65de9cebe0d60d3717fa29b1b7e00f0 100644
--- a/bin/css/products.css
+++ b/bin/css/products.css
@@ -217,6 +217,36 @@
margin-bottom: 40px;
}
+.quiqqer-category-content__hidden{
+ position: relative;
+}
+
+.quiqqer-category-content-inner {
+ overflow: hidden;
+ position: relative;
+}
+
+.quiqqer-category-content-inner-body {
+ overflow: auto;
+}
+
+.quiqqer-category-content-inner-body__bg {
+ position: absolute;
+ width: 100%;
+ height: 50px;
+ background: linear-gradient(0, #fff 10%, transparent);
+ left: 0;
+ bottom: 0;
+}
+
+.quiqqer-category-content-button {
+ text-align: center;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ bottom: -2rem;
+}
+
/** Categories
============================================== */
/* categories: gallery */
@@ -555,13 +585,9 @@
}
.cologne-products-productGallery-products-product-title {
- font-size: 1.2rem;
margin: 1em 0;
max-width: 100%;
- overflow: hidden;
text-align: center;
- text-overflow: ellipsis;
- white-space: nowrap;
}
.cologne-products-productGallery-products-product-price {
diff --git a/bin/javascript/init.js b/bin/javascript/init.js
index 1dddccb726c9c895328c66551b03e962a8932974..f96da1e47b53d0ad1280fea331174615b70a3a4d 100644
--- a/bin/javascript/init.js
+++ b/bin/javascript/init.js
@@ -10,6 +10,10 @@ window.addEvent('domready', function () {
initMobileMenu();
+ if (document.body.hasClass('type-quiqqer-products-types-category')) {
+ initExpandCategoryContent();
+ }
+
/**
* toTop button
*/
@@ -540,6 +544,82 @@ window.addEvent('domready', function () {
});
}
+ /**
+ * Show content of category site after click on button
+ */
+ function initExpandCategoryContent () {
+ var ButtonContainer = document.getElement('.quiqqer-category-content-button'),
+ Wrapper = document.getElement('.quiqqer-category-content-inner'),
+ Body = document.getElement('.quiqqer-category-content-inner-body'),
+ Bg = document.getElement('.quiqqer-category-content-inner-body__bg');
+
+ if (!ButtonContainer || !Wrapper || !Body) {
+ return;
+ }
+
+ var Button = ButtonContainer.getElement('button'),
+ realHeight = Body.getSize().y;
+
+ if (!Button) {
+ return;
+ }
+
+
+ if (Wrapper.getSize().y >= realHeight) {
+ // content is small, no button needed
+ Wrapper.setStyle('max-height', null);
+ Button.destroy();
+
+ if (Bg) {
+ Bg.destroy();
+ }
+
+ return;
+ }
+
+ (function () {
+ Button.setStyle('display', null);
+
+ moofx(Button).animate({
+ opacity: 1
+ }, {
+ duration: 200
+ });
+ }).delay(500);
+
+ Button.addEvent('click', function (event) {
+ event.stop();
+
+ moofx(Wrapper).animate({
+ maxHeight: realHeight
+ }, {
+ callback: function () {
+ moofx(ButtonContainer).animate({
+ opacity: 0
+ }, {
+ duration: 200,
+ callback: function () {
+ ButtonContainer.destroy();
+ }
+ });
+
+ if (Bg) {
+ moofx(Bg).animate({
+ opacity: 0
+ }, {
+ duration: 200,
+ callback: function () {
+ Bg.destroy();
+ }
+ });
+ }
+
+ Wrapper.setStyle('maxHeight', null);
+ }
+ });
+ });
+ }
+
// end region functions
});
diff --git a/locale.xml b/locale.xml
index 663ce3228f8c9aefa3051834054578e38e7abbe9..96196d47b08f335bf76ca800bff445035957bb98 100644
--- a/locale.xml
+++ b/locale.xml
@@ -361,6 +361,22 @@
<de><![CDATA[Nach der Produktbeschreibung anzeigen]]></de>
<en><![CDATA[Show after product description]]></en>
</locale>
+ <locale name="settings.shop.hideCategoryContent">
+ <de><![CDATA[Seiteninhalt auf Produktkategorie zum Teil verstecken]]></de>
+ <en><![CDATA[Partially hide content on product category site]]></en>
+ </locale>
+ <locale name="settings.shop.hideCategoryContent.desc">
+ <de><![CDATA[Wenn aktiviert, der Inhalt bekommt eine festgesetzte Höhe. Der Rest des Inhalts wird vorerst nicht sichtbar, bis der Benutzer auf den Button "Mehr anzeigen" klickt.]]></de>
+ <en><![CDATA[When enabled, the content gets a fixed height. The rest of the content will not be visible for now, until the user clicks the "Show more" button.]]></en>
+ </locale>
+ <locale name="settings.shop.categoryContentHeight">
+ <de><![CDATA[Maximale Höhe des Inhalts (Kategorie Seite)]]></de>
+ <en><![CDATA[Max content heigt of category site]]></en>
+ </locale>
+ <locale name="frontend.categoryContent.showMoreButton">
+ <de><![CDATA[Mehr anzeigen]]></de>
+ <en><![CDATA[Show more]]></en>
+ </locale>
<locale name="settings.shop.showEquipment">
<de><![CDATA[Zubehör auf Produktseite]]></de>
diff --git a/quiqqer/products/types/category.html b/quiqqer/products/types/category.html
index 1635d76472dc475bec1c53f0957249758489725f..0fdd7bbbf135f83a9e68223d46498220cc3c5d5c 100644
--- a/quiqqer/products/types/category.html
+++ b/quiqqer/products/types/category.html
@@ -137,9 +137,33 @@
{/if}
{if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
- <section class="content-body quiqqer-category-content">
- {$Site->getAttribute('content')}
- </section>
+ {*
+ Template setting: hide category content
+ *}
+ {if $Project->getConfig('templateCologne.settings.hideCategoryContent')}
+ {assign var=contentHeight value=80}
+ {if $Project->getConfig('templateCologne.settings.categoryContentHeight') > 0}
+ {assign var=contentHeight value=$Project->getConfig('templateCologne.settings.categoryContentHeight')}
+ {/if}
+ <section class="content-body quiqqer-category-content quiqqer-category-content__hidden">
+ <div class="quiqqer-category-content-inner" style="max-height: {$contentHeight}px;">
+ <div class="quiqqer-category-content-inner-body">
+ {$Site->getAttribute('content')}
+ <div class="quiqqer-category-content-inner-body__bg"></div>
+ </div>
+ </div>
+ <div class="quiqqer-category-content-button" >
+ <button class="btn btn-link" style="display: none; opacity: 0;">
+ {locale group='quiqqer/template-cologne' var='frontend.categoryContent.showMoreButton'}
+ <span class="fa fa-angle-down"></span>
+ </button>
+ </div>
+ </section>
+ {else}
+ <section class="content-body quiqqer-category-content">
+ {$Site->getAttribute('content')}
+ </section>
+ {/if}
{/if}
{$ProductList->create()}
diff --git a/settings.xml b/settings.xml
index 0ca960834f4765e77b8ce6650ccea1051223027f..b2beb35761f3fbe3a2a0051042955b7bde16e321 100644
--- a/settings.xml
+++ b/settings.xml
@@ -61,6 +61,13 @@
<type><![CDATA[string]]></type>
<defaultvalue>afterDesc</defaultvalue>
</conf>
+ <conf name="hideCategoryContent">
+ <type><![CDATA[bool]]></type>
+ </conf>
+ <conf name="categoryContentHeight">
+ <type><![CDATA[number]]></type>
+ <defaultvalue>80</defaultvalue>
+ </conf>
<!-- header -->
<conf name="headerStartPage">
@@ -451,6 +458,27 @@
/>
</option>
</select>
+
+ <input conf="templateCologne.settings.hideCategoryContent" type="checkbox">
+ <text>
+ <locale group="quiqqer/template-cologne"
+ var="settings.shop.hideCategoryContent"
+ />
+ </text>
+ <description>
+ <locale group="quiqqer/template-cologne"
+ var="settings.shop.hideCategoryContent.desc"
+ />
+ </description>
+ </input>
+
+ <input conf="templateCologne.settings.categoryContentHeight" type="number" min="0" max="500">
+ <text>
+ <locale group="quiqqer/template-cologne"
+ var="settings.shop.categoryContentHeight"
+ />
+ </text>
+ </input>
</settings>
<!-- header -->