Filterfunktion & Warenkorb Demo

  • Resolved lars0132

    (@lars0132)


    5 years, 12 months ago

    Hey Thimo,
    bisher klappt alles super! Danke dafür nochmal.
    Eine Frage h?tte ich da noch: Wie hast du auf deine Demopage den Warenkorb so gestaltet?
    Würdest du deiner Community evntl deinen Code dafür zur Verfügung stellen?
    Und dann frag ich mich noch wie du die Vorsortierung wieder eingeblendet hast – sprich die Sortierung nach “Erschienen, Name, Preis etc..”.

    Wird es in geraumer Zeit auch eine Filterfunktion geben? Wie z.B. zeige mir alle Artikel in Blau an?

    MfG
    Lars

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Thimo Grauerholz

    (@pr3ss-play)

    Hi Lars,

    
.spreadplugin-article .edit-wrapper-integrated {display:none}
#spreadplugin-menu #checkout {display:none}
.spreadplugin-menu #articleSortBy {float:right}

.spreadplugin-menu.fixed {
position:relative;z-index:inherit
}
.spreadplugin-menu {
z-index:inherit
}

.spreadplugin-article-detail .spreadplugin-color-item {
border-radius:50%
}

/* detailseite linke views */
.spreadplugin-article-detail .views-wrapper {
    padding-bottom: 10px;
    padding-top: 10px;
    display: table;
    width: 100%;
}
.spreadplugin-article-detail .views-wrapper {
    float: left;
    margin-top: 60px;
    width: 60px;
    position: absolute;
}

.spreadplugin-article-detail .views-wrapper .views {
    display: table;
    margin: 0 auto;
}

.spreadplugin-article-detail ul {
    list-style-image: none !important;
    list-style-position: inside !important;
    list-style-type: disc !important;
}

.spreadplugin-article-detail .image-wrapper {
    float: right;
    width: 85%;
}

.spreadplugin-article-detail .product-name {
display:none}

.spreadplugin-article-detail .edit-wrapper-integrated::before {
    content: "Hier kannst Du Farbe & Gr??e des Motivs ?ndern oder eigenen Text oder ein eigenes Bild hinzufügen.";
    color: rgba(255, 255, 255, 0);
    text-align: left;
    font-family: "Open sans";
    font-size: 10px;
    line-height: 12px;
    position: absolute;
    width: 0px;
    height: 63px;
    font-weight: bold;
    padding-top: 6px;
    padding-left: 43px;
    left: 36px;
    display: inline-block;
    top: -1px;
    opacity: 0;
    white-space: pre;
    background: rgb(245, 31, 111);
    border-radius: 0px 6px 6px 0px;
    overflow: hidden;
}
.spreadplugin-article-detail .edit-wrapper-integrated:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 62px;
    font-weight: bold;
    left: 67px;
    display: inline-block;
    top: 0;
    border-left: 1px solid #ffffff;
}
.spreadplugin-article-detail .edit-wrapper-integrated i:before {
    font-size: 21px;
    top: -14px !important;
    position: relative;
    z-index: 1;
}
.spreadplugin-article-detail .edit-wrapper-integrated i:after {
    content: "Motiv bearbeiten";
    text-align: center;
    font-family: Open sans;
    font-size: 10px;
    position: absolute;
    width: 100%;
    left: 0;
    display: inline-block;
    line-height: 11px;
    top: 26px;
    z-index: 1;
}

.spreadplugin-article-detail .edit-wrapper-integrated {
    position: absolute;
    /*margin-top: 85px;*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    padding: 12px 21px !important;
    border: 1px solid #f0f0f2 !important;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    color: #f51f6f;
height:63px
}

.spreadplugin-article-detail .edit-wrapper-integrated:hover {
    background: #f51f6f;
    border: 1px solid #f51f6f !important;
    color: #ffffff !important;
}
.spreadplugin-article-detail .edit-wrapper-integrated:hover:before {
    opacity: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    width: 185px;
    color: rgba(255,255,255,1);
    white-space: normal;
}

.spreadplugin-article-detail .views li {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -o-border-radius: 40px;
    -ms-border-radius: 40px;
    border-radius: 40px;
    overflow: hidden;
    width: 65px;
    height: 65px;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #eeeeee;
}

    Schon einmal ein Anfang ??

    Den Warenkorb habe ich mittels Widget (Unter Widgets befindet sich das Spreadplugin Widget) in den Content eingebunden und dann mit CSS dort positioniert.

    Gru?
    Thimo

    Kannst du uns auch den Code von deiner Warenkorb Anpassung geben? ?? So wie es bei dir ist ( das es seitlich rüberswiped usw)

    Plugin Author Thimo Grauerholz

    (@pr3ss-play)

    So sollte es passen:

    
a.spreadplugin-checkout-link.button:before {
    border: 0;
}
a.spreadplugin-checkout-link.button {
    padding: 0;
}
.spreadplugin-checkout-link.button::after {
    font-size: 2em;
}
.spreadplugin-checkout.widget span {
    border-radius: 22px;
    color: #ffffff;
    display: block;
    font-size: 12px;
    font-weight: 700;
    height: 18px;
    line-height: 18px;
    padding: 0;
    position: absolute;
    right: -10px;
    text-align: center;
    top: 32px;
    width: 18px;
    background-color: #C41E3A;
    z-index: 1;
}

    Danke für den code! Hab das eben mal getestet und au?er dass mein Warenkorb nun wei? ist und die Anzahl in rosa und im Kreis ist, ?ndert sich nicht wirklich viel. Kein seitliches Aufploppen sondern immernoch wie vorher. Und auch nicht über die volle L?nge

    Plugin Author Thimo Grauerholz

    (@pr3ss-play)

    Dann mal so ??

    
a.spreadplugin-checkout-link.button:before {
    border: 0 !important;
}
a.spreadplugin-checkout-link.button {
    padding: 0 !important;
}
.spreadplugin-checkout-link.button::after {
    font-size: 2em !important;
}
.spreadplugin-checkout.widget span {
    border-radius: 22px !important;
    color: #ffffff !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 18px !important;
    line-height: 18p !important;
    padding: 0 !important;
    position: absolute !important;
    right: -10px !important;
    text-align: center !important;
    top: 32px !important;
    width: 18px !important;
    background-color: #C41E3A !important;
    z-index: 1 !important;
}

    ??

    Vielen Dank nochmal für deine Mühe. Ich meinte jedoch g?nzlich das komplette Warenkorb Widget Menü (also als Sidebar usw). Ich habe mir mal bei deiner Seite die CSS Codes durchgeschaut und der Code ab /* ########## WARENKORB WIDGET ########## */ funktionierte tats?chlich so halbwegs auch bei mir und genau mit dem Effekt den ich haben wollte ?? Nun habe ich aber noch ein paar offene Fragen.

    1. Da ich mit Elementor arbeite und meine Spreadplugin Basket Widget Spalte nicht als eine eigene ganze Zeile darstellen m?chte sondern diese bei mir h?chstens eine Breite von 20-30% hat, verzerrt sich logischerweise vorallem responsiv der Warenkorb, indem er eben nur diese 20-30% an Breite hat. Kann man das austricksen, dass ich trotz kleiner Spaltenbreite den vollen Warenkorb zu Gesicht bekomme? Mit welchen Befehlen kann ich da versuchen zu arbeiten? Ist das nur eine Sache von Margins und Paddings usw?^^

    2. Welche CSS Befehle ben?tige ich, dass mein Warenkorb in responsiver Darstellung beim ?ffnen meine restliche Seite nicht mehr anzeigt, also sozusagen den ganzen Bildschirm auch in der H?he einnimmt und es auch keine M?glichkeit gibt, die restliche Seite mit herunterscrollen zu sehen, solange ich den Warenkorb nicht schlie?e? Dies hat n?mlich auch nicht so ganz funktioniert, wies bei dir der Fall ist.

    Alles andere denke ich hab ich soweit ?? Danke nochmal!

    Plugin Author Thimo Grauerholz

    (@pr3ss-play)

    1. Da ich mit Elementor arbeite und meine Spreadplugin Basket Widget Spalte nicht als eine eigene ganze Zeile darstellen m?chte sondern diese bei mir h?chstens eine Breite von 20-30% hat, verzerrt sich logischerweise vorallem responsiv der Warenkorb, indem er eben nur diese 20-30% an Breite hat. Kann man das austricksen, dass ich trotz kleiner Spaltenbreite den vollen Warenkorb zu Gesicht bekomme? Mit welchen Befehlen kann ich da versuchen zu arbeiten? Ist das nur eine Sache von Margins und Paddings usw?^^

    Entweder das oder die Breite des Warenkorbs generell, aber genau kann ich das erst sagen, wenn ich mir das angesehen habe. Leider ist die letzte ?nderung nicht auf deiner oben genannten Seite, daher kann ich dir da gerade nicht weiterhelfen ??

    2. Welche CSS Befehle ben?tige ich, dass mein Warenkorb in responsiver Darstellung beim ?ffnen meine restliche Seite nicht mehr anzeigt, also sozusagen den ganzen Bildschirm auch in der H?he einnimmt und es auch keine M?glichkeit gibt, die restliche Seite mit herunterscrollen zu sehen, solange ich den Warenkorb nicht schlie?e? Dies hat n?mlich auch nicht so ganz funktioniert, wies bei dir der Fall ist.

    Eigentlich so: 

    
@media (max-width: 768px) {
.spreadplugin-cart-contents {
    width: 100%;
}
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Filterfunktion & Warenkorb Demo’ is closed to new replies.