将图像传递到变量中的模板

Question

I have a problem in one of my projects for which I cannot find a solution.I have an array of products product that contains the title, the description, the price and how many pieces of this type of product there are in my shop.

type product struct {
Title       string
Description string
Price       int
Pieces      int
}

The urls for the images of each product come from a json as strings, grouped by products. I have a main page in which I include some blocks(the header, the footer, the sidebar, a template for the product cards which I apply to all the products) to which I pass the content of the variable product.

<div class="container col-lg-12 main">
{{render "blocks/storefront-header.html"}}
<div class="col-lg-12 padd_class" style="padding-left:10px;padding-right:10px;padding-bottom:10px">
      <div class="col-lg-12" style="padding-right:70px;padding-left:70px">
        <div class="row">
            {{range .myproducts}}
                {{template "blocks/product-card.html" .}}
            {{end}}
        </div>
    </div>
</div>

The product card contains the title, the price, the description of the product and some divs in which images should be put.

 <div class="col-lg-12" style="padding-bottom:5px">
  <!-- images -->
 </div>
 <div class="card-block" style="width:100%">
   <div class="pull-right" style="margin-right:-15px">
     <h3 class="pull-right  price">{{.Price}}</h3>
   </div>
   <h4 class="card-title">{{.Title}}</h4>
   <p class="card-text">{{.Description}}</p>
   <button  class="btn btn-primary col-lg-12 classBuy  classbtn ">View product</button></a>
 </div>

What I need to do is pass the product details with the corresponding images(because each product should have at least one image, but there is no specific number of images that the seller could upload) to the template for the cards so that my page will display both the details and the images of the each product, but together, in the same card. Basically, the card should contain the product details and the images for this specific item. This is the go code that I use:

iris.UseTemplate(html.New(html.Config{Layout:    "pages/_layout.html"})).Directory("./views", ".html")
iris.Static("/img", "./img", 1)
iris.Static("/css", "./css", 1)
iris.Static("/js", "./js", 1)

type ProductList []product
var myproducts = ProductList{
{"bracelet", "descr", 10, 7},
{"hat", "descr", 3, 5},
{"scarf", "descr", 3, 0},
}

iris.Get("/dashboard", func(ctx *iris.Context) {
ctx.Render("pages/dashboard.html", iris.Map{"myproducts": myproducts},  iris.RenderOptions{"gzip": true})
  })
iris.Listen(":8080")

What I tried to do was to pass two variables, the one of products and the one of the images to the same template, the one for the cards, but it didn`t work. Does anyone have an idea about the way I could achieve this? Thank you for your time!

Answer 1

One simple solution is by changing the declaration of product to includes images URL, e.g.

type product struct {
    Title       string
    Description string
    Price       int
    Pieces      int
    ImagesURL   []string
}
myproducts := []product {
    //initialisation
}

or create new type by struct composition

type productWithImage struct {
    product
    ImagesURL  []string
}
myproducts := []productWithImage {
    {product: product {"bracelet", "descr", 10, 7}, ImagesURL: []string{...}},
    //initialisation
}

Now you can pass a single variable to template and using {{range .ImagesURL}} to access the image URL in your product-card.html.