Produkt-Slider für mobile

Shopware 6 (German)
1

Hallo, ich versuche mein Produkt-Slider für mobile kleine zu machen, aber ich schaffen nicht, ich bekomme immer gleiche Große.

Ich kenne mich nicht über js, aber wie ich verstande habe, ich muss eine Parameter für die Großen…
In dem Datei base-slider.plugin.js und gallery-slider.plugin.js befinden sich dieses js. der responsive variable, war Leer, ich versuche geben diesen Parametar,

responsive: {
                xs: {'400px'},
                sm: {'576px'},
                md: {'768px'},
                lg: {'992px'},
                xl: {'1200px'},
                xxl: {'1400px'},

Auch in gallery-slider.plugin.js Datei autoHeight: truehinzufügen, weil nicht war,

thumbnailSlider: {
            enabled: true,
            loop: false,
            nav: false,
            items: 5,
            gutter: 10,
            startIndex: 1,
            preventScrollOnTouch: 'force',
            ariaLive: false,
            autoHeight: true,
            responsive: {

in meine Theme und app/storefront/src/main.js Datei, habe,

<script>
import BaseSliderPlugin from 'src/plugin/slider/gallery-slider.plugin';

  var slider = tns({
    container: '.tns3-ow',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      },
      1200: {
        autoHeight: '5px'
      },
      1400: {
        autoHeight: '5px'
      }  
    }
  });
</script>

aber verändert nichts…

2

Hi,
alleine das einbauen in ein JS File hilft hier tatsächlich nicht du müsstest über die SSH Console dann noch sh bin/build-storefront.sh machen um die JS Files neu zu kompilieren.

Ob das von dir eingebaute funktioniert habe ich jetzt allerdings mir nicht genauer angeschaut. Mir ging es lediglich erstmal darum, dass du die JS Files neu kompilieren musst.

Allerdings, solltest du das ganze auch nicht in den Shopware Dateien machen sondern in deinem Theme erweitern.

3

Viele danke für deinen Anwort!

ich nicht verstehe was meins mit sh bin/build-storefront.sh ich sollte in mein Console schreiebe ?

Mir ging es lediglich erstmal darum, dass du die JS Files neu kompilieren musst.

Es funzioniert mit Befehl bin/console theme:compile ?

nicht in den Shopware Dateien machen sondern in deinem Theme erweitern.

Ich arbeite mit meinem neue Theme…

4

Genau in die Console schreiben.

Nein-
bin/console theme:compile ist nur um die scss Dateien zu kompilieren das build-storefront ist für die JS Files.

5

Danke, Mit bin/build-storefront.sh
Bekommt das fehler mit dem Code ,

js
js1077×415 37.2 KB

Wie habe das Code,

<script>
import BaseSliderPlugin from 'src/plugin/slider/gallery-slider.plugin';

  var slider = tns({
    container: '.tns3-ow',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      },
      1200: {
        autoHeight: '5px'
      },
      1400: {
        autoHeight: '5px'
      }  
    }
  });
</script>
6

so, ich habe etwas hier gelesen, ich versuche mache, wie sie sagen…

In app/storefront/src habe eine neue ordner gemacht und habe er neu-slider gennant, auf diesen Ordner liegt der datei von oben und seine name ist slider.plugin.js.

In app/storefront/src liegt der Datei main.js, in innere dieser Datei jetzt habe,

// <plugin root>/src/Resources/app/storefront/src/main.js
// Import all necessary Storefront plugins

import sliderPlugin from './neue-slider/slider.plugin';

// Register your plugin via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.register('sliderPluging', sliderPluging);

Wenn in Terminal schreibe, bin/build-storefront.sh

bekommt diesen warnungen,

 ERROR in ./plugin/slider/base-slider.plugin.js
  Module build failed (from ../node_modules/swc-loader/src/index.js):
  Error: 
    × Expected a semicolon
      ╭─[/var/www/html/shopware/vendor/shopware/storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js:11:1]
   11 │         slider: {
   12 │             enabled: true,
   13 │             responsive: {
   14 │                 xs: {400},
      ·                         ─
   15 │                 sm: {576},
   16 │                 md: {768},
   17 │                 lg: {992},
      ╰────

    × Expected a semicolon
      ╭─[/var/www/html/shopware/vendor/shopware/storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js:12:1]
.....

Sagen das die Code in der Datei gallery-slider.plugin.js, der,

slider: {
            preventScrollOnTouch: 'auto',
            startIndex: 1,
            responsive: {
                xs: {400},
                sm: {576},
                md: {768},
                lg: {992},
                xl: {1200},
                xxl: {1400},
            },

die endungen mit semicolon schreibe soll,

slider: {
            preventScrollOnTouch: 'auto',
            startIndex: 1,
            responsive: {
                xs: {400};
                sm: {576};
                md: {768};
                lg: {992};
                xl: {1200};
                xxl: {1400};
            },

aber mache dieses, geben dieses Warnungen

× Expected ‚,‘, got ‚;‘

7

So, jetzt bekommt keine Fehler mehr, das Probleme war in base-slider.plugin.js und gallery-slider.plugin.js dateien, ich sollte die Eckige Klammern Leer und mit dem Koma,

responsive: {
                xs: {},
                sm: {},
                md: {},
                lg: {},
                xl: {},
                xxl: {}

das Probleme ist jetzt was auf der Java Code wird nicht gerufen…

In meine main.js habe,

// <plugin root>/src/Resources/app/storefront/src/main.js
// Import all necessary Storefront plugins

import sliderPlugin from './neue-slider/slider.plugin';

// Register your plugin via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.register('sliderPlugin', sliderPlugin);

und in meine slider.plugin.js

import BaseSliderPlugin from 'src/plugin/slider/base-slider.plugin';
import { tns } from "./node_modules/tiny-slider/src/tiny-slider";


var slider = tns({
      container: '.tns',
      items: 1,
      autoHeight: true,
      responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }  
}   });

Das Fenster von Produkt-Slider in Breite, ist zu Groß..

fenster
fenster831×428 105 KB

8

Kann jemand hilfe dieser Probleme für 50 Euros ?

9

Was meinst du denn mit „kleiner machen“? Wenn du im CMS bist, dann kannst du über das Zahnrad eine Pixelanzahl angeben. Setzte diese von 300 (bzw. den Standardwert) auf bspw. 200. Dann sind die Bilder kleiner.

Wenn es nur für Mobile kleiner sein soll, dann schau, wo dieser Wert verwendet wird und passe das CSS entsprechend an.

10

Danke für deine antwort,

Was meinst du denn mit „kleiner machen“?

alles was auf dem Fenster ist, Bilder und Preise und Artikel Titel.

kleine
kleine787×721 65.2 KB

Beispiel mit diesen Code, habe geschafft ganze Fenster(Bilder und Preis), kleine zu machen,

div.product-box.box-image .product-image-wrapper { height: 150px;}

in Smartphone Lange…

Aber diesen Code nicht funzioniert in Breite ,

größer
größer890×452 91.4 KB

Beiden Bilder sind von iPhone 12/13.

Was ich versuche ganze Bilder Fenster, kleine zu machen, ich möchte das sie aussiehst wie dieses Bild,

möchte
möchte961×494 79.7 KB

11

Weil das Fenster zu viele Elemente/Items hat, das macht das Fenster zu lange.

Hier gibt es eine Lösung für meinen Probleme, aber ich weiss nicht dieses zu implementiere..

12

Hallo,

hier der komplette JavaScript Code, den Du einbinden musst:

// DOMContentLoaded bedeutet, dass der Content komplett geladen wurde
document.addEventListener("DOMContentLoaded", function() {
    // Das Timeout wird benötigt, 
    // da es ohne ein Timing-Fehler gibt und das Event zu früh gestartet wird
    setTimeout(function (){
        // Event triggern, damit der Slider initial besser aussieht
        document.dispatchEvent(new Event('Viewport/hasChanged'));
    }, 500);
});

Wo du das JavaScript hinterlegst, kann ich dir nicht sagen. Es gibt Themes, die es erlauben zusätzliches JavaScript in deine Seiten einzubinden. Wenn Du aber ein selbst erstelltes, individuelles Theme hast, musst Du dich darum selbst kümmern.

Das ganze wird hier sehr gut erklärt:

PS: Der folgende Code war nur Beispielcode, der nicht funktioniert. Bitte nicht einbinden und ignorieren:

// Nicht verwenden: 
$(window).trigger('resize');
// Nicht verwenden: 
window.dispatchEvent(new Event('resize'));

Viele liebe Grüße

Steve