Ergebnis 1 bis 7 von 7

Thema: Mengeneingabefeld mit Pfeilen

  1. #1
    Padawan Stufe VIII Avatar von klartexter
    Registriert seit
    19.02.2006
    Ort
    Augsburg
    Beiträge
    1.344
    Themen
    110
    DANKE
    50
    Erhaltene Danke: 116

    Standard 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:

    cart2.png

    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.
    Immer mit der Ruhe - ich komme noch früh genug zu spät!

  2. #2
    Jedi-Ritter Avatar von webchills
    Registriert seit
    30.10.2004
    Ort
    Österreich
    Beiträge
    6.839
    Themen
    94
    DANKE
    3
    Erhaltene Danke: 1.186

    Standard

    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:
    https://sheffieldblue155.zencartdemo...products_id=27

    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;}
    !!! kostenloser Support ausschließlich im Forum - Nicht per Email, nicht per Telefon und nicht per PM !!!

  3. Folgender User sagt Danke zu webchills für den nützlichen Beitrag:

    klartexter (07.08.2019)

  4. #3
    Padawan Stufe VIII Avatar von klartexter
    Registriert seit
    19.02.2006
    Ort
    Augsburg
    Beiträge
    1.344
    Themen
    110
    DANKE
    50
    Erhaltene Danke: 116
    Erstellt von

    Standard

    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.
    Immer mit der Ruhe - ich komme noch früh genug zu spät!

  5. #4
    Jedi-Ritter Avatar von webchills
    Registriert seit
    30.10.2004
    Ort
    Österreich
    Beiträge
    6.839
    Themen
    94
    DANKE
    3
    Erhaltene Danke: 1.186

    Standard

    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
    !!! kostenloser Support ausschließlich im Forum - Nicht per Email, nicht per Telefon und nicht per PM !!!

  6. #5
    Padawan Stufe VIII Avatar von klartexter
    Registriert seit
    19.02.2006
    Ort
    Augsburg
    Beiträge
    1.344
    Themen
    110
    DANKE
    50
    Erhaltene Danke: 116
    Erstellt von

    Standard

    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.

    qty.png qty2.png
    Immer mit der Ruhe - ich komme noch früh genug zu spät!

  7. #6
    Jedi-Ritter Avatar von webchills
    Registriert seit
    30.10.2004
    Ort
    Österreich
    Beiträge
    6.839
    Themen
    94
    DANKE
    3
    Erhaltene Danke: 1.186

    Standard

    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;
    }
    !!! kostenloser Support ausschließlich im Forum - Nicht per Email, nicht per Telefon und nicht per PM !!!

  8. #7
    Padawan Stufe VIII Avatar von klartexter
    Registriert seit
    19.02.2006
    Ort
    Augsburg
    Beiträge
    1.344
    Themen
    110
    DANKE
    50
    Erhaltene Danke: 116
    Erstellt von

    Standard

    Zitat 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.
    Immer mit der Ruhe - ich komme noch früh genug zu spät!

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  
zen-cart-pro.at
Zen Cart ist eine kostenlose unter der GPL-Lizenz veröffentlichte Open-Source Shopsoftware. Das System wird in den USA entwickelt, die amerikanische Website dazu ist www.zen-cart.com

Die deutsche Zen-Cart Version, um die es hier auf zen-cart-pro.at geht, ist eine Anpassung der amerikanischen Version an die Bedürfnisse von Onlineshopbetreibern im deutschsprachigen Raum.
Die amerikanische Zen-Cart Version berücksichtigt viele rechtliche Erfordernisse nicht, denen ein Onlineshop im deutschsprachigen Raum unterworfen ist. Daher wurde die deutsche Zen-Cart Version nicht nur bloß ins Deutsche übersetzt, sondern auch funktional auf die Anforderungen, die an Onlineshops in Deutschland, Österreich und der Schweiz gestellt werden, angepasst.

Die amerikanische Version ist extrem abgespeckt und stellt weiterführende Funktionalitäten durch zusätzliche Module bereit, die erst mühsam manuell installiert werden müssen. Zahlreiche häufig genutzte Erweiterungen und eigene Entwicklungen sind in der deutschen Zen Cart Version bereits vorinstalliert.
Die deutsche Zen-Cart Version bietet außerdem einen völlig multilingualen Adminbereich. Weitere für die deutsche Zen Cart Version angepasste Erweiterungen stehen in unserem Downloadbereich zur Verfügung.

Die deutsche Zen Cart Version wird seit 15 Jahren von einem Team von Entwicklern in Österreich und Deutschland betreut, weiterentwickelt und supportet und steht kostenlos in unserem Downloadbereich zur Verfügung.

[mehr]
Follow Us
  • zen-cart-pro-at auf Twitter
  • zen-cart-pro-at auf Github
  • zen-cart-pro-at auf SourceForge
Aktuelle Version
Zen Cart 1.5.6c deutsch
vom 01.09.2019
[Download]

unterstützen
Unterstütze die Weiterentwicklung der deutschen Zen Cart Version mit einer Spende!

Spende für die Weiterentwicklung der deutschen Zen Cart Version