Neu 4 Artikel nebeneinander in der Kategorieansicht

[BOX]

Hallo,

ich benötige eine Anpassung sodass ich 4 Artikel in einer Reihe stehen hab.
Derzeit stehen immer nur 3 Artikel in einer Reihe. Es wäre vielleicht auch sinnvoll den Shop dann etwas breiter darstellen zu lassen. Trotzdem soll das ganze responsive bleiben. Wäre dankbar für Lösungsansätze.

 

[Mirko.Schmidt User deaktiviert]

Hier einmal als kleine Anregung https://forum.jtl-software.de/threa...ei-muss-ich-da-bearbeiten.100614/#post-559710.

 

[Japsa]

Sieht dann quasi so aus:
https://sanitaerfixx.com/panzerschlaeuche-flexschlaeuche

Hier einmal als kleine Anregung https://forum.jtl-software.de/threa...ei-muss-ich-da-bearbeiten.100614/#post-559710.

 

[webstef2000]

Ich habe das so gemacht: aus index.tpl eine index_custom.tpl erstellt und dort in Zeile 10 aus {assign var='grid' value='col-xs-6 col-lg-4'} in {assign var='grid' value='col-xs-2 col-lg-3'}<!--Eigene Anpassung--> geändert. Jetzt habe ich noch den blöden rahmen entfernt und alles ist schick.

 

[css-umsetzung]

Ich habe das so gemacht: aus index.tpl eine index_custom.tpl erstellt und dort in Zeile 10 aus {assign var='grid' value='col-xs-6 col-lg-4'} in {assign var='grid' value='col-xs-2 col-lg-3'}<!--Eigene Anpassung--> geändert. Jetzt habe ich noch den blöden rahmen entfernt und alles ist schick.

Der Weg über ein Child Template wäre besser gewesen, dann hättest du jetzt eine Datei extended die dann nicht mehr als einen übersichtlichen sechszeiler an code gehabt hätte, was bedeutet das du dann kaum Stress hast bei einem Update.

 {extends file="../../Evo/productlist/index.tpl"}
   {block name="productlist-results"}
    {if $style=='gallery'}
        {assign var='grid' value='col-xs-2 col-lg-3'}
    {/if}
 {/block}

hinzu kommt, das col-xs-2 heftig ist, da meinst du doch bestimmt eine 12 oder?

Pauschal ohne die Seite zu kennen hätte ich diese Werte genommen:
{assign var='grid' value='col-xs-2 col-sm-6 col-md-4 col-lg-3'}

 

[caudexpflanze]

Der Weg über ein Child Template wäre besser gewesen, dann hättest du jetzt eine Datei extended die dann nicht mehr als einen übersichtlichen sechszeiler an code gehabt hätte, was bedeutet das du dann kaum Stress hast bei einem Update.

 {extends file="../../Evo/productlist/index.tpl"}
   {block name="productlist-results"}
    {if $style=='gallery'}
        {assign var='grid' value='col-xs-2 col-lg-3'}
    {/if}
{/block}

hinzu kommt, das col-xs-2 heftig ist, da meinst du doch bestimmt eine 12 oder?

Pauschal ohne die Seite zu kennen hätte ich diese Werte genommen:
{assign var='grid' value='col-xs-2 col-sm-6 col-md-4 col-lg-3'}

Wir möchten auch gerne 4 Artikel in einer Reihe.
Haben es versucht so umzusetzen... leider funktioniert es nicht. Es werden dann garkeine Artikel mehr angezeigt.
Wir haben die neuste Shop Version.

Danke & Grüße
Jonas

 

[css-umsetzung]

Oh sorry, mach mal noch ein prepend dran in der Blockanweisung

 {block name="productlist-results" prepend}

Was habe ich denn da oben überhaupt für einen Mist geschrieben, da habe ich einfach das verkehrte von @mobile-bags.de übernommen ohne darauf zu achten ob das stimmt
Ich würde dieses Grid verwenden:

{assign var='grid' value='col-xs-12 col-sm-6 col-md-4 col-lg-3'}

 

[caudexpflanze]

hehe kein Ding ... sind über Hilfe immer dankbar.

wir haben jetzt folgendes probiert... die Artikel werden zwar wieder angezeigt, aber weiterhin nur 3 in der Reihe.

{extends file="../../Evo/productlist/index.tpl"}
   {block name="productlist-results" prepend}
    {if $style=='gallery'}
        {assign var='grid' value='col-xs-12 col-sm-6 col-md-4 col-lg-3'}
    {/if}
 {/block}

 

[css-umsetzung]

Hast du eventuell nur so eine kleine Auflösung am Monitor, das bei dir das col-md-4 zum tragen kommt?
Ich habe da ja extra eine Abstufung gemacht, weil bei md könnte es zu eng werden für vier Artikel.

Schick mal bitte den Link hier im Forum oder auch per PN wenn du den nicht veröffentlichen möchtest.

 

[caudexpflanze]

Hast du eventuell nur so eine kleine Auflösung am Monitor, das bei dir das col-md-4 zum tragen kommt?
Ich habe da ja extra eine Abstufung gemacht, weil bei md könnte es zu eng werden für vier Artikel.

Schick mal bitte den Link hier im Forum oder auch per PN wenn du den nicht veröffentlichen möchtest.

An der Auflösung kann es nicht liegen.
Es geht hier rum:

Garten-Paket

 

[css-umsetzung]

.row.gallery .product-wrapper {
    overflow: hidden;
    border: 0;
    margin: 0 16px 16px 0;
    padding: 0;
    width: calc(33.333% - 16px)
}

Das sorgt dafür das die Boxen einen Abstand haben und eben nur drei nebeneinander passen, das überschreibt diese originale Einstellung hier:

    .col-lg-3 {
        width: 25%
    }

Das müsste also anders aufgebaut werden, denn die Boxen sollen ja vermutlich weiterhin Abstände haben.

 

[Japsa]

An der Auflösung kann es nicht liegen.
Es geht hier rum:

Du musst das hier ändern:

.row.gallery .product-wrapper {
    overflow: hidden;
    border: 0;
    margin: 0 16px 16px 0;
    padding: 0;
    width: calc(25% - 16px);
}

Dann würde es so aussehen:





Dein "div" hat ja dies drin:

class="product-wrapper col-xs-12 col-sm-6 col-md-4 col-lg-3"

Da kannst Du soviel ändern an "col-lg" etc. wie Du willst, wenn Du vorher die Breite der Artikelboxen schon fest mit
width: calc(33.333% - 16px); definierst

 

[caudexpflanze]

Danke Leute!!! Jetzts gehts!
Ihr seid super!!!

 

[ple]

Hallo zusammen,
ich wollte auch gerne 4 statt 3 Spalten haben in der Artikelliste.
Generell habe ich meine Seite auf 90% der verfügbaren breite.
mytheme.css im child

@media (min-width: 768px) {
  .container {
    width: 90%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 90%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 90%;
  }
}

Platz wäre genügen da, also habe ich mal in der index.plt das hier eingefügt. Kopiert hatte ich es aus der originalen Evo.

{block name="header"}
    {if !isset($bAjaxRequest) || !$bAjaxRequest}
        {include file='layout/header.tpl'}
    {/if}
{/block}

{block name="content"}
    <div id="result-wrapper">
        {block name="productlist-header"}
        {include file='productlist/header.tpl'}
        {/block}
    
        {assign var='style' value='gallery'}

        {if isset($boxes.left) && !$bExclusive && !empty($boxes.left)}
            {assign var='grid' value='col-xs-6 col-lg-3'}
        {else}
            {assign var='grid' value='col-xs-6 col-md-3'}
        {/if}
        {*Prio: -> Funktionsattribut -> Benutzereingabe -> Standarddarstellung*}
        {if (!empty($AktuelleKategorie->categoryFunctionAttributes['darstellung']) &&
        $AktuelleKategorie->categoryFunctionAttributes['darstellung'] == 1) ||
        (empty($AktuelleKategorie->categoryFunctionAttributes['darstellung']) &&
        ((!empty($oErweiterteDarstellung->nDarstellung) &&
        isset($Einstellungen.artikeluebersicht.artikeluebersicht_erw_darstellung) &&
        $Einstellungen.artikeluebersicht.artikeluebersicht_erw_darstellung === 'Y' &&
        $oErweiterteDarstellung->nDarstellung == 1) ||
        (empty($oErweiterteDarstellung->nDarstellung) &&
        isset($Einstellungen.artikeluebersicht.artikeluebersicht_erw_darstellung_stdansicht) &&
        $Einstellungen.artikeluebersicht.artikeluebersicht_erw_darstellung_stdansicht == 1)))}
            {assign var='style' value='list'}
            {assign var='grid' value='col-xs-12'}
        {/if}
        {if isset($Suchergebnisse->Fehler)}
            <p class="alert alert-danger">{$Suchergebnisse->Fehler}</p>
        {/if}
        
        {* Bestseller *}
        {if isset($oBestseller_arr) && $oBestseller_arr|@count > 0}
            {block name="productlist-bestseller"}
            {lang key='bestseller' section='global' assign='slidertitle'}
            {include file='snippets/product_slider.tpl' id='slider-top-products' productlist=$oBestseller_arr title=$slidertitle}
            {/block}
        {/if}
        
        {block name="productlist-results"}
        <div class="row {if $style !== 'list'}row-eq-height row-eq-img-height{/if} {$style}" id="product-list" itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList">
            {foreach name=artikel from=$Suchergebnisse->Artikel->elemente item=Artikel}
                <div class="product-wrapper {$grid}" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <meta itemprop="position" content="{$smarty.foreach.artikel.iteration}">
                    {if $style === 'list'}
                        {include file='productlist/item_list.tpl' tplscope=$style}
                    {else}
                        {include file='productlist/item_box.tpl' tplscope=$style class='thumbnail'}
                    {/if}
                </div>
            {/foreach}
        </div>
        {/block}
        
        {block name="productlist-footer"}
        {include file='productlist/footer.tpl'}
        {/block}
    </div>
{/block}

{block name="footer"}
    {if !isset($bAjaxRequest) || !$bAjaxRequest}
        {include file='layout/footer.tpl'}
    {/if}
{/block}

Denke das ist im Child auch zuviel, hatte es anders leider nicht am laufen bekommen, dass mir 4 Spalten angezeigt werden.
Also nur geändert "{assign var='grid' value='col-xs-6 col-lg-3'}" von 4 auf 3

Jetzt sind leider die dünnen Balken nicht mehr zu sehen, oder teilweise.
Gibt es da Möglichkeiten das sauber hinzubekommen?