Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Matthew Barnes
PLUS
Matthew Barnes
Courses Plus Student 16,550 Points
Posted by Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Multidimensional loop and Concatenation

Hi guys,

I've just started the php course, and while working through it, I'm creating a clothing shop to practice. I've made a data file holding the data for each product, and I can display this data on the results page. However, each product has alternative colors which are set in an array, I'd like to display these in small div boxes and set the color of these boxes according the the 'altColor' array. I have basic styling for these color boxes (ie. height, width etc) in css, but want to dynamically change the color of these boxes using inline css and color keywords.

HTML Target:

<div class='box'>
    <a href='#'>

        <img  src='$item["img"]' alt='$item["title"]' style='$item["imgPosition"]' />

        <div class="info">
            <div class="details">
                <h5 class="name">$item["title"]</h5>
                <h5 class="price">Ā£$item["price"]</h5>
            </div>
            <div class="product-colors">
                <div class="color-box" style='background-color: $item[ "altColor"[1] ];'></div>
                <div class="color-box" style='background-color: $item[ "altColor"[2] ];'></div>
                <div class="color-box" style='background-color: $item[ "altColor"[n] ];'></div>
            </div>
        </div>

    </a>
</div>

Basic Data Array:

$mens[101] = [
  "title" => "Block Original T-Shirt",
  "img" => "img/clothing/men/tShirts/block-orig-black.jpg",
  "price" => 16,
  "color" => "black",
  "altColor" => array("black" , "white", "grey"),
  "category" => "tShirt"
];

Concatenation Function:

function get_item_html($id,$item){
  $output =  "<div class='box'><a href='#'><img src='"
  . $item["img"] 
  . "' alt='" 
  . $item["title"] 
  . "' style=' "
  . $item["imgPosition"]
  . "' /> <div class='info'><div class='details'><h5 class='name'>" 
  . $item["title"]
  . "</h5><h5 class='price'>Ā£"
  . $item["price"]
  . "</h5></div><div class='product-colors'>"

  //----- This is where I'm having problems ----//
  foreach($item["altColor"] as $color) {
    . "<div class='color-box' style='background-color:"
    .$color()
    .";'></div>"
  } 
  . "</div></div></a></div>";

 return $output;
}

Call Function on Results page: 

//Show male clothing
if ($menu == "M") {

  //If category is set
  if(isset($_GET["cat"])) {

    //for each item in the mens data array
    foreach ($mens as $id => $item) {

      //filter results depending on category
      if($_GET["cat"] == $item["category"]){
        echo get_item_html($id,$item);
      }
    }
  }
}

Sorry to use a lot of code but I'm at a loss! I can get the image, title etc to show, but I can't loop through and create these boxes. Thanks in advance!

Siddhant Mehta
Siddhant Mehta
Courses Plus Student 478 Points

I think I can help you if you can mail me complete file in zip singhashu163@gmail.com

1 Answer

Mike Costa
PLUS
Mike Costa
Courses Plus Student 26,362 Points
Mike Costa
Mike Costa
Courses Plus Student 26,362 Points

try this and see if it works: (i formatted your output var a little differently and looks liek you had everything correct except for inside that for loop, you were calling $color() when $color isn't a function, but the value of the array.

function get_item_html($id,$item){
  $output =  "<div class='box'><a href='#'><img src='" . $item["img"] . "' alt='" . $item["title"] . "' style=' " . $item["imgPosition"] . "' />";
  $output .= "<div class='info'><div class='details'><h5 class='name'>" . $item["title"] . "</h5><h5 class='price'>Ā£" . $item["price"] . "</h5></div><div class='product-colors'>";

  //----- This is where I'm having problems ----//
  foreach($item["altColor"] as $color) {
    $output .=  "<div class='color-box' style='background-color:" . $color . ";'></div>";
  } 
  $output .= "</div></div></a></div>";

 return $output;
}
Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points
Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Hi Mike Thanks for the solution, after reading the docs late last night I came to the same solution!

Appreciate your time!