TEMPLATE: Bootstrap4 für Shop 2.x - freies responsive Template

[hpzeller]

Hallo Freunde des Bootstrap4 Templates

Wenn ich die Artikel-Popupbilder im Bootstrap4 Templates mit denen des Bootstrap3 Templates vergleiche, kann ich eigentlich keinen grossen Unterschied feststellen. In beiden Modals werden z.B. hochformatige Bilder manchmal nicht in ganzer Höhe angezeigt, man muss dann scrollen. Diese Unschönheit wurde aber im Bootstrap3 Template, soviel mir bekannt ist, nie reklamiert. Nichtsdestotrotz habe ich eine alternative Lightbox für Bilder nämlich diese -> https://github.com/sachinchoolur/lightGallery für das Bootstrap4 Template zum testen adaptiert.

Wer sie testen möchte kann einfach in der Datei templates/bootstrap4/javascript/general_bottom.js.php ganz am Ende folgenden Code einfügen.

Code: PHP  [Auswählen]

<?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO) && !empty($productDataArray[PRODUCTS_IMAGE])) { ?>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
  $(document).ready(function(){
    $('.easyzoom-link').removeAttr('data-image-id data-toggle data-title data-image data-target href').attr('id', 'dynamic').css('cursor', 'pointer');
    $('#dynamic').on('click', function() {  
      $(this).lightGallery({
          thumbnail: false,
          animateThumb: false,
          showThumbByDefault: false,    
          download: false,
          dynamic: true,
          dynamicEl: [{
              'src': '<?php echo str_replace('info_images', 'popup_images', $productDataArray[PRODUCTS_IMAGE]) ?>',
              'thumb': '<?php echo str_replace('info_images', 'thumbnail_images', $productDataArray[PRODUCTS_IMAGE]) ?>',
              'subHtml': '<h4><?php echo $productDataArray[PRODUCTS_NAME] ?></h4>'
          <?php
          $i = 0;
          $len = count($more_images_data);                                      
          echo $len > 0 ? '}, {' . PHP_EOL : '}]' . PHP_EOL;
          foreach($more_images_data as $value) { ?>
              'src': '<?php echo str_replace('info_images', 'popup_images', $value[PRODUCTS_IMAGE]) ?>',
              'thumb': '<?php echo str_replace('info_images', 'thumbnail_images', $value[PRODUCTS_IMAGE]) ?>',
              'subHtml': '<h4><?php echo $productDataArray[PRODUCTS_NAME] ?></h4>'
          <?php
            echo ($i == $len - 1) ? '}]' . PHP_EOL : '}, {' . PHP_EOL;
            $i++;
          } ?>
      })  
    });
  });
</script>
<?php
}
?>
 

Voraussetzung ist, dass in der Datei templates/bootstrap4/config/config.php folgende Definition auf true steht.

Code: PHP  [Auswählen]

    // EasyZoom
    defined('BS4_USE_EASYZOOM') or define('BS4_USE_EASYZOOM', true); // EasyZoom in der Produkt-Info-Ansicht verwenden = true, ansonsten false
 

So etwas sollte danach angezeigt werden.

[ Für Gäste sind keine Dateianhänge sichtbar ]

PS:
Beim Bootstrap3 Template funktioniert obiger Code auch, man muss aber folgende Codezeile

Code: PHP  [Auswählen]

$('.easyzoom-link').removeAttr('data-image-id data-toggle data-title data-image data-target href').attr('id', 'dynamic').css('cursor', 'pointer');
 

mit dieser ersetzen

Code: PHP  [Auswählen]

$('.cloud-zoom-link').removeAttr('data-image-id data-toggle data-title data-image data-target href').attr('id', 'dynamic').css('cursor', 'pointer');
 

und in der Datei templates/bootstrap3/config/config.php muss folgende Definition auf true steht.

Code: PHP  [Auswählen]

  // Cloud Zoom
  define('USE_CLOUD_ZOOM', true); // Cloud Zoom in der Produkt-Info-Ansicht verwenden = true, ansonsten false
 

Gruss
Hanspeter

[Timm]

Auch bei quadratischen Bildern musste man auf dem Laptop scrollen. Karl hat da aber schon eine Lösung für, die er mir zum testen geschickt hatte und die sicher die Tage hier erscheint. Dort wurde auch die kurz zuklappende Modalbox gefixed beim Wechseln auf das nächste Bild.

Bei den Vorschaubildern gibts aber noch weitere unschöne Effekte. Unten in der Vorschau ist das erste ein info_image und alle weiteren sind thumbnail_images. Dadurch ist das erste bei mir kleiner.

Außerdem ist bei den oberen und den unteren Vorschaubildern (sobald man soviele Bilder hat, das eine zweite Reihe entsteht), keine Lücke zwischen den Reihen. Hab ich Karl aber auch geschrieben. Denke das wird dann alles mit einmal gefixed.

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

[Karl1]

Hallo Zusammen,
anbei das aktuelle Paket.

Danke an alle, die hier helfen das Template zu verbessern - besonders an Timm!

Gruß Karl

[EDIT Tomcraft 28.04.2019: Template in Beitrag 1 aktualisiert.]

[Karl1]

Hallo Hanspeter "hpzeller",
mit der lightGallery bin ich mir nicht sicher, ob du die empfehlen solltest.

Laut der Lizenzbeschreibung bei Github wäre ich der Meinung, dass man das Programm kostenlos nutzen kann.
Die Beschreibung auf der Homepage des Programmierers unterscheidet sich aber etwas.

Auf der Homepage steht:

lightGallery is a free and open-source library, however, if you are using the library for business, commercial sites, themes, projects, and applications, the Commercial license is the appropriate license...

Ich bin kein Anwalt, aber ich würde die Bibliothek nicht einsetzen.

Gruß Karl

[hpzeller]

Hallo Karl,

danke für den Hinweis. Die Formulierung bezüglich der Lizenzierung ihres Plugins auf ihrer Website ist widersprüchlich, einerseits veröffentlichen sie ihr Plugin kostenlos unter GPLv3 welche eine kommerzielle Nutzung ja explizit zulässt und andererseits wollen sie das man eine Lizenz kauft wenn man das Plugin in einer kommerziellen Site nutzt. Ich denke, so wie du, wenn die sich so kapriziös bezüglich der Lizenzierung ihres Plugins ausdrücken, sollte man wohl besser auf die Nutzung verzichten.

PS:
Wenn man das Plugin via CDN -> https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.js einbindet, steht im Kopf folgendes:

Code: Javascript  [Auswählen]

/*! lightgallery - v1.6.12 - 2019-02-19
* http://sachinchoolur.github.io/lightGallery/
* Copyright (c) 2019 Sachin N; Licensed GPLv3 */
/*! lightgallery - v1.6.12 - 2019-02-19
* http://sachinchoolur.github.io/lightGallery/
* Copyright (c) 2019 Sachin N; Licensed GPLv3 */

Also ich bin kein Rechtsanwalt aber meiner Meinung nach darf man das Plugin, ohne rechtliche Konsequenzen fürchten zu müssen, unter GPLv3, ohne zusätzlich eine kommerzielle Lizenz zu kaufen, kommerziell nutzen.

Gruss
Hanspeter

[Andre Kern]

Hallo,

im Edge Browser sind auch noch ein paar kleine Schönheitsfehler. Die Unterkategorien werden lang nach unten gezogen und das Gleiche findet man auch bei den Artikellisten. Im Bestsellerslider etc ist das Problem nicht, vermutlich weil dessen Höhe begrenzt ist. Im Firefox und Chrome treten diese Probleme nicht auf.

Auch noch rot markiert auf dem Bild, die unschönen Ebenenstriche beim Seitenmenü. Evtl. gibt's da noch eine elegantere Lösung?

LG Shiva

[Karl1]

Hallo Shiva,
dein Problem kann ich leider nicht nachvollziehen, bei mir passt das im Edge.

Die einzelnen, in einer Reihe nebeneinanderliegenden, Boxen gleichen sich in der Höhe aus - heißt, alle Boxen einer Reihe gleichen sich an die höchste Box an.

In deinem Shop hast du einen HTML-Fehler, der eventuell Einfluss darauf haben könnte.
Deine HTML-Seite sollte eigentlich mit diesem DOCTYPE "<!DOCTYPE html>" beginnen, sie beginnt aber mit "<meta name="viewport" content="...", erst dann folgt der DOCTYPE.
Dies hat zu Folge, dass der Browser nicht eindeutig erkennt, dass es sich um eine HTML5-Seite handelt.
Hast du vielleicht die Datei includes/header.php verändert, oder in includes/extra/header/header_begin/ eine Datei die diesen Metatag einfügt?

Falls es nicht daran liegen sollte wäre ein Link zur Seite hilfreich!

Die Ebenenstriche sind wirklich unschön, versuch mal folgendes:
In der Datei templates/bootstrap4/source/inc/xtc_show_category.inc.php ersetze die Zeile 75 mit dieser.

Code: PHP  [Auswählen]

            $sign .= '&rsaquo;';

Gruß Karl

[Andre Kern]

Hi Karl,

  Ja, der Fehler ist jetzt behoben. Ich hatte die viewport.php im falschen Verzeichnis liegen. Alles i.O.
Mit deinem kleinen Fix sieht das Seitenmenü gut aus War halt ungewöhnlich mit den Strichen.

Vielen lieben Dank für die schnelle Reaktion.

P.S. Das auf den Artikelseiten der Paypal Express Button nicht erscheint, ist das bei Dir auch so? Wenn nicht, liegt's wohl auch an mir

LG
Shiva

[Karl1]

Hallo Shiva,
wenn bei dir der PayPal Express Button ganz klein und grau ist, dann hast du die letzte Aktualisierung verpasst.

Deine Seite hat jetzt statt 188 Validierungsfehler nur noch 16.
Den Metatag hast du jetzt nach dem <body>, außerdem solltest du in der .htaccess auf utf8 umstellen.

Benutze mal einen Validator und geh die Punkt systematisch durch.

Gruß Karl

[Andre Kern]

Bei den Paypal Updates versuche ich schon am Ball zu bleiben. Ich glaube letzte oder vorletzte Woche habe ich erst upgedated. Ich check das gleich mal. Im Bootstrap3 ist der Button da. Danke für die Hinweise. Ich arbeite mich mal durch den Validator morgen

LG
Shiva

[Karl1]

Hallo Shiva,
ich meinte nicht ein PayPal-Update, sondern die letzte Aktualisierung des Bootstrap4 Templates.
Gruß Karl

[Andre Kern]

Hallo Karl,

die ersten Änderungen, wie z.B. das mit Paypal, hatte ich schon vorab von Hand gemacht. Aber ich probiere es mal.

LG Shiva

[sb_cbo-do]

Hallo,

ich habe bei diesem Template ein Problem und zwar werden die Namen der Zusätzlichen Datenfelder nicht angezeigt.
Ich habe bei uns ein zusätzliches Datenfeld "Zustand" mit Hilfe des Tutorial "Zusätzliche Datenfelder Artikel ab Shopversion 2.x" erstellt.
Im aktuellen Design wird der Name und der entsprechende Wert angezeigt.
Beispiel: "Zustand: NEU"

Gestern habe ich dann die entsprechende Werte in die product_info Dateien das Bootstrap4 Template eintragen.

Der Zustand wird dann auch angezeigt, aber der Name "Zustand" wird nicht angezeigt.

Kann es sein das in dem Template noch irgendwo definiert werden muss, dass es sich die Namen auch aus den Extra Ordnen holen kann oder hat jemand eine Idee wie ich das Problem lösen kann?

Das ist der Code den ich in die "products_info_v1.html" eingefügt habe.

{if $PRODUCTS_ZUSTAND != ''}<div class="small"><strong>{#zustand#}</strong> {if $smarty.session.language_code == 'en'}{$PRODUCTS_ZUSTAND|replace:'Neu':'New'|replace:'Gebraucht':'Used'|replace:'Erneuert':'Refurbished'}{else}{$PRODUCTS_ZUSTAND}{/if}</div>{/if}

Der Zustand wird richtig angezeigt aber der Name fehlt.

Gruß,

Sven

[awids]

Sieht für mich so aus, als wenn sich das schnell lösen ließe...

Die Sprachvariablen hast du wahrscheinlich irgendwo unter

/templates/tpl_modified/lang/lang_german.custom
/templates/tpl_modified/lang/lang_german.section
/templates/tpl_modified/lang/lang_english.custom
/templates/tpl_modified/lang/lang_english.section

definiert und somit stehen sie auch nur in diesem Template zur Verfügung.

Lösung: Kopiere die zusätzlichen Definitionen aus den jeweiligen Dateien in die gleichnamigen Dateiversionen des Bootstrap4-Templates.

[sb_cbo-do]

Hallo,

danke awids für deine Antwort, aber ich habe die Dateien mit Winmerge schon verglichen und nichts gesehen was hier helfen könnte.

Gruß,

Sven