Merge pull request #443 from commercetools/adapt-cms

Apply CMS structure changes

input/i18n/de/cms.yaml

@@ -1,68 +1,58 @@
-bannerTopLeft:
+banners[0]:
   title: Sommer Essentials
   subtitle: Die wichtigsten Stücke des Sommer Trends 2016
-  linkText: Jetzt bestellen
-  linkHref: pop.html?c=tl
-  imageSmall: ../../assets/img/cms/leather1_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/leather1_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/leather1_large-4to3.jpg
+  linkLabel: Jetzt bestellen
+  link: /de/men
+  backgroundImage: ../../assets/img/cms/leather1-4to3.jpg
 
-bannerTopRight:
+banners[1]:
   title: Sommer Fashion
   subtitle: Beste Outfits für die Saison
-  linkText: Jetzt bestellen
-  linkHref: pop.html?c=tr
-  imageSmall: ../../assets/img/cms/woman1_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/woman1_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/woman1_large-4to3.jpg
+  linkLabel: Jetzt bestellen
+  link: /de/women
+  backgroundImage: ../../assets/img/cms/woman1-4to3.jpg
 
-bannerMiddle:
-  title: <img class="hidden-xs" src="../../assets/img/cms/sun-logo.png"/><br/><br/>Here comes the sun
-  subtitle: URLAUB IN DER SONNE - SOMMER CHIC
+banners[2]:
+  title: Here comes the sun
+  subtitle: FABULOUS EVERY DAY - SUMMER CHIC
   description: Die Modetrends für den Sommer 2016 spielen mit Prints, Army- und Safarilooks sowie Pastel Farben. Accessoires wie runde Sonnenbrillen, geschnürte Stiefel und Shopper oder Handtaschen sorgen für Abwechslung. SUNRISE stellt Ihnen die Fashion Trends für den Sommer 2016 vor. Lassen Sie sich inspirieren!<br/><br/>Kaum ist der Frühling vorbei, umfängt uns der warme Sommer. Erfahren Sie, was die wichtigsten Fashion - Trends der kommenden Sommersaison sind und welche traumhaften Stücke Sie besitzen sollen! London, New York, Mailand, Paris – SUNRISE präsentiert die aktuelle Sommermode 2016 aus den Modemetropolen . Die neuesten Kleider, elegante Tops, Hosen, Bademode, exklusive Schuhe und Ballerinas, bezaubernden Schmuck, Sonnenbrillen und Accessoires für den perfekten Sommer.
-  linkText: Jetzt kaufen
-  linkHref: pop.html?c=m
-  imageSmall: ../../assets/img/cms/man1_small-8to3.jpg
-  imageMedium: ../../assets/img/cms/man1_medium-8to3.jpg
-  imageLarge: ../../assets/img/cms/man1_large-8to3.jpg
+  linkLabel: Jetzt kaufen
+  link: /de/men-clothing-shirts
+  backgroundImage: ../../assets/img/cms/man1-8to3.jpg
 
-bannerBottomLeft:
+banners[3]:
   title: Einzigartige Stücke für jede Saison
   subtitle: Lassen Sie sich inspirieren
-  linkText: Jetzt kaufen
-  linkHref: pop.html?c=bl
-  imageSmall: ../../assets/img/cms/shoes_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/shoes_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/shoes_large-4to3.jpg
+  linkLabel: Jetzt kaufen
+  link: /de/women-shoes
+  backgroundImage: ../../assets/img/cms/shoes-4to3.jpg
 
-bannerBottomRight1:
-  title: <img src="../../assets/img/cms/sun-logo.png"/><br/><br/>SOMMER MODE 2016
-  imageSmall: ../../assets/img/cms/blue-bg_small-4to3.png
-  imageMedium: ../../assets/img/cms/blue-bg_medium-4to3.png
-  imageLarge: ../../assets/img/cms/blue-bg_large-4to3.png
+banners[4]:
+  title: SOMMER MODE 2016
+  backgroundImage: ../../assets/img/cms/blue-bg-4to3.png
 
-bannerBottomRight2:
+banners[5]:
   title: Sonnenbrillen-Trends 2016
   subtitle: Unsere Fashion Must-Haves
-  linkText: Jetzt kaufen
-  linkHref: pop.html?c=br2
-  imageSmall: ../../assets/img/cms/sunglass_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/sunglass_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/sunglass_large-4to3.jpg
+  linkLabel: Jetzt kaufen
+  link: /de/accessories-women-sunglasses
+  backgroundImage: ../../assets/img/cms/sunglass-4to3.jpg
 
-bannerBottomRight3:
+banners[6]:
   title: Hauptsache überdimensional
   subtitle: Trendy Sommer 2016 - Auffällige Sonnenbrillen
-  linkText: Jetzt bestellen
-  linkHref: pop.html?c=br3
-  imageSmall: ../../assets/img/cms/woman_small-8to3.jpg
-  imageMedium: ../../assets/img/cms/woman_medium-8to3.jpg
-  imageLarge: ../../assets/img/cms/woman_large-8to3.jpg
+  linkLabel: Jetzt bestellen
+  link: /de/women-clothing-dresses
+  backgroundImage: ../../assets/img/cms/woman-8to3.jpg
 
 suggestions:
   title: Unsere Empfehlungen
   subtitle: Sommer Must-Haves 2016
 
 viewProducts:
-  linkText: Alle Produkte ansehen
-  linkHref: pop.html?c=all
+  linkText: View all new products
+  linkHref: new
+
+header:
+  shopName: Sunrise
+  shopLogo: ../../assets/img/cms/logo.svg

input/i18n/en/cms.yaml

@@ -1,68 +1,58 @@
-bannerTopLeft:
+banners[0]:
   title: Summer Essentials
   subtitle: Make the great day happen
-  linkText: Shop collection
-  linkHref: pop.html?c=tl
-  imageSmall: ../../assets/img/cms/leather2_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/leather2_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/leather2_large-4to3.jpg
+  linkLabel: Shop collection
+  link: /en/men
+  backgroundImage: ../../assets/img/cms/leather2-4to3.jpg
 
-bannerTopRight:
+banners[1]:
   title: Summer Lovin'
   subtitle: Summer must have outfits
-  linkText: Shop collection
-  linkHref: pop.html?c=tr
-  imageSmall: ../../assets/img/cms/woman2_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/woman2_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/woman2_large-4to3.jpg
+  linkLabel: Shop collection
+  link: /en/women
+  backgroundImage: ../../assets/img/cms/woman2-4to3.jpg
 
-bannerMiddle:
-  title: <img class="hidden-xs" src="../../assets/img/cms/sun-logo.png"/><br/><br/>Here comes the sun
+banners[2]:
+  title: Here comes the sun
   subtitle: FABULOUS EVERY DAY - SUMMER CHIC
   description: Between rising temperature outside and cool A/C inside, dressing for the  the summer can be a tricky business. Luckily, we pulled together the most inspiring looks for. Check out our must-to-have-it pieces.<br/><br/>The weather is heating up, but you don’t have the right outfit yet. Thankfully, we are here to help you out. Spring break is upon us and it's essential to migrate. So whether you're jetting off to Ibiza or Majorca for a party vacation or getting away to greener pastures - here are the fashion pieces we'll be stashing in our favorite getaway bags.
-  linkText: Shop collection
-  linkHref: pop.html?c=m
-  imageSmall: ../../assets/img/cms/man2_small-8to3.jpg
-  imageMedium: ../../assets/img/cms/man2_medium-8to3.jpg
-  imageLarge: ../../assets/img/cms/man2_large-8to3.jpg
+  linkLabel: Shop collection
+  link: /en/men-clothing-shirts
+  headerImage: ../../assets/img/cms/sun-logo.png
+  backgroundImage: ../../assets/img/cms/man2-8to3.jpg
 
-bannerBottomLeft:
+banners[3]:
   title: Unique style for every season
   subtitle: Fashion styles 2016
-  linkText: Shop collection
-  linkHref: pop.html?c=bl
-  imageSmall: ../../assets/img/cms/shoes_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/shoes_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/shoes_large-4to3.jpg
+  linkLabel: Shop collection
+  link: /en/women-shoes
+  backgroundImage: ../../assets/img/cms/shoes-4to3.jpg
 
-bannerBottomRight1:
-  title: <img src="../../assets/img/cms/sun-logo.png"/><br/><br/>SUMMER FASHION 2016
-  imageSmall: ../../assets/img/cms/blue-bg_small-4to3.png
-  imageMedium: ../../assets/img/cms/blue-bg_medium-4to3.png
-  imageLarge: ../../assets/img/cms/blue-bg_large-4to3.png
+banners[4]:
+  title: SUMMER FASHION 2016
+  headerImage: ../../assets/img/cms/sun-logo.png
+  backgroundImage: ../../assets/img/cms/blue-bg-4to3.png
 
-bannerBottomRight2:
+banners[5]:
   title: Trendy Sunglasses
   subtitle: Accessories for the perfect summer
-  linkText: Shop collection
-  linkHref: pop.html?c=br2
-  imageSmall: ../../assets/img/cms/sunglass_small-4to3.jpg
-  imageMedium: ../../assets/img/cms/sunglass_medium-4to3.jpg
-  imageLarge: ../../assets/img/cms/sunglass_large-4to3.jpg
+  linkLabel: Shop collection
+  link: /en/accessories-women-sunglasses
+  backgroundImage: ../../assets/img/cms/sunglass-4to3.jpg
 
-bannerBottomRight3:
+banners[6]:
   title: Must to have it
   subtitle: Hot pieces for the summer
-  linkText: Shop collection
-  linkHref: pop.html?c=br3
-  imageSmall: ../../assets/img/cms/woman_small-8to3.jpg
-  imageMedium: ../../assets/img/cms/woman_medium-8to3.jpg
-  imageLarge: ../../assets/img/cms/woman_large-8to3.jpg
+  linkLabel: Shop collection
+  link: /en/women-clothing-dresses
+  backgroundImage: ../../assets/img/cms/woman-8to3.jpg
 
 suggestions:
   title: Get beach ready
   subtitle: Get your sun on
+  linkLabel: View all new products
+  link: /en/new
 
-viewProducts:
-  linkText: View all new products
-  linkHref: pop.html?c=all
+header:
+  shopName: Sunrise
+  shopLogo: ../../assets/img/cms/logo.svg

input/templates/partials/catalog/home/banner-bottom-left.hbs

@@ -1,15 +1,15 @@
 <div class="aspect-ratio aspect-ratio--4to3">
   <picture>
-    <source srcset="{{cms "bannerBottomLeft.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerBottomLeft.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerBottomLeft.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[3].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[3].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[3].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
-  <h4 class="banner-title">{{{cms "bannerBottomLeft.title"}}}</h4>
-  <p class="banner-paragraph">{{{cms "bannerBottomLeft.subtitle"}}}</p>
-  <a href="{{cms "bannerBottomLeft.linkHref"}}" class="btn banner-btn">
-    {{cms "bannerBottomLeft.linkText"}}
+  <h4 class="banner-title">{{{cms "banners[3].title"}}}</h4>
+  <p class="banner-paragraph">{{{cms "banners[3].subtitle"}}}</p>
+  <a href="{{cms "banners[3].link"}}" class="btn banner-btn">
+    {{cms "banners[3].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/banner-bottom-right-1.hbs

@@ -1,11 +1,12 @@
 <picture>
-  <source srcset="{{cms "bannerBottomRight1.imageLarge"}}" media="(min-width: 1200px)">
-  <source srcset="{{cms "bannerBottomRight1.imageMedium"}}" media="(min-width: 768px)">
-  <img src="{{cms "bannerBottomRight1.imageSmall"}}" class="img-responsive">
+  <source srcset="{{cms "banners[4].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+  <source srcset="{{cms "banners[4].backgroundImage" width="992"}}" media="(min-width: 768px)">
+  <img src="{{cms "banners[4].backgroundImage" width="768"}}" class="img-responsive">
 </picture>
 
 <div class="banner-text">
   <h4 class="banner-title">
-    {{{cms "bannerBottomRight1.title"}}}
+      <img src="{{cms "banners[4].headerImage"}}"/><br/><br/>
+      {{{cms "banners[4].title"}}}
   </h4>
-</div>
+</div>

input/templates/partials/catalog/home/banner-bottom-right-2.hbs

@@ -1,15 +1,15 @@
 <div class="aspect-ratio aspect-ratio--4to3">
   <picture>
-    <source srcset="{{cms "bannerBottomRight2.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerBottomRight2.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerBottomRight2.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[5].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[5].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[5].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
-  <h4 class="banner-title">{{{cms "bannerBottomRight2.title"}}}</h4>
-  <p class="banner-paragraph">{{{cms "bannerBottomRight2.subtitle"}}}</p>
-  <a href="{{cms "bannerBottomRight2.linkHref"}}" class="btn banner-btn">
-    {{cms "bannerBottomRight2.linkText"}}
+  <h4 class="banner-title">{{{cms "banners[5].title"}}}</h4>
+  <p class="banner-paragraph">{{{cms "banners[5].subtitle"}}}</p>
+  <a href="{{cms "banners[5].link"}}" class="btn banner-btn">
+    {{cms "banners[5].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/banner-bottom-right-3.hbs

@@ -1,15 +1,15 @@
 <div class="aspect-ratio aspect-ratio--8to3">
   <picture>
-    <source srcset="{{cms "bannerBottomRight3.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerBottomRight3.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerBottomRight3.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[6].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[6].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[6].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
-  <h4 class="banner-title">{{{cms "bannerBottomRight3.title"}}}</h4>
-  <p class="banner-paragraph">{{{cms "bannerBottomRight3.subtitle"}}}</p>
-  <a href="{{cms "bannerBottomRight3.linkHref"}}" class="btn banner-btn">
-    {{cms "bannerBottomRight3.linkText"}}
+  <h4 class="banner-title">{{{cms "banners[6].title"}}}</h4>
+  <p class="banner-paragraph">{{{cms "banners[6].subtitle"}}}</p>
+  <a href="{{cms "banners[6].link"}}" class="btn banner-btn">
+    {{cms "banners[6].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/banner-middle.hbs

@@ -1,18 +1,20 @@
 <div class="aspect-ratio aspect-ratio--8to3">
   <picture>
-    <source srcset="{{cms "bannerMiddle.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerMiddle.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerMiddle.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[2].backgroundImage" width="1499"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[2].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[2].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
   <h4 class="banner-title">
-    {{{cms "bannerMiddle.title"}}}
+    <img class="hidden-xs" src="{{cms "banners[2].headerImage"}}"/>
+    <br/><br/>
+    {{{cms "banners[2].title"}}}
   </h4>
-  <p class="banner-subtitle">{{{cms "bannerMiddle.subtitle"}}}</p>
-  <p class="hidden-xs hidden-sm">{{{cms "bannerMiddle.description"}}}</p>
-  <a class="btn banner-btn" href="{{cms "bannerMiddle.linkHref"}}">
-    {{cms "bannerMiddle.linkText"}}
+  <p class="banner-subtitle">{{{cms "banners[2].subtitle"}}}</p>
+  <p class="hidden-xs hidden-sm">{{{cms "banners[2].description"}}}</p>
+  <a class="btn banner-btn" href="{{cms "banners[2].link"}}">
+    {{cms "banners[2].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/banner-top-left.hbs

@@ -1,15 +1,15 @@
 <div class="aspect-ratio aspect-ratio--4to3">
   <picture>
-    <source srcset="{{cms "bannerTopLeft.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerTopLeft.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerTopLeft.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[0].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[0].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[0].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
-  <h4 class="banner-title">{{{cms "bannerTopLeft.title"}}}</h4>
-  <p class="banner-paragraph">{{{cms "bannerTopLeft.subtitle"}}}</p>
-  <a href="{{cms "bannerTopLeft.linkHref"}}" class="btn banner-btn">
-    {{cms "bannerTopLeft.linkText"}}
+  <h4 class="banner-title">{{{cms "banners[0].title"}}}</h4>
+  <p class="banner-paragraph">{{{cms "banners[0].subtitle"}}}</p>
+  <a href="{{cms "banners[0].link"}}" class="btn banner-btn">
+    {{cms "banners[0].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/banner-top-right.hbs

@@ -1,15 +1,15 @@
 <div class="aspect-ratio aspect-ratio--4to3">
   <picture>
-    <source srcset="{{cms "bannerTopRight.imageLarge"}}" media="(min-width: 1200px)">
-    <source srcset="{{cms "bannerTopRight.imageMedium"}}" media="(min-width: 768px)">
-    <img src="{{cms "bannerTopRight.imageSmall"}}" class="img-responsive">
+    <source srcset="{{cms "banners[1].backgroundImage" width="1200"}}" media="(min-width: 1200px)">
+    <source srcset="{{cms "banners[1].backgroundImage" width="992"}}" media="(min-width: 768px)">
+    <img src="{{cms "banners[1].backgroundImage" width="768"}}" class="img-responsive">
   </picture>
 </div>
 
 <div class="banner-text">
-  <h4 class="banner-title">{{{cms "bannerTopRight.title"}}}</h4>
-  <p class="banner-paragraph">{{{cms "bannerTopRight.subtitle"}}}</p>
-  <a href="{{cms "bannerTopRight.linkHref"}}" class="btn banner-btn">
-    {{cms "bannerTopRight.linkText"}}
+  <h4 class="banner-title">{{{cms "banners[1].title"}}}</h4>
+  <p class="banner-paragraph">{{{cms "banners[1].subtitle"}}}</p>
+  <a href="{{cms "banners[1].link"}}" class="btn banner-btn">
+    {{cms "banners[1].linkLabel"}}
   </a>
-</div>
+</div>

input/templates/partials/catalog/home/view-products-link.hbs

@@ -1,4 +1,4 @@
-<a href="{{cms "viewProducts.linkHref"}}" class="home-viewall-btn">
-  {{cms "viewProducts.linkText"}}
+<a href="{{cms "suggestions.link"}}" class="home-viewall-btn">
+  {{cms "suggestions.linkLabel"}}
 </a>
-<hr class="home-viewall-hr">
+<hr class="home-viewall-hr">