 
 
{% comment -%}        
### Konfiguration der Sprache ###      
Mit der "JTL-Adept"-Vorlage haben Sie die Möglichkeit, ein und dieselbe 
Vorlage für mehrere Sprachen zu verwenden.
Die Sprache können Sie über das aktuelle eBay-Angebot ermitteln bzw. über
den Markplatz, auf dem dieses Angebot eingestellt ist. 
Dazu steht Ihnen die Variable {{ Vorgang.Sprache }} zur Verfügung.
{% endcomment -%}   
{% assign Sprache = Vorgang.Sprache -%}  
{% comment %}
Mit diesem Beipiel wird die Cross-Selling Gallerie eingebunden. Weitere Bespiele finden Sie in der EVO-Designvorlage
Verfügbare Kriterien: AnzahlVerkäufe, AuktionsTitel, Auktionsende, StartPreis, AngebotsTyp, InterneWarengruppennummer, Warengruppe
Hier wir die Gallerie eingebunden, hier am Bespiel der Cross-Selling Gallerie
{% endcomment %}
{% assign XSeller = Vorgang.Galerien.XSeller | ConfigureGallery : 'XSeller', 'AnzahlVerkäufe', true, 7 %}
<!--Hier beginnt die eingentliche Designvorlage-->
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </meta>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      </meta>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </meta> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      </meta>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>JTL eBay-template - Adpet</title>
      <!-- Hier wird/werden die CSS-Datei/en eingebunden. Diese können auch auf einem anderen Server verweisen. Wichtig ist nur, dass diese in https-Verschlüsselung erstellt sind. -->
      <link href="https://static.jtl-software.de/ebay-template/css/bootstrap.css" type="text/css" rel="stylesheet" media="all" />
      <link rel="stylesheet" type="text/css" href="styles.css"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
   </head>
   <body> 
      <header>
         <div class="container-fluid">
            <div class="row">
               <div class="col-sm-12 col-md-12 col-lg-12">
                  <!-- Hier wird das Logo eingebunden -->
                  <div class="logo">
                     <img src="https://www.beautek.de/gfx/beautek-ebay-shop-logo.jpg" alt="Beautek Shop Logo" title="Beautek Shop Logo">
                  </div>
               </div>
            </div>
            <div class="row">
               <nav class="clearfix">
                  <div class="col-sm-12 col-md-12 col-lg-12">
                     <ul>
                        <!-- Hier wird die obere Navigationsleiste eingebunden (eBayShop, MichSeite, Bewertungen, Weitere Auktionen -->
                        <li><a href="https://www.ebay.de/str/beautekderkosmetikgrosshandel" target="blank" title="eBay Shop">{{ GlobaleTexte.JTL-Übersetzungen.Ebay-Shop | SelectLanguage: Sprache }}</a></li>
                        <li><a href="{{ Vorgang.Link.MichSeite }}" target="blank" title="Profil">{{ GlobaleTexte.JTL-Übersetzungen.MichSeite | SelectLanguage: Sprache }}</a></li>
                        <li><a href="{{ Vorgang.Link.EigeneBewertungen }}" target="blank" title="Bewertungen">{{ GlobaleTexte.JTL-Übersetzungen.Bewertungsprofil | SelectLanguage: Sprache }}</a></li>
                        <li><a href="{{ Vorgang.Link.WeitereAuktionen }}" target="blank" title="Weitere Auktionen">{{ GlobaleTexte.JTL-Übersetzungen.Weitere-Auktionen | SelectLanguage: Sprache }}</a></li>
                     </ul>
                  </div>
               </nav>
            </div>
         </div>
      </header>
      <!-- Slider-Anfang -->
      <div id="content">
      <section class="banner border-bottom">
         <div class="cssSlider">
            <!-- Max. 3 Slides -->
            <input type="radio" name="slider" id="slide01" checked="checked">
            <input type="radio" name="slider" id="slide02">
            <input type="radio" name="slider" id="slide03">
            <ul class="sliderElements">
               <!-- Hier werden jetzt die Bilder der Slides eingefügt -->
               <li>
                  <figure>
                     <img src="http://www.beautek.de/gfx/slide-1.jpg" alt="">
                  </figure>
               </li>
               <li>
                  <figure>
                     <img src="http://www.beautek.de/gfx/slide-2.jpg" alt="">
                  </figure>
               </li>
               <li>
                  <figure>
                     <img src="http://www.beautek.de/gfx/slide-3.jpg" alt="">
                  </figure>
               </li>
            </ul>
            <!-- Autoplay oder sliderControls -->
            <!-- Max. 3 Slides -->
         </div>
      </section>
      <!--Slider Ende -->       
      <!--Rest Anfang -->
      <section class="bg-white">
         <div class="container">
            <div class="row">
               <div class="col-sm-12 col-md-8 col-lg-9 pull-right">
                  <h1 class="h3 thin">{{ Vorgang.Artikel.Beschreibung.Artikelname | SelectLanguage: Sprache }}</h1>
                  <div class="row">
                     <div class="col-sm-12 col-md-7">
                        <!--Hier wird die Bildergalerie eingebunden -->
                        {% assign existiertZweitesBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: 2 -%}
                        <div class="gallery">
                           <input name="gallery_switch" id="id1" checked="checked" type="radio">
                           <div class="item">
                              <img src="{{ Vorgang.Bilder.Dateiname.Bild01 | Groesse: 360,360}}">
                           </div>
                           {% if existiertZweitesBild -%}
                           <!-- Hier wird die Anzahl der Bilder festgelegt-->
                           {% for i in (2..5) %}
                           {% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: i -%}
                           {% if existiertBild -%}
                           <input name="gallery_switch" id="id{{ i }}" type="radio">
                           <div class="item">
                              <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 360,360}}">
                           </div>
                           {% endif -%}
                           {% endfor -%}
                           {% endif -%}
                        </div>
                        {% if existiertZweitesBild -%}
                        <div class="thumbnails">
                           <!-- Hier wird die Anzahl der Bilder für die Thumbnails festgelegt.-->    
                           {% for i in (1..5) %}
                           {% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: i -%}
                           {% if existiertBild -%}                                          
                           <div class="thumbnail-wrapper">
                              <div class="thumbnail-item">
                                 <label border="1" for="id{{ i }}">
                                 <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 75, 75}}">
                                  </label>
                              </div>
                           </div>
                           {% endif -%}
                           {% endfor -%}
                        </div>
                        {% endif -%}
                        <!--Ende Bildgalerie -->
                     </div>
                     <div class="col-sm-12 col-md-5 col-lg-5">
                        <p>{{ Vorgang.Artikel.Beschreibung.Kurzbeschreibung | SelectLanguage: Sprache }}</p>
                        <!--Hier wird der Preis des Artikes eingetragen. Bitte beachten Sie hierbei bitte, dass dieser nur dann aktualisiert wird -->
                        <!--wenn die das Angebot mit der Option "Bilder & Beschreibungen aktualisieren" aktualisiert wird.-->
                        <div class="price">
                           <span>{{ Vorgang.Preis | Nummer: "F2" | Render }} {{ Vorgang.Währung }}</span> inkl. MwSt. 
                        </div>
                     </div>
                  </div>
                  <div class="tabs">
                     <input name="tabs" id="tab1" checked="" type="radio">
                     <label for="tab1">{{ GlobaleTexte.JTL-Übersetzungen.Beschreibung | SelectLanguage: Sprache }}</label>
                     <input name="tabs" id="tab2" type="radio">
                     <label for="tab2">{{ GlobaleTexte.JTL-Übersetzungen.Hinweis | SelectLanguage: Sprache }}</label>
                     <!-- Max. 4 Tabs -->
                     <div id="tab-content1">
                        <div class="animiert scale">
                           <div class="tabcontent">
                              <p>{{Vorgang.Artikel.Beschreibung.Beschreibung | SelectLanguage: Sprache }}</p>
                           </div>
                        </div>
                     </div>
                     <div id="tab-content2">
                        <div class="animiert scale">
                           <div class="tabcontent">
                              <p>{{ GlobaleTexte.JTL-Designvorlagen.Hinweis | SelectLanguage: Sprache | Render }}</p>
                           </div>
                        </div>
                     </div>
                     <!-- Max. 4 Tabs -->
                  </div>
               </div>
               <div class="col-sm-12 col-md-4 col-lg-3 pull-left">
                  <div class="well well-small">
                     <div class="headline">
                        <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Kategorien | SelectLanguage: Sprache }}</h4>
                     </div>
                     <hr>
                     <div class="small-list shop-category">
                     <!--Hier werden die Shopkategorien eingebunden -->
                     {{ GlobaleTexte.JTL-Designvorlagen.Shop-Kategorien | SelectLanguage: Sprache | Render }}   
                     <!--Ende Shop-Kategorien -->
                     </div>
                  </div>
                  <div class="well well-small">
                     <div class="headline">
                        <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Ihre-Vorteile | SelectLanguage: Sprache }}</h4>
                     </div>
                     <hr>
                     <div class="small-list advantages-list">
                        {{ GlobaleTexte.JTL-Designvorlagen.Ihre-Vorteile | SelectLanguage: Sprache }} 
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Rest Ende -->  
      <!-- Hier werden die Gallerien eingebunden, Hier am Beispiel der Cross-Selling Galerie. Weitere Beispiele befinden sich in der EVO-Desingvorlage-->
      <section class="bg-ebaygray">
         <div class="container">
            <div class="row">
               <div class="col-sm-12 col-md-12 col-lg-12">
                  <h3 class="thin">{{ GlobaleTexte.Übersetzungen.GalerieTitelX-Seller | SelectLanguage: Sprache }}</h3>
               </div>
               {{ XSeller | LoadItems }}
               {% assign XSellerIsFilled = XSeller | IsFilled -%}
               {% if XSellerIsFilled -%}
               {% for item in XSeller -%}
               {% assign Titel = item.Titel -%}
               {% assign BildURL = item.BildURL -%}
               {% assign AuktionsURL = item.AuktionsURL -%}
               {% comment -%}
               Mögliche URLs: 
               item.AuktionsURL: Direkt-Link zu der Auktion
               item.SearchEbayURL: Löst eine Suche nach diesem Artikel in Ebay aus
               item.SearchShopURL: Löst eine Suche nach diesem Artikel in ihrem eigenen Ebay-Shop aus
               {% endcomment -%} 
               {% assign SearchShopURL = item.SearchShopURL -%}
               {% assign SearchEbayURL = item.SearchEbayURL -%}
               {% assign SearchAuktionsURL = item.SearchShopURL -%}
               {% assign Untertitel = item.Untertitel -%}
               {% assign NummerFormat = GlobaleTexte.Übersetzungen.NummerFormat | SelectLanguage : Vorgang.Sprache -%}
               {% assign Preis = item.Preis | Nummer: 'N2', NummerFormat -%}
               {% if item.AngebotsTyp == 'FixedPriceItem' -%}                
               {% assign AngebotsTyp = GlobaleTexte.Übersetzungen.SofortKauf | SelectLanguage : Vorgang.Sprache  -%}
               {% else -%}                
               {% assign AngebotsTyp = GlobaleTexte.Übersetzungen.Auktion | SelectLanguage : Vorgang.Sprache  -%}
               {% endif -%}
               <div class="col-xs-6 col-sm-6 col-md-4 col-lg-2">
                  <div class="cross-selling">
                     <a href="{{ AuktionsURL }}" title="" target="_blank">
                        <img src="{{ BildURL }}"  width="50%" "">
                        <p>{{ Titel | Truncate: 22 }}</p>
                        <span>{{ Preis }} {{ Vorgang.Währung }}</span>
                        <p>{{ AngebotsTyp }}</p>
                     </a>
                  </div>
               </div>
               {% endfor -%}
               {% endif -%} 
            </div>
      </section>
      <!-- Ende Gallerie -->  
      <section class="bg-darkschachtblau bg-ebayfooter footer">
      <!-- Hier kommt der Footer rein -->
      <div class="container">
      <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Versand | SelectLanguage: Sprache }}</h4>
      {{ GlobaleTexte.JTL-Designvorlagen.Versand | SelectLanguage: Sprache }}
      <!-- Hier haben Sie die Möglichkeit, beispielsweise Bilder Ihres Versanddienstleisters einzubinden-->
      <ul class="logo-list">
      <li><img src="https://www.beautek.de/gfx/dsv-versand.png" alt="DSV Spedition - nur bis Bordsteinkante ohne Warenabtragung."></li>
      <li><img src="https://www.beautek.de/gfx/dpd-versand.png" alt="dpd Paketversand innerhalb Deutschland."></li>
      <li><img src="https://www.beautek.de/gfx/dhl-versand.png" alt="DHL Paketversand Europaweit"></li>
      </ul>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Über-Uns | SelectLanguage: Sprache }}</h4>
      {{ GlobaleTexte.JTL-Designvorlagen.Über_Uns | SelectLanguage: Sprache }}
      </div>
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Ebay-Shop | SelectLanguage: Sprache }}</h4>
      {{ GlobaleTexte.JTL-Designvorlagen.Ebay-Shop | SelectLanguage: Sprache }}
      </div>
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <h4 class="h5 thin">{{ GlobaleTexte.JTL-Übersetzungen.Zahlung | SelectLanguage: Sprache }}</h4>
      {{ GlobaleTexte.JTL-Designvorlagen.Zahlung | SelectLanguage: Sprache }}
      </div> 
      </div>
      </div>
      </section>
      <!--Footer Ende -->
      <!--Bereich unterhalb Footer--> 
      <section class="bg-darkschachtblau bg-ebaydarkfooter footer-small">
      <div class="container">
      <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <!-- Hier haben Sie die Möglichkeit, beispielsweise Bilder Ihrer akzeptierten Zahlungsarten zu hinterlegen-->
      <ul class="logo-list">
      <li><img src="https://www.beautek.de/gfx/barzahlung-bei-abholung.png" alt="Barzahlung bei Abholung."></li>
      <li><img src="https://www.beautek.de/gfx/nachnahme.png" alt="Bequem per Nachnahme bezahlen."></li>
      <li><img src="https://www.beautek.de/gfx/paypal.png" alt="Schnell und sicher mit PayPal bezahlen."></li>
      <li><img src="https://www.beautek.de/gfx/visa-mastercard.png" alt="Bezahlen Sie mit Ihrer Visa/Mastercard Kreditkarte."></li>
      <li><img src="https://www.beautek.de/gfx/vorkasse-ueberweisung.png" alt="Bequem per Vorkasse bezahlen."></li>
      </ul>
      </div>
      </div>
      </div> 
      </section>
      <!--Ende Bereich unterhalb Footer--> 
      </div>
   </body>
</html>
