Ankündigung

Einklappen
Keine Ankündigung bisher.

Mengeneingabefeld mit Pfeilen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Mengeneingabefeld mit Pfeilen

    Ich habe in diversen Shops eine Funktion gesehen, bei der mich interessieren würde, ob das auch mit Zen Cart geht. Und zwar handelt es sich um so etwas:

    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: cart2.png
Ansichten: 1
Größe: 8,6 KB
ID: 104144

    Mit den Plus- und Minuszeichen kann man die Menge erhöhen oder verringern, der Kunde müsste nichts mehr rein schreiben. Ich habe schon mal auf der amerikanischen Seite geschaut, aber nichts gefunden.

    #2
    Ist vom Shopsystem völlig unabhängig. Wird rein mit Javascript und CSS bewirkt.

    Schau Dir das Sheffield Blue Template an, das macht das genauso:


    Die benötigten Scripts im Ordner jscript
    jQuery_ui.spinner.js
    und
    jqueryui.js

    werden in der includes/templates/responsive_sheffield_blue/templates/tpl_product_info_display.php reingeladen:
    Code:
    <script src="<?php echo $template->get_template_dir('jqueryui.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/jqueryui.js' ?>" type="text/javascript"></script>
    <script src="<?php echo $template->get_template_dir('jQuery_ui.spinner.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/jQuery_ui.spinner.js' ?>" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function(){
        $( ".spinner" ).spinner();
          });
    </script>
    Und das Eingabefeld entsprechend gestylt:

    Code:
    $the_button = '<div id="cartAdd-wrapper"><input type="text" class="spinner" min="0" max="1000000" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /></div>.....
    Im Stylesheet gibt es dann noch ein paar Feinabstimmungen für die verwendeten Elemente
    Code:
    #cartAdd-wrapper {position:relative;overflow:hidden;width:175px;margin:0 auto;}
    span.ui-icon.ui-icon-triangle-1-n {position:absolute;top:1px;right:1px;padding:11px 20px;background: #ccc;color:#444;font-size:150%;cursor:pointer;}
    span.ui-icon.ui-icon-triangle-1-s {position:absolute;top:1px;left:2px;padding:11px 20px;background: #ccc;color:#444;font-size:150%;cursor:pointer;}
    span.ui-button-text:hover {color: #f6f6f6;}

    Kommentar


      #3
      Ich habe mal versucht, das Ganze in das Template responsive_classic bei der Beta 1.56b einzubauen, aber da gab es nur ein kleines Feld ohne die Pfeile links und rechts. Bei Github habe ich gesehen, dass es ja auch eine Anpassung für die kommende Version gibt, da werde ich dann wohl auf Sheffield blue wechseln müssen, das dürfte dann der einfachere Weg sein.

      Kommentar


        #4
        Für diese Funktion das gesamte Template zu wechseln ist etwas übertrieben.
        Hast Du wirklich alle Schritte durchgeführt?

        Hier nochmal detailliert für responsive_classic, nach diesem Prinzip geht das in jedem beliebigen Template

        1)
        Die beiden Javascripts
        jQuery_ui.spinner.js
        und
        jqueryui.js
        aus dem Sheffield Blue Downloadpaket (in includes/templates/responsive_sheffield_blue/jscript) hochladen nach
        includes/templates/responsive_classic/jscript

        2)
        In includes/templates/responsive_classic/templates/tpl_product_info_display.php oberhalb von
        Code:
        <div class="centerColumn" id="productGeneral">
        einfügen:
        Code:
        <script src="<?php echo $template->get_template_dir('jqueryui.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/jqueryui.js' ?>" type="text/javascript"></script>
        <script src="<?php echo $template->get_template_dir('jQuery_ui.spinner.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/jQuery_ui.spinner.js' ?>" type="text/javascript"></script>
        <script>
            jQuery(document).ready(function(){
            $( ".spinner" ).spinner();
              });
        </script>
        3)
        In includes/templates/responsive_classic/templates/tpl_product_info_display.php den Aufruf des Eingabefeldes entsprechend anpassen und ändern auf:
        Code:
        // show the quantity box
              $the_button = '<div class="max-qty">' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '</div><span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span><div id="cartAdd-wrapper"><input type="text" class="spinner" min="0" max="1000000" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /></div>' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        4)
        Ein Stylesheet mit folgendem Inhalt erstellen und speichern als product_info.css:
        Code:
        #cartAdd-wrapper {position:relative;overflow:hidden;width:175px;margin:0 auto;}
        span.ui-icon.ui-icon-triangle-1-n {position:absolute;top:1px;right:1px;padding:11px 20px;background: #ccc;color:#444;font-size:150%;cursor:pointer;}
        span.ui-icon.ui-icon-triangle-1-s {position:absolute;top:1px;left:2px;padding:11px 20px;background: #ccc;color:#444;font-size:150%;cursor:pointer;}
        span.ui-button-text:hover {color: #f6f6f6;}
        Hochladen nach includes/templates/responsive_classic/css
        Sollte es dort schon eine product_info.css geben, den Inhalt ins bestehende Stylesheet einfügen.
        Farben und Größen nach Wunsch anpassen

        Kommentar


          #5
          Erst einmal nochmals danke für Deine Erklärung, ich hatte zuvor die Javascripts noch nicht hochgeladen. Trotzdem ist das Feld mit der Anzahl zu schmal, vor allem zeigt es keine Zahl über 10 an, weil es eben zu schmal ist. Ich habe schon die Stylesheets durchgeschaut, ob da eine Einstellung anders ist, aber ohne das Script ist das Eingabefeld wesentlich größer. Der Testshop kann hier angesehen werden.

          Klicke auf die Grafik für eine vergrößerte Ansicht

Name: qty.png
Ansichten: 1
Größe: 1,8 KB
ID: 103240 Klicke auf die Grafik für eine vergrößerte Ansicht

Name: qty2.png
Ansichten: 1
Größe: 1,4 KB
ID: 103241

          Kommentar


            #6
            Ein Eingabefeld kann per CSS gestylt werden.
            In diesem Fall wäre z.B. folgendes passend:
            Code:
            #cartAdd-wrapper input[type="text"]{
                width:60px;
                text-align:center;
            }

            Kommentar


              #7
              Zitat von webchills Beitrag anzeigen
              Ein Eingabefeld kann per CSS gestylt werden.
              In diesem Fall wäre z.B. folgendes passend:
              Code:
              #cartAdd-wrapper input[type="text"]{
                  width:60px;
                  text-align:center;
              }
              Nochmals danke für den Tipp. Ich hatte ja den Testshop für die Betatests nur soweit ergänzt, als ich statt der Demodaten meine eigenen Produkte in die Datenbank eingefügt habe. Bei den Tests war ja dann das Eingabefeld auch entsprechend groß, erst als ich dann die Funktion eingefügt habe, war das Feld plötzlich schmal. Und die CSS, die neu dazu kam, hatte nirgends einen Befehl, der das schmale Feld erklärt hätte. Ich habe dann noch die neuen Einträge in der produkt_info_display.php geprüft, ob da etwas zu ändern wäre, aber da war eben auch nichts. Daher habe ich vermutet, dass sich vielleicht beim Template zwei CSS irgendwie beißen und dass es deshalb nicht wie im Demoshop dargestellt wird. Aber auf die Idee, das Eingabefeld selbst zu stylen, hätte ich auch selbst kommen können.

              Jetzt werde ich mal noch ein paar Module testen, weil ich bei Github gesehen habe, dass es noch einige neue gibt. Und dann werde ich mal einen zweiten Testshop "updaten", auch wenn es wegen der Module dort ein wenig zu mergen gibt. Am Sonntag geht es dann für ein paar Tage an den Achensee zum entspannen, und dann hoffe ich, dass die Betaphase bald beendet ist. In diesem Sinn nochmal vielen Dank für die Tipps.

              Kommentar


                #8
                Erst einmal danke für das Modul DPU, welches heute zum Download stand. Mit dem Script funktioniert DPU leider nicht, die beiden Erweiterungen beißen sich offenbar. Ist aber nicht weiter tragisch, ich habe die Einträge aus der tpl_product_info_display.php entfernt, und DPU funktioniert wie es soll.

                Kommentar


                  #9
                  Wenn Du die angehängte Datei nach includes/templates/DEINTEMPLATE/jscript spielst, dann wird der DPU auch mit dieser Modifikation funktionieren.
                  Das Script ist normalerweise nicht nötig und wurde daher aus dem Paket entfernt. Da es aber von einigen Templates und Modulen für den DPU benötigt wird, damit es nicht zu Javascript Konflikten kommt, ist es nun wieder im DPU Download enthalten.

                  jscript_jquery.min.dpu.php.zip

                  Kommentar


                    #10
                    Danke für Deine Bemühungen, aber es will trotzdem nicht funktionieren. Mag sein, weil doch relativ viele Module auch auf die tpl_product_info_display.php einen Einfluss haben. Ich habe bei der Installation jedes Moduls immer eine Sicherheitskopie der geänderten Datei gemacht, um bei eventuellen Problemen auf die letzte lauffähige Version zurückgreifen zu können. Hierfür wurde jedes Modul mit einer Nummer versehen und die Sicherheitskopie der jeweiligen Datei erhielt die selbe Nummer. Wenn also die tpl_product_info_display.php zum Beispiel bei Modul 1 geändert wurde, dann ist die Originaldatei die Sicherung, bei Modul 2 ist es dann die Datei, welche zuletzt geändert wurde. Macht zwar etwas Arbeit, aber dadurch kann ich jederzeit feststellen, wo ein Fehler liegt. Ich hänge Dir einfach mal ein Zipfile vom Sicherungsordner templates an, die Nummer 23 ist die tpl_product_info_display.php mit der DPU, die so aber nicht will. Mache Dir aber nicht soviel Arbeit, so wichtig sind die Pfeile nun auch wieder nicht.

                    templates.zip

                    Kommentar


                      #11
                      Herzlichen Dank für die exakte Anleitung.
                      Die Pfeile sind vorhanden, funktionieren und der Stil passt genau.
                      Leider mußte ich feststellen, daß die von mir für die jeweiligen Produkte eingestellten Schritte (Stückzahl zB 0.1 ) nicht übernommen werden.
                      Die Anzahl ist nur in ganzzahligen 1-er Schritten nach oben oder unten veränderbar und nicht wie von mir angenommen 0.1 - 0.2 - 0.3 ---- und so weiter.
                      Wie gehe ich vor? Ist dafür eine Lösung bekannt?

                      Kommentar

                      Info zu diesem Forenarchiv:
                      Mit Release von 1.5.7 wurde die deutsche Zen Cart Version auf eine reine DIY-Lösung umgestellt.
                      Für einen Support via Forum stehen keine personellen und zeitlichen Ressourcen mehr zur Verfügung.
                      Dieses Supportforum bleibt im Nur-Lesen-Modus als Wissensarchiv noch online verfügbar.
                      PM Funktionalität, Registrierung und Posten neuer Beiträge sind deaktiviert.
                      Zugriff auf Anhänge in den Postings ist auch ohne Registrierung/Einloggen möglich.
                      FAQ und Downloadbereich des Forums wurden in die neue umfangreiche Knowledgebase auf der zen-cart-pro.at Website übernommen.

                      Das Development der deutschen Zen Cart Version geht wie bisher auf Github weiter.
                      Wir werden auch weiterhin neue Versionen bereitstellen und die Onlinedokumentation/Knowledgebase aktualisieren.
                      Fehler in der Software können auf Github als Issues gemeldet werden.
                      Follow us
                      aktuelle version
                      Zen Cart 1.5.7g deutsch
                      vom 12.12.2023
                      [Download]
                      Lädt...
                      X