Neu Fragen zum Warenkorb Modal

[Groundhog]

Hallo liebes Forum,

Ich finde die Bootstrap Modals echt toll. Vorallem das Warenkorb Modal der Artikelliste hats mir angetan. Ich würde aber gerne den Hintergrund der Seite abdunkeln wenn sich das Modal öffnet. Wie kann ich das erreichen. Blöderweise komm ich mit JS nur schwer zurecht.

Weiters würde ich das Warenkorb Modal auch gerne auf der Artikeldetailseite aufrufen. Ich nehme an, dass auch dies über einen JS Aufruf läuft oder? Vielleicht kann mir jemand kurz das Zusammenspiel der Modalbuttons mit der JS Datei näherbringen...bzw. mir erklären wie ich Modals im Werkseitigen EVO Template (was ja angepassten JS Code hat) korrekt aufrufe.

Mir ist außerdem aufgefallen, dass beim Klick auf "Weiter einkaufen", lediglich der Modal Body ausgeblendet wird, der Modal Header mit dem Schließen Button aber stehen bleibt, und extra geschlossen werden muss. Lässt sich das komplette Modal nicht mit einem Klic auf "Weiter einkaufen" schließen....ich habe es über das hinzufügen von data-dismiss="modal" geschafft es Codeseitig so einzurichten, dass es komplett ausgeblendet wird. Ist das korrekt, oder gibt es dafür eine andere Lösung?

Konfig: JTL Testshop v4 - Evo Standard Template als Basis

 

[martinwolf]

Ganz easy. Es gibt bereits einen Layer der sich erzeugt sobald ein Modal aufgerufen wird. Im Standard Bootstrap ist dieser Layer auch mit einer Schwarzen Hintergrundfarbe versehen und zieht sich bei Erscheinen eine Deckkraft von 0.75. JTL hat das jedoch für seine Themes entfernt. Dieser befindet sich ganz am Ende der HTML Struktur und ist über die folgende CSS Regel ansprechbar (Beispiel EVO-Theme)

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Hier reicht es aus eine Hintergrundfrabe zu ergänzen.

.modal-open .modal {
  background-color: rgba(0,0,0,0.5);
  overflow-x: hidden;
  overflow-y: auto;
}

Hinweis. Für sämtliche Anpassungen am Template empfiehlt sich die Verwendung eines Child-Templates.

 

[Groundhog]

Super, vielen Dank @martinwolf

Das läuft ja super. Kannst du mir noch einen Tipp geben wie ich das Warenkorb Modal auch auf der Artikeldetailseite erzeuge?

 

[css-umsetzung]

css anpassung:

body[data-page='1'] #pushed-success {
    display:none;
}

und hier ein wenig JS das nach bedarf für alle alerts angepasst werden könnte

jQuery(document).ready(function() {

    if($("body[data-page='1'] #pushed-success").not(".choose-variations").length) {
        var alert_el = $(".alert");
        var title = $(alert_el).find('h1').html();
        if(title) $(".alert").find('h1').css("display","none");
        else {
            var title = $(alert_el).find('h2').html();
            if(title) $(".alert").find('h2').css("display","none");
            else {
                var title = $(alert_el).find('h3').html();
                if(title) $(".alert").find('h3').css("display","none");
                else {
                    var title = $(alert_el).find('h4').html();
                    if(title) $(".alert").find('h4').css("display","none");
                }
            }
        }
    if(!title ) {
        if($(alert_el).hasClass("alert-warning")) {
            title = "Bitte beachten Sie";
        }
        if($(alert_el).hasClass("alert-info")) {
            title = "Zur Information";
        }
    }
    if(!title ) title=" ";

    var html = $(".alert").html();

    var modalobj = eModal.alert({
          message: html,
          size: 'lg',
          title: title,
      });

    if($(alert_el).hasClass("alert-warning")) {
        var classstring = "alert-warning";
    }
    else if($(alert_el).hasClass("alert-info")) {
        var classstring = "alert-information";
    }
        else if($(alert_el).hasClass("alert-danger")) {
          var classstring = "alert-danger";
      }
    jQuery( modalobj ).find('.modal-content').addClass(classstring);

    }

    $(modalobj).on('shown.bs.modal', function (e) {
        var elModal = this;
        jQuery(elModal).find(".btn-checkout").on("click", function() {
            jQuery(elModal).modal("hide");
        });
    })

});

 

[Groundhog]

Vielen Dank für eure Hilfe - läuft ja wunderbar.

 

[olli33]

Hallo Zusammen,

ich versuche das auch gerade einzubauen, bekomme es aber nicht hin. Das ganze soll für ein EVO-Child eingebaut werden. Das Javascript habe ich in der mytheme.js und die css-Anweisung in der mytheme.css eingebunden. Kann mir vielleicht jemand helfen bzw. den Einbau noch etwas konkreter beschreiben. Der Shop ist 4.05 Build 3

danke und grüsse
Olli