Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Warenkorb Box mit jQuery Slider - Position festlegen

    Clever

    • Schreiberling
    • Beiträge: 257
    Hallo,

    ich hab das Modul "Warenkorb jQuery SlideOut" eingebaut und mittels den Änderungen von Markus dort im modified eCommerce Shopsoftware auch zum laufen bekommen.

    Nun möchte ich die Box gerne fixed am rechten unteren Rand platzieren...

    Code: PHP  [Auswählen]
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery-1.3.js'; ?>"></script>
            <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.cycle.all.js'; ?>"></script>
            <script type="text/javascript">
             $(document).ready(function(){
             $('#myslides').cycle({
             fx: 'fade',
             speed: 2500,
             timeout: 4500,
             next:   '#myslides',
             pause:   1
             });
             });
            </script>

    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.tabSlideOut.v1.3.js'; ?>"></script>

             <script>
             $(function(){
                 $('.slide-out-div').tabSlideOut({
                     tabHandle: '.handle',                              //class of the element that will be your tab
                     pathToTabImage: '<?php echo 'templates/'.CURRENT_TEMPLATE.'/img/contact_tab.png'; ?>',          //path to the image for the tab (optionaly can be set using css)
                     imageHeight: '122px',                               //height of tab image
                     imageWidth: '40px',                               //width of tab image
                     tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                     speed: 300,                                        //speed of animation
                     action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                     topPos: '198px',                                   //position from the top
                     fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
                 });
             });

             </script>
             <script type="text/javascript">

    $(document).ready(function(){

      //hide toolbar and make visible the 'show' button
            $("span.downarr a").click(function() {
        $("#toolbar").slideToggle("fast");
        $("#toolbarbut").fadeIn("slow");
      });

      //show toolbar and hide the 'show' button
      $("span.showbar a").click(function() {
        $("#toolbar").slideToggle("fast");
        $("#toolbarbut").fadeOut();
      });

      //show tooltip when the mouse is moved over a list element
      $("ul#social li").hover(function() {
             $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
        $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
            $(this).find("div").hide();
        });
      });

      //don't jump to #id link anchor
      $(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
       return false;
            });

      //show quick menu on click
            $("span.menu_title a").click(function() {
             if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
             $(".quickmenu").fadeIn("fast"); //show menu on click
             }
             else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
          $(".quickmenu").fadeOut("fast"); //hide menu on click
        }
            });

            //hide menu on casual click on the page
            $(document).click(function() {
             $(".quickmenu").fadeOut("fast");
             $(".quickmenu").css({'vivibility': 'hidden'});
            });
            $('.quickmenu').click(function(event) {
             event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
            });

    });

    </script>
    <script type="text/javascript" src="highslide/highslide.js"></script>
    <script type="text/javascript">
        hs.graphicsDir = 'highslide/graphics/';
        hs.outlineType = 'rounded-white';
    </script>
    <script type="text/javascript">
       hs.flushImgSize = true;
    </script>

    und auch die css...

    Code: CSS  [Auswählen]
    .slide-out-div {
    padding: 20px;
    width: 250px;
    background-image: url(../../img/cartbg.jpg);background-repeat: repeat-x;
    background-color: #b6b6b6;
    border: #b9b9b9 1px solid;
    }

    versuchte ich nun auf alle möglichen Arten zu verändern um die Box unten rechts zu platzieren,
    leider war sie entweder unten links oder rechts mittig - oder wenn ich sie mittels X Pixel nach unten schiebe - ist sie nur teilwise lesbar...
    mit Pixeln nach rechts schieben geht auch nicht weil jeder eine andere Bildschirmgröße hat.
    Wenn ich aber "right-bottom" oder "bottom-right" oder position: absolute; right: 5px
    oder ähnliche Befehle in css oder general.js.php einsetze - wird es entweder komplett ignoriert, oder aber die Box wandert sofort ganz nach unten außerhalb des Sichtbereiches des Bildschirms.

    Warum herkömmliche CSS Anweisungen nicht greifen versteh ich nicht.  :panic:

    Hat jemand 'ne Idee für mich ?

    Linkback: https://www.modified-shop.org/forum/index.php?topic=12875.0

    h-h-h

    • modified Team
    • Beiträge: 4.563
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #1 am: 12. Mai 2011, 18:28:52
    Wenn jetzt ein Link zum Shop vorhanden gewesen wäre hättest Du den korrekten Code bekommen.
    Somit gibt’s nur 3 Stichworte: position:, bottom:, right:.

    Vermutlich wird auch an dem Javascript-Teil etwas angepasst werden müssen:

    Code: Javascript  [Auswählen]
       tabLocation: 'left',    //side of screen where tab lives, top, right, bottom, or left
       topPos: '198px',    //position from the top

    Schon als ich dieses Modul gesehen habe musste ich mit dem Kopf schütteln.
    Ein jQuery Update hätte die Funktion slideToggle verfügbar gemacht und das ganze wäre mit 1-5 Zeilen(je nach Kompression) JS erledigt gewesen.
    Ohne Update wäre es zwar nicht mit ganz so wenig Code machbar gewesen, trotzdem im Vergleich zu dem genannten Modul mit viel weniger. ;)

    Wie sagt man so schön, mit Kanonen auf Spatzen schießen.

    Gruß

    h-h-h

    Clever

    • Schreiberling
    • Beiträge: 257
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #2 am: 12. Mai 2011, 19:02:00
    tablocation hab ich doch schon auf "bottom"
    topPos aber hilft mir nicht... unten ist unten ...ich will aber nach rechts

    rightPos
    leftPos
    usw aber akzeptiert er nicht. :-)

    auch "bottom-right" hilft nicht.

    ein Link zum Shop geht so nicht, der ist unter PW-Schutz ein Rohbau eben.

    aber ich hab 5 Stunden gegooglet - welche Befehle eigentlich gültig sind - und gar nix gefunden.

    also weiß ich eben nicht wie es korrekt heißen muss... ist rightPos überhaupt ein gültiger Wert ?

    h-h-h

    • modified Team
    • Beiträge: 4.563
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #3 am: 12. Mai 2011, 19:56:28
    [...]

    Code: PHP  [Auswählen]
    ...
            <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.cycle.all.js'; ?>"></script>
    ...

    [...]


    Wenn Du die Javascript Datei bei Dir local hast, kannst Du sie einfach anpassen:

    Code: Javascript  [Auswählen]
            if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
                obj.css({
                    'height' : properties.containerHeight,
                    'top' : settings.topPos
                });

    Dort einfach 'top' mit 'bottom' ersetzen, falls bedarf besteht kann auch noch topPos umbenannt werden.
    Mit topPos wird dann der Abstand von unten angegeben.

    Gruß

    h-h-h

    Clever

    • Schreiberling
    • Beiträge: 257
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #4 am: 12. Mai 2011, 20:28:14
    Danke  :pro:

    war allerdings die jquery.tabSlideOUt v1.3 in der die Infos standen. :-)
    aber nun passt es...
    Thank You :-)

    h-h-h

    • modified Team
    • Beiträge: 4.563
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #5 am: 12. Mai 2011, 20:38:10
    Argh!  :datz: Danke, dass Du mitdenkst.

    Gruß

    h-h-h

    cardraft

    • Backlink-Entferner
    • Neu im Forum
    • Beiträge: 5
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #6 am: 22. September 2011, 16:59:59
    Hallo an alle Erst einmal.

    Ich habe seit heute den Warenkorb per Slider eingebaut, wie es hier besprochen wurde.

    Nun würde ich gerne, dass beim Kauf eines Artikels das div geslidet wird, um den Inhalt des Warenkorbs zu sehen.
    Am besten wäre natürlich ein onclick Ereignis auf dem Kaufbutton.
    Weiss irgendwer wie ich das bewerkstelligen kann??

    Gruß
    euer cardraft

    PCPlanet

    • Neu im Forum
    • Beiträge: 26
    • Geschlecht:
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #7 am: 25. September 2011, 23:58:34
    ich hab den Slider mal testweise eingebaut, bekomme allerdings im Internet Explorer ein fehlendes Bild - im Firefox ist alles o.k.
    Screenshots anbei - hat jemand eine Idee

    h-h-h

    • modified Team
    • Beiträge: 4.563
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #8 am: 26. September 2011, 00:09:15
    Hallo,
    was steht bei Dir in der "box_cart.html"?

    Code: PHP  [Auswählen]
    {foreach name=aussen item=products_data from=$products}
                            <p>{$products_data.QTY}&nbsp;x&nbsp;<a href="{$products_data.LINK}">{$products_data.NAME|truncate:20:"...":true}</a></p>
    {/foreach}

    Dieser Bereich interessiert mich besonders.

    Gruß h-h-h

    PCPlanet

    • Neu im Forum
    • Beiträge: 26
    • Geschlecht:
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #9 am: 26. September 2011, 13:29:26
    Das hab ich unverändert aus dem Download von Markus Düssel, der hatte das für den modified eCommerce Shopsoftware umgeschrieben

    Code: PHP  [Auswählen]
          </div><br>
          {foreach name=aussen item=products_data from=$products}
            <div style="border: 1px  dotted #999999; padding-top:5px; padding-bottom:5px;">
             <div style="width:85%; font-size:11px; position: absolute;">
             &nbsp;{$products_data.QTY}&nbsp;x&nbsp;
             <a href="{$products_data.LINK}">{$products_data.NAME|truncate:25:"...":true}</a>
             </div>
             <div style="width:98%;" align="right">
             <a href="{$products_data.LINK}"><img src="{$products_data.PRODUCTS_IMAGE}" style="Border: 0px; width: 45px;" alt="{$products_data.PRODUCTS_NAME}" />&nbsp;</a>
             </div>

    </div>

    cardraft

    • Backlink-Entferner
    • Neu im Forum
    • Beiträge: 5
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #10 am: 30. September 2011, 11:28:47
    So ich habe nun selber raus gefunden wie das funktioniert und möchte euch das nicht vorenthalten.
    Im Endeffekt müsst ihr über jQuery das Div Modul auswählen und die Funktion click auslösen.

    Der Befehl lautet dann folgerichtig:

    Code: Javascript  [Auswählen]
    onclick="$('.slide-out-div a').click();"

    Dann öffnet sich das Div auch beim Klick auf den Kaufbutton. Ich arbeite gerade daran, dass das Artikelbild beim Kauf in das Div fliegt. Mal schauen wie weit ich komme.

    PCPlanet

    • Neu im Forum
    • Beiträge: 26
    • Geschlecht:
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #11 am: 30. September 2011, 12:29:58
    Im YAML Template ist der Slider verbaut und funktioniert - muss man jetzt auf ein allgemeines Template ummünzen. Copyright beachten. Ich schau mal ob ich das hin kriege, nehme aber jede Unterstüzung an.

    cardraft

    • Backlink-Entferner
    • Neu im Forum
    • Beiträge: 5
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #12 am: 30. September 2011, 13:05:27
    Naja die Box läuft bei mir auch. Ich wollte als zusätzliche Funktion einbauen, dass das Warenkorbdiv öffnet, wenn man auf in den Warenkorb klickt und dann geöffnet bleibt, bis man wieder auf iergendetwas anderes klickt.

    Die oben genannte Funktion:

    [...]
    Code: Javascript  [Auswählen]
    onclick="$('.slide-out-div a').click();"
    [...]

    bewirkt leider nur, dass sich das Div öffnet, aber auch gleich wieder schließt. Wenn ich ihm zusätlich die Klasse mitgebe (wie es das Javascript tut) also mit dem Befehl:

    Code: Javascript  [Auswählen]
    $('.slide-out-div').addclass('open');

    übernimmt das div die Klasse nicht und schließt sich somit wieder. Bisher ist mir verborgen geblieben, woran das liegen kann. Vielleicht hat ja der ein oder andere eine Idee.

    sammar

    • Frisch an Board
    • Beiträge: 93
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #13 am: 14. Januar 2013, 14:12:17
    Hallo zusammen,

    wenn der Kunde auf den Button (in den Warenkorb) drückt, sieht er nicht, dass sich ein Artikel im Warenkorb befindet, ist es möglich, dass z.b. neben dem Aufschrift Warenkorb in Klammern eine 1 steht (für ein Artikel), so weiß der Kunde nämlich, dass sich ein Artikel im Warenkorb befindet, hoffe Ihr versteht was ich meine, Danke

    Martin79

    • Neu im Forum
    • Beiträge: 44
    Re: Warenkorb Box mit jQuery Slider - Position festlegen
    Antwort #14 am: 14. Februar 2013, 14:40:58
    Hallo,

    ich habe das Problem das der Warenkorb-Slider im Internet-Explorer nicht richtig angezeigt wird.
    Bei Firefox ist alles okay.

    Woran kann das liegen?
    Hier der Shop: www.my-erotik-shop.de

    1. Bild: Internet-Explorer
    2. Bild: Firefox

    MfG
    Martin
    2 Antworten
    1808 Aufrufe
    07. Oktober 2018, 22:13:19 von hypdwarf
    4 Antworten
    2842 Aufrufe
    27. Februar 2013, 17:37:23 von jannemann
    10 Antworten
    5514 Aufrufe
    05. Februar 2013, 15:57:56 von falcon78
    20 Antworten
    22589 Aufrufe
    05. Oktober 2010, 12:00:19 von Iamex
               
    anything