将值传递到灯箱中

Question

I need help passing values into a lightbox to displays shopping cart information.

Currently i have a simple setup just displaying a static sentence.

Javascript Code:

function displayHideBox(boxNumber) 
{ 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
        document.getElementById("LightBox"+boxNumber).style.display="block";
        document.getElementById("grayBG").style.display="block"; 
    } else { 
        document.getElementById("LightBox"+boxNumber).style.display="none";
        document.getElementById("grayBG").style.display="none"; 
    } 
} 

HTML code:

<a href="<?$_SERVER['PHP_SELF']?>?action=add&id=<?=$id;?>" onclick="displayHideBox('1'); return false;">Open Box</a>

<div id="grayBG" class="grayBox" style="display:none;"></div> 
<div id="LightBox1" class="box_content" style="display:none;"> 
<table cellpadding="3" cellspacing="0" border="0"> 
  <tr align="left"> 
    <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->Text of the box!!!</p></td> 
  </tr> 
</table> 
</div> 

i have set up a simple shopping cart and currently when you add a product it goes to the shopping cart page where it creates a session and displays your items in your cart with options to remove or continue shopping. But when you add an item to your cart i need it to display a light box showing that items info and other items in shopping cart.

here is the code currently for the "add to cart" feature:

<table border="1">

    <?php
        //Select all of the relevant part details
        $prod_query = 'SELECT * FROM *****.*****';
        $prod_details = db_query_into_array_enhanced($mysql_connection, $prod_query);                       
        $count = count($prod_details);
        for($i = 0; $i < $count; $i++) 
            {?>         
             <tr>
                <? $id = $prod_details[$i]['catID'];?>
                 <td><?=$prod_details[$i]['catID'];?></td>
                 <td><?=$prod_details[$i]['shortDescription'];?></td>
                 <td><?=$prod_details[$i]['rrp'];?></td>
                 <td><a href="cart.php?action=add&id=<?=$id;?>">Add To Cart</a></td>

             </tr>
        <?}?>
</table>


<a href="cart.php">View Cart</a>

So really I think my question is how do i get this dynamic data into my lightbox?

i hope i have explained this well enough and that someone can help me...thanks in advance

Answer 1

One possible option would be to use a global object within Javascript to store entries in your cart. You can do this by creating a variable such as 'var cartArr=[];' in your javascript, and then when an item is added to the cart write a function that updates the cartArr variable. Then just reference that within the lightbox.

**Please note that this is untested, and is meant as an example of one possible way to access from a lightbox. Also note that you would need to add the functions to verify if the item was already in the cart and then increment, as well as to remove from the cart.

Hope it helps.

    <?php
            //Select all of the relevant part details
            $prod_query = 'SELECT * FROM *****.*****';
            $prod_details = db_query_into_array_enhanced($mysql_connection, $prod_query);                       
            $count = count($prod_details);
            for($i = 0; $i < $count; $i++) 
                {?>         
                 <tr>
                    <? $id = $prod_details[$i]['catID'];?>
                     <td><?=$prod_details[$i]['catID'];?></td>
                     <td><?=$prod_details[$i]['shortDescription'];?></td>
                     <td><?=$prod_details[$i]['rrp'];?></td>
                     <td><a href="cart.php?action=add&id=<?=$id;?>">Add To Cart</a></td>
                echo "
                <script type=\"text/javascript\">
                var cartitem = {id:$prod_details[$i]['catID'], desc:$prod_details[$i]['shortDescription'], rrp:$prod_details[$i]['rrp']};
               addToCartJs(cartitem);
                </script>
            ";
                 </tr>
            <?}?>

====js

var cartArr = [];

function addToCartJs(item){
  cartArr.push(item);
} 

===appended

    function setCartDisplay(boxNumber){
        var itemdisplay = '';
        for(var i=0; i<cartArr.length;i++){
            var itemdisplay = '<span class="cartdisplay">ItemNo:'+cartArr[i].id+'</span>';
            itemdisplay += '<span class="cartdisplay">Description:'+cartArr[i].desc+'</span>';
        }
        document.getElementById("LightBox"+boxNumber).innerHTML = itemdisplay;
    }

===testing page=== Use this to test and display the information and what it is doing... this is a great learning opportunity. Remember, it is better to learn and understand your code for future additions and maintenance. "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime"

<div id="LightBox1" class="box_content" style="display:none;"> 
<script type="text/javascript">
var cartArr = [];

function testCartItem(){
    var cartitem = {id:1001, desc:'description here', rrp:1002 };
    addToCartJs(cartitem);
}

function addToCartJs(item){
  cartArr.push(item);
} 

function setCartDisplay(boxNumber){
    var itemdisplay = '';
    for(var i=0; i<cartArr.length;i++){
        var itemdisplay = '<span class="cartdisplay">ItemNo:'+cartArr[i].id+'</span><br>';
        itemdisplay += '<span class="cartdisplay">Description:'+cartArr[i].desc+'</span>';
    }
    document.getElementById("LightBox"+boxNumber).innerHTML = itemdisplay;
    document.getElementById("LightBox"+boxNumber).style.display="block";
}

testCartItem();
console.log(cartArr);
setCartDisplay(1);
</script>