XT:Comemrce bekommt ein Ajax Auftritt

http://bit.ly/xtcommerce_ajax

Entsprechend der letzten Anküdigung und darauf folgende Nachfragen habe ich das XT Commerce Template von yaml auf Ajax umgeschrieben.

Die Integration ist einfach :-)

in die general.js.php kommt folgendes

<script type="text/javascript"><!--
function RequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Ihr Browser unterstützt diese Funktion leider nicht.");
}
}
var connect = RequestObject();
function storeText()
{
if (connect.readyState == 4 || connect.readyState == 0) {
var data = escape(document.getElementById('shout_text').value);
connect.open("GET", 'shoutbox.php?message=' + data, true);
connect.onreadystatechange = getResponse;
connect.send(null);
}
}
function search_start()
{
if (connect.readyState == 4 || connect.readyState == 0) {
var data = escape(document.getElementById('txtSearch').value);
connect.open("GET", 'adv_search_result.php?txtSearch=' + data, true);
document.getElementById('col3_innen').innerHTML = ' <h1>Suche </h1>für <b>'+data+'</b> wird geladen.<br>Bitte um etwas Geduld...<br><p align="center"><img src="/images/loading.gif" border="0"></p>';
connect.onreadystatechange = getSearch;
connect.send(null);
}
}
function search_start_over()
{
if (connect.readyState == 4 || connect.readyState == 0) {
connect.open("GET", 'adv_search_result.php<?=$_SERVER["PATH_INFO"];?>?<?=$QUERY_STRING;?>', true);
document.getElementById('col3_innen').innerHTML = ' <h1>Suche </h1>für <b>'+data+'</b> wird geladen.<br>Bitte um etwas Geduld...<br><p align="center"><img src="/images/loading.gif" border="0"></p>';
connect.onreadystatechange = getSearch;
connect.send(null);
}
}
function getSearch() {
if (connect.readyState == 4 ) {
var data = connect.responseText;
document.getElementById('col3_innen').innerHTML = data;
}
}
function getResponse() {
if (connect.readyState == 4) {
var data = connect.responseText;
document.getElementById('shoutboxArea').innerHTML = data;
}
}


 
var LoaderObject = function()
{
    this.connection                = false;
    this.running                = false;
    this.requestQueue            = new Array();
    this.requestCounter            = 0;
    this.requestQueueCounter    = 0;
};
 
 
LoaderObject.prototype.initialize = function()
{
    if (window.XMLHttpRequest)
    {
        this.connection = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            this.connection = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                this.connection = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                return false;
            }
        }
    }
 
    return true;
};
 
 
LoaderObject.prototype.runRequest = function()
{
    if(this.running)
    {
        return false;
    }
 
    if(!this.connection)
    {
        var reconnected = this.initialize();
        if(!reconnected)
        {
            return false;
        }
    }
 
    this.running = true;
 
    var request = this.requestQueue[this.requestCounter];
 
    if
    (
        !request['url'] ||
        !request['elementId']
    )
    {
        return false;
    }
 
    try
    {
        this.connection.open('GET', request['url'], true);
    }
    catch(e)
    {
        return false;
    }
 
    this.connection.onreadystatechange = function()
    {
        if (Loader.connection.readyState == 4)
        {
            
                document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;
 
                Loader.requestCounter++;
                Loader.requestQueueCounter--;
 
                if (Loader.requestQueue.length > Loader.requestCounter)
                {
                    Loader.running = false;
                    setTimeout("Loader.runRequest()",100);
                }
                else
                {
                    Loader.running = false;
                    Loader.requestQueue = new Array();
                    Loader.requestCounter = 0;
                    Loader.requestQueueCounter = 0;
                }
           
        }
        else
            {
                 document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = ' Es wird geladen.<br>Bitte um etwas Geduld...<br><p align="center"><img src="/images/loading.gif" border="0"></p>';
                 }
    };
 
    this.connection.send(request['send']);
    return true;
};
 
 
LoaderObject.prototype.add = function(requestObject)
{
    var requestsParams = requestObject.split('|');
 
    this.requestQueue[this.requestQueue.length] = {
            'elementId'        : requestsParams[0]        || false,
            'url'            : requestsParams[1]        || false
    };
 
    this.requestQueueCounter++;
}
 
 
LoaderObject.prototype.register = function(request)
{
 
    if(typeof(request) != 'string')
    {
        return false;
    }
 
    var requestObjects    = request.split(',');
 
    if(typeof(requestObjects) == 'object')
    {
        for(var index in requestObjects)
        {
            this.add(requestObjects[index]);
        }
    }
 
    if
    (
        !this.running &&
        this.requestQueueCounter > 0
    )
    {
        this.runRequest();
    }
 
    return null;
};
 

    var Loader = new LoaderObject();
    
    

      function scrltop()            
                {
 
                       $(window).scroll("top");
                } ;
       

 
var arrowimages={down:['downarrowclass', 'images/down.gif', 23], right:['rightarrowclass', 'images/right.gif']}

var jqueryslidemenu={

animateduration: {over: 400, out: 800}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $("a")
/*.mouseover(function(){
$(this).css("background", "red");
})
.mouseout(function(){
$(this).css("background", "blue");
})*/
.click(function(event){
$(this)
event.preventDefault();
});
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
        /*    $curobj.children("a:eq(0)").append(
                '<img src="'+ (arrowsvar.right[1])
                +'" class="' + (arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            */
                        
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft= 0
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        $targetul.css({left:menuleft+"px", top:0, width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
    
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//--></script>

in der header.php

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Dann in den entsprechenden inc. Dateien z.B. xtc_href_link.inc.php

   return $link.'" onclick="JavaScirpt:Loader.register(\'col3_innen|'.$link.'/xtemplate/ajax/#ptop\');';

Dann noch ein Template :-)

    <div id="col3_new" class="floatbox" >
        <a name="ptop"></a>
<script type="text/javascript">
     scrltop();
       
    </script>

          <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />    
              {$add_bussines}
                {if $BANNER}
     <div id="slider">
            <ul>                
                {$BANNER}
                </ul>
        </div>
        {/if}
              {$main_content}    <br>    {$MODULE_new_products}
              </div>

und noch der Switch in allen aufrufenden Dateien

if($_GET["xtemplate"] == "ajax")$smarty->display(CURRENT_TEMPLATE.'/ajax.html');
else
{
$smarty->display(CURRENT_TEMPLATE.'/index.html');
}

viel Spaß

Thomas Ruta

Wenn Ihr Hilfe braucht oder noch Fragen habt... einfach an mich. Das ganze ist noch nicht fertig. Bin mir aber sicher in den nächsten Tagen die Bugs gefixed zu haben.

http://bit.ly/xtcommerce_ajax