1

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

4

1 回答 1

0

一种可能的选择是在 Javascript 中使用全局对象将条目存储在您的购物车中。您可以通过创建一个变量来做到这一点，例如 'var cartArr=[];' 在你的javascript中，然后当一个项目被添加到购物车时，编写一个更新cartArr变量的函数。然后只需在灯箱中引用它。

**请注意，这是未经测试的，仅作为从灯箱访问的一种可能方式的示例。另请注意，您需要添加功能以验证商品是否已经在购物车中，然后增加，以及从购物车中删除。

希望能帮助到你。

    <?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);
}

===附加

    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;
    }

===测试页面=== 使用它来测试和显示信息以及它在做什么......这是一个很好的学习机会。请记住，最好学习和理解您的代码以供将来添加和维护。“授人以鱼，养其一日。授人以渔，养其一生”

<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>
于 2013-05-20T13:52:34.870 回答