Einkaufsweltendesign Tabellen

Shopware 5 Themes & Design
1

Hallo

Ein Plugin funktioniert nicht wie erwartet und der Hesteller möchte fürs Bugfixing Geld sehen.

Daher bitte ich hier mal um hilfe.

Anbei das Bild beim einsatz des Responsive Standarttemplate von Shopware OHNE jegliche Modifikationen:

2548×883 290 KB
Ich hätte gerne das das Listing mit dem Header abschließst, Beschreibung, Detail und Preis zusammenrutscht:

1268×774 217 KB

Daher meine Fragestellung was muss wo abgeändert sein, damit es so rauskommt.

Eine Begrenzung auf die Headerbreite wäre wünschenswert.

Die einzelnen Felder haben laut Google Chrome Developertools folgende Namen

span.list–item-name

span.list–item-desc

span.list–item-price

span.list–item-buybtn

Die Seite ist hier zu finden:

Ich hatte erwartet das das wie hier aussieht und funktioniert:

Hat ggf. jemand von Euch ein ähnliches Listing erstellt?

Danke für Mithilfe

 

2

Anbei der Inhalt der all.less

// display-flex
@import ‚display-flex‘;

.emotion–article-list{
    
    // 1) article list (default)
    // ------------------------------

    height:100%;
    width:100%;
    position:relative;
    overflow: hidden;

    .article–list-title{
        display:inline-block;
        margin-left:0;
        margin-right:0;
        width:100%;
        .unitize-height(46.25);
    }

    .article–list{

        .list-item{
            overflow:hidden;
            list-style:none;
            width:100%;
            border-bottom:1px dotted #ddd;
            .unitize-height(46.25);
            .unitize-padding(5,0);

            &:nth-child(odd){
                background: @gray;
            }

            &:nth-child(even){
                background: @gray-dark;
            }

            @media screen and (min-width: @phoneLandscapeViewportWidth){
                .unitize-padding(0,0);
            }

            // list item span
            [class^=„list–item-“] {
                float: left;
                display: block;
                height:auto;
                .unitize-padding(0,5);
                .displayflex(flex, row, wrap, start, start, start);

                @media screen and (min-width: @tabletViewportWidth) {
                    .unitize-padding(0,25);
                    .displayflex(inline-flex, row, wrap, start, center, center);
                }

                @media screen and (min-width: @phoneLandscapeViewportWidth){
                    height:100%;
                    .unitize-padding(2,5);
                }

                // name and description
                &:first-child,
                &:nth-child(2){
                   width:100%;

                   @media screen and (min-width: @phoneLandscapeViewportWidth){
                       width:25%;
                   }
                }

                &:nth-child(2){
                    .price–unit {
                        margin-right:5px;

                        span{
                            float:right;
                            &.ressource–info{
                                margin-right:5px;
                                &:after{
                                    content:’;’;
                                }
                            }
                        }
                        br{
                            display:none;
                        }
                    }
                }

                // price
                &:nth-child(3){
                    width:75%;
                    .displayflex(flex, row, wrap, start, center, center);

                    @media screen and (min-width: @phoneLandscapeViewportWidth){
                        .displayflex(flex, row, wrap, start, start, start);
                        width:25%;
                    }

                    @media screen and (min-width: @tabletViewportWidth) {
                        .displayflex(flex, row, wrap, end, center, center);