menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

[golang gin框架] 26.Gin 商城项目-前台自定义商品列表模板, 商品详情数据渲染,Markdown语法使用

武飞扬头像
zhoupenghui168
帮助1人

一.前台自定义商品列表模板

当在首页分类点击进入分类商品列表页面时，可以根据后台分类中的分类模板跳转到对应的模板商品列表页面

1.管理后台商品分类模板设置如下图所示

学新通

2.代码展示

(1).商品控制器方法Category()完善

修改controllers/frontend/productController.go中的方法Category(), 判断分类模板,如果后台没有设置,则使用默认模板
  1.  
    // 根据商品分类获取分类下面的所有商品数据
  2.  
    func (con ProductController) Category(c *gin.Context) {
  3.  
    //获取分类id
  4.  
    cateId, _ := models.Int(c.Param("id"))
  5.  
    //当前页
  6.  
    page, _ := models.Int(c.Query("page"))
  7.  
    if page == 0 {
  8.  
    page = 1
  9.  
    }
  10.  
    //每一页显示的数量
  11.  
    pageSize := 2
  12.  
     
  13.  
    //获取当前分类
  14.  
    curCate := models.GoodsCate{}
  15.  
    models.DB.Where("id = ? ", cateId).Find(&curCate)
  16.  
     
  17.  
    //判断当前分类是否顶级分类,如果是,则获取对应的二级分类,如果不是,则获取对应的兄弟分类
  18.  
    subCate := []models.GoodsCate{}
  19.  
    var tempSlice []int
  20.  
    if curCate.Pid == 0 { // 当前分类是顶级分类,获取对应的二级分类
  21.  
    models.DB.Where("pid = ?", cateId).Find(&subCate)
  22.  
    //把二级分类id放到切片中
  23.  
    for i := 0; i < len(subCate); i {
  24.  
    tempSlice = append(tempSlice, subCate[i].Id)
  25.  
    }
  26.  
    } else { // 当前分类是二级分类,获取对应的兄弟分类
  27.  
    models.DB.Where("pid = ?", curCate.Pid).Find(&subCate)
  28.  
    }
  29.  
    //把请求的分类id放入切片
  30.  
    tempSlice = append(tempSlice, cateId)
  31.  
    //通过上面的分类id,获取商品相关数据
  32.  
    goodsList := []models.Goods{}
  33.  
    where := "cate_id in ?"
  34.  
    models.DB.Where(where, tempSlice).Where("status = ?", 1).Offset((page - 1) * pageSize).Limit(pageSize).Find(&goodsList)
  35.  
     
  36.  
    //获取总数量
  37.  
    var count int64
  38.  
    models.DB.Where(where, tempSlice).Table("goods").Count(&count)
  39.  
     
  40.  
    //定义请求的模板
  41.  
    tpl := "frontend/product/list.html"
  42.  
    //判断分类模板,如果后台没有设置,则使用默认模板
  43.  
    if curCate.Template != "" {
  44.  
    tpl = curCate.Template
  45.  
    }
  46.  
     
  47.  
    con.Render(c, tpl, gin.H{
  48.  
    "goodsList": goodsList,
  49.  
    "subCate": subCate,
  50.  
    "currentCate": curCate,
  51.  
    "page": page,
  52.  
    "totalPages": math.Ceil(float64(count) / float64(pageSize)),
  53.  
    })
  54.  
    }
学新通

(2).模板页面案例

  1.  
    {{ define "frontend/product/catetest.html" }}
  2.  
     
  3.  
    <!DOCTYPE html>
  4.  
    <html lang="en">
  5.  
    <head>
  6.  
    <meta charset="UTF-8">
  7.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
    <title>Document</title>
  10.  
    </head>
  11.  
    <body>
  12.  
    自定义模板
  13.  
    </body>
  14.  
    </html>
  15.  
    {{end}}
学新通

二.商品详情数据渲染,Markdown语法使用

1.后台商品相关页面

先来回顾一下后台商品相关属性功能页面
学新通
学新通
学新通

2.前端相关界面展示

学新通
学新通
学新通

3.路由代码

完善routers/frontendRouters.go前端路由
  1.  
    package routers
  2.  
     
  3.  
    import (
  4.  
    "goshop/controllers/frontend"
  5.  
    "github.com/gin-gonic/gin"
  6.  
    )
  7.  
     
  8.  
    //设置前端路由
  9.  
    func FrontendRoutersInit(r *gin.Engine) {
  10.  
    defaultRouters := r.Group("/")
  11.  
    {
  12.  
    //首页
  13.  
    defaultRouters.GET("/", frontend.IndexController{}.Index)
  14.  
    //商品分类对应的商品列表页面
  15.  
    defaultRouters.GET("/category:id", frontend.ProductController{}.Category)
  16.  
    //商品详情页
  17.  
    defaultRouters.GET("/detail", frontend.ProductController{}.Detail)
  18.  
    //获取商品图库信息：获取当前商品对应颜色的图片信息
  19.  
    defaultRouters.GET("/getImgList", frontend.ProductController{}.GetImgList)
  20.  
    }
  21.  
    }
学新通

3.控制器,模型代码

在controllers/frontend/productController.go中增加商品详情等方法
  1.  
     
  2.  
    //商品详情
  3.  
    func (con ProductController) Detail(c *gin.Context) {
  4.  
    //获取商品id
  5.  
    id, err := models.Int(c.Query("id"))
  6.  
    //判断商品id是否符合要求
  7.  
    if err != nil {
  8.  
    c.Redirect(302, "/")
  9.  
    c.Abort()
  10.  
    }
  11.  
    //1、获取商品信息
  12.  
    goods := models.Goods{Id: id}
  13.  
    models.DB.Find(&goods)
  14.  
     
  15.  
    //2、获取关联商品 RelationGoods
  16.  
    relationGoods := []models.Goods{}
  17.  
    //把数据库中保存的关联商品id转换成切片类型
  18.  
    goods.RelationGoods = strings.ReplaceAll(goods.RelationGoods, "，", ",")
  19.  
    relationIds := strings.Split(goods.RelationGoods, ",")
  20.  
    //查询关联商品
  21.  
    models.DB.Where("id in ?", relationIds).Select("id,title,price,goods_version").Find(&relationGoods)
  22.  
     
  23.  
    //3、获取关联赠品 GoodsGift
  24.  
    goodsGift := []models.Goods{}
  25.  
    goods.GoodsGift = strings.ReplaceAll(goods.GoodsGift, "，", ",")
  26.  
    giftIds := strings.Split(goods.GoodsGift, ",")
  27.  
    models.DB.Where("id in ?", giftIds).Select("id,title,price,goods_version").Find(&goodsGift)
  28.  
     
  29.  
    //4、获取关联颜色 GoodsColor
  30.  
    goodsColor := []models.GoodsColor{}
  31.  
    goods.GoodsColor = strings.ReplaceAll(goods.GoodsColor, "，", ",")
  32.  
    colorIds := strings.Split(goods.GoodsColor, ",")
  33.  
    models.DB.Where("id in ?", colorIds).Find(&goodsColor)
  34.  
     
  35.  
    //5、获取关联配件 GoodsFitting
  36.  
    goodsFitting := []models.Goods{}
  37.  
    goods.GoodsFitting = strings.ReplaceAll(goods.GoodsFitting, "，", ",")
  38.  
    fittingIds := strings.Split(goods.GoodsFitting, ",")
  39.  
    models.DB.Where("id in ?", fittingIds).Select("id,title,price,goods_version").Find(&goodsFitting)
  40.  
     
  41.  
    //6、获取商品关联的图片 GoodsImage
  42.  
    goodsImage := []models.GoodsImage{}
  43.  
    models.DB.Where("goods_id = ?", goods.Id).Limit(6).Find(&goodsImage)
  44.  
     
  45.  
    //7、获取规格参数信息 GoodsAttr
  46.  
    goodsAttr := []models.GoodsAttr{}
  47.  
    models.DB.Where("goods_id = ?", goods.Id).Find(&goodsAttr)
  48.  
     
  49.  
    //8、获取更多属性
  50.  
    /*
  51.  
    颜色:红色,白色,黄色 | 尺寸:41,42,43
  52.  
    切片
  53.  
    [
  54.  
    {
  55.  
    Cate:"颜色",
  56.  
    List:[红色,白色,黄色]
  57.  
    },
  58.  
    {
  59.  
    Cate:"尺寸",
  60.  
    List:[41,42,43]
  61.  
    }
  62.  
    ]
  63.  
     
  64.  
    goodsAttrStrSlice[0] 尺寸:41,42,43
  65.  
    tempSlice[0] 尺寸
  66.  
    tempSlice[1] 41,42,43
  67.  
     
  68.  
    goodsAttrStrSlice[1] 套餐:套餐1,套餐2
  69.  
     
  70.  
    */
  71.  
     
  72.  
    // 更多属性: goodsAttrStr := "尺寸:41,42,43|套餐:套餐1,套餐2"
  73.  
    goodsAttrStr := goods.GoodsAttr
  74.  
    //字符串替换操作
  75.  
    goodsAttrStr = strings.ReplaceAll(goodsAttrStr, "，", ",")
  76.  
    goodsAttrStr = strings.ReplaceAll(goodsAttrStr, "：", ":")
  77.  
    //实例化商品更多属性结构体
  78.  
    var goodsItemAttrList []models.GoodsItemAttr
  79.  
    //strings.Contains 判断字符串中有没有冒号(:)
  80.  
    if strings.Contains(goodsAttrStr, ":") {
  81.  
    //字符串替换操作:获取属性切片
  82.  
    goodsAttrStrSlice := strings.Split(goodsAttrStr, "|")
  83.  
    //创建切片的存储空间
  84.  
    goodsItemAttrList = make([]models.GoodsItemAttr, len(goodsAttrStrSlice))
  85.  
    for i := 0; i < len(goodsAttrStrSlice); i {
  86.  
    //strings.Split(s, sep string) 把字符串s按照sep转换成切片
  87.  
    //拆分 "尺寸:41,42,43
  88.  
    tempSlice := strings.Split(goodsAttrStrSlice[i], ":")
  89.  
    goodsItemAttrList[i].Cate = tempSlice[0]
  90.  
    //拆分 41,42,43
  91.  
    listSlice := strings.Split(tempSlice[1], ",")
  92.  
    goodsItemAttrList[i].List = listSlice
  93.  
    }
  94.  
    }
  95.  
     
  96.  
    //定义请求的模板
  97.  
    tpl := "frontend/product/detail.html"
  98.  
    con.Render(c, tpl, gin.H{
  99.  
    "goods": goods,
  100.  
    "relationGoods": relationGoods,
  101.  
    "goodsGift": goodsGift,
  102.  
    "goodsColor": goodsColor,
  103.  
    "goodsFitting": goodsFitting,
  104.  
    "goodsImage": goodsImage,
  105.  
    "goodsAttr": goodsAttr,
  106.  
    "goodsItemAttrList": goodsItemAttrList,
  107.  
    })
  108.  
    }
  109.  
     
  110.  
    //获取商品对应颜色的图库信息
  111.  
    func (con ProductController) GetImgList(c *gin.Context) {
  112.  
    //获取商品id
  113.  
    goodsId, err1 := models.Int(c.Query("goods_id"))
  114.  
    //获取商品对应的颜色id
  115.  
    colorId, err2 := models.Int(c.Query("color_id"))
  116.  
     
  117.  
    //查询商品图库信息
  118.  
    goodsImageList := []models.GoodsImage{}
  119.  
    err3 := models.DB.Where("goods_id = ? AND color_id = ?", goodsId, colorId).Find(&goodsImageList).Error
  120.  
    if err1 != nil || err2 != nil || err3 != nil {
  121.  
    c.JSON(http.StatusOK, gin.H{
  122.  
    "success": false,
  123.  
    "result": "",
  124.  
    "message": "参数错误",
  125.  
    })
  126.  
    return
  127.  
    }
  128.  
     
  129.  
    //判断 goodsImageList的长度 如果goodsImageList没有数据，那么我们需要返回当前商品所有的图库信息
  130.  
    if len(goodsImageList) == 0 {
  131.  
    models.DB.Where("goods_id = ?", goodsId).Find(&goodsImageList)
  132.  
    }
  133.  
    c.JSON(http.StatusOK, gin.H{
  134.  
    "success": true,
  135.  
    "result": goodsImageList,
  136.  
    "message": "获取数据成功",
  137.  
    })
  138.  
    }
学新通
在models/goodsItemAttr.go中定义一个商品更多属性的结构体
  1.  
    package models
  2.  
     
  3.  
    //商品更多属性结构体
  4.  
     
  5.  
    type GoodsItemAttr struct {
  6.  
    // 尺寸:41,42,43
  7.  
    Cate string //属性类型: 尺寸
  8.  
    List []string // 对应的值 [41,42,43]
  9.  
    }

4.main.go,tools.go

在前端渲染数据的时候，需要解析后台Markdown语法数据，这是就需要在models/tools.go中增加调用 Markdown语法的方法，这样就可以解析后台商品 规格与包装属性中的Markdown语法格式：
Markdown 是一种 轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档
当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息
更多语法参考： https://www.runoob.com/markdown/md-lists.html
在解析Markdown语法之前，需要 引入gomarkdown包，操作如下：
在tools.go中import github.com/gomarkdown/markdown,然后在main.go目录下 go mod tidy 更新就可以使用啦
models/tools.go中增加FormatAttr()方法
  1.  
    import (
  2.  
    "github.com/gomarkdown/markdown"
  3.  
    )
  4.  
     
  5.  
    /*
  6.  
    转换markdown格式
  7.  
    str就是markdown语法
  8.  
    例如:
  9.  
    **我是一个三级标题** <=> <h3>我是一个三级标题</h3>
  10.  
    **我是一个加粗** <=> <strong>我是一个加粗</strong>
  11.  
    */
  12.  
    func FormatAttr(str string) string {
  13.  
    tempSlice := strings.Split(str, "\n")
  14.  
    var tempStr string
  15.  
    for _, v := range tempSlice {
  16.  
    md := []byte(v)
  17.  
    output := markdown.ToHTML(md, nil, nil)
  18.  
    tempStr = string(output)
  19.  
    }
  20.  
    return tempStr
  21.  
    }
学新通
增加main.go中的自定义模板函数FormatAttr
  1.  
    //自定义模板函数,必须在r.LoadHTMLGlob前面(只调用,不执行, 可以在html 中使用)
  2.  
    r.SetFuncMap(template.FuncMap{
  3.  
    "UnixToTime": models.UnixToTime, //注册模板函数
  4.  
    "Str2Html": models.Str2Html,
  5.  
    "FormatImg": models.FormatImg,
  6.  
    "Sub": models.Sub,
  7.  
    "SubStr": models.SubStr,
  8.  
    "FormatAttr": models.FormatAttr,
  9.  
    })

5.html代码

渲染商品详情相关数据frontend/product/detail.html
  1.  
    {{ define "frontend/product/detail.html" }}
  2.  
     
  3.  
    {{ template "frontend/public/page_header.html" .}}
  4.  
     
  5.  
    {{ template "frontend/public/middle_nav.html" .}}
  6.  
     
  7.  
    <link rel="stylesheet" href="/static/frontend/css/product.css">
  8.  
     
  9.  
    <div class="jieshao mt20 w">
  10.  
    <div class="left fl">
  11.  
    <div class="swiper-container">
  12.  
    <div class="swiper-wrapper item_focus" id="item_focus">
  13.  
    {{range $key,$value := .goodsImage}}
  14.  
    <div class="swiper-slide">
  15.  
    <img src="{{$value.ImgUrl | FormatImg}}"/>
  16.  
    </div>
  17.  
    {{end}}
  18.  
    </div>
  19.  
     
  20.  
    <div class="swiper-pagination"></div>
  21.  
    <div class="swiper-button-next"></div>
  22.  
    <div class="swiper-button-prev"></div>
  23.  
    </div>
  24.  
    </div>
  25.  
    <div class="right fr">
  26.  
    <div class="h3 ml20 mt20">{{.goods.Title}}</div>
  27.  
    <div class="jianjie mr40 ml20 mt10">{{.goods.SubTitle}}</div>
  28.  
    <div class="jiage ml20 mt10">{{.goods.Price}}元 　<span class="old_price">{{.goods.MarketPrice}}元</span></div>
  29.  
    {{$goodsId := .goods.Id}}
  30.  
    {{$relationGoodsLen := len .relationGoods}}
  31.  
    {{if gt $relationGoodsLen 0}}
  32.  
    <div class="ft20 ml20 mt20">选择版本</div>
  33.  
    <div class="xzbb ml20 mt10 clearfix">
  34.  
     
  35.  
    {{range $key,$value := .relationGoods}}
  36.  
    <div class="banben fl {{if eq $value.Id $goodsId}}active{{end}}">
  37.  
    <a href="detail?id={{$value.Id}}">
  38.  
    <span>{{$value.GoodsVersion}}</span>
  39.  
    <span>{{$value.Price}}元</span>
  40.  
    </a>
  41.  
    </div>
  42.  
    {{end}}
  43.  
    </div>
  44.  
    {{end}}
  45.  
     
  46.  
    {{$goodsColorLen := len .goodsColor}}
  47.  
    {{if gt $relationGoodsLen 0}}
  48.  
    <div class="ft20 ml20 mt10">选择颜色</div>
  49.  
    <div class="xzbb ml20 mt10 clearfix" id="color_list">
  50.  
    {{range $key,$value:=.goodsColor}}
  51.  
    <div class="banben fl" goods_id="{{$goodsId}}" color_id="{{$value.Id}}">
  52.  
    <span class="yuandian" style="background:{{$value.ColorValue}}"></span>
  53.  
    <span class="yanse">{{$value.ColorName}}</span>
  54.  
    </div>
  55.  
    {{end}}
  56.  
    </div>
  57.  
    {{end}}
  58.  
     
  59.  
    {{$goodsItemAttrListLen := len .goodsItemAttrList}}
  60.  
    {{if gt $goodsItemAttrListLen 0}}
  61.  
    {{range $key,$value := .goodsItemAttrList}}
  62.  
    <div class="ft20 ml20 mt20">{{$value.Cate}}</div>
  63.  
    <div class="xzbb ml20 mt10 clearfix">
  64.  
    {{range $k,$v := $value.List}}
  65.  
    <div class="banben fl">
  66.  
    <span>{{$v}}</span>
  67.  
    </div>
  68.  
    {{end}}
  69.  
     
  70.  
    </div>
  71.  
    {{end}}
  72.  
    {{end}}
  73.  
    <div class="xqxq mt10 ml20">
  74.  
    <div class="top1 mt10">
  75.  
    <div class="left1 fl">{{.goods.GoodsVersion}} <span id="color_name"></span></div>
  76.  
    <div class="right1 fr">{{.goods.Price}}元</div>
  77.  
    <div class="clear"></div>
  78.  
    </div>
  79.  
    <div class="bot mt20 ft20 ftbc">总计：{{.goods.Price}}元</div>
  80.  
    </div>
  81.  
    <div class="xiadan ml20 mt10">
  82.  
    <input class="jrgwc" type="button" name="jrgwc" value="加入购物车"/>
  83.  
    </div>
  84.  
    </div>
  85.  
    <div class="clear"></div>
  86.  
    </div>
  87.  
     
  88.  
    <div class="container clearfix">
  89.  
    <div class="c_left">
  90.  
    <h2>看了又看</h2>
  91.  
    <div class="item">
  92.  
    <a target="_blank" href="#">
  93.  
    <img src="/static/upload/20211117/1637139107685884400.jpg"/>
  94.  
    <p class="price recommendLookPrice4183081">￥31.90</p>
  95.  
    <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
  96.  
    </a>
  97.  
    </div>
  98.  
    <div class="item">
  99.  
    <a target="_blank" href="#">
  100.  
    <img src="/static/upload/20211117/1637139107685884400.jpg"/>
  101.  
    <p class="price recommendLookPrice4183081">￥31.90</p>
  102.  
    <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
  103.  
    </a>
  104.  
    </div>
  105.  
    <div class="item">
  106.  
    <a target="_blank" href="#">
  107.  
    <img src="/static/upload/20211117/1637139107685884400.jpg"/>
  108.  
    <p class="price recommendLookPrice4183081">￥31.90</p>
  109.  
    <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
  110.  
    </a>
  111.  
    </div>
  112.  
    </div>
  113.  
     
  114.  
    <div class="c_right">
  115.  
    <ul class="detail_list clearfix">
  116.  
     
  117.  
    <li class="">详情描述</li>
  118.  
     
  119.  
    <li class="">规格参数</li>
  120.  
     
  121.  
    <li class="">用户评价</li>
  122.  
    </ul>
  123.  
     
  124.  
    <div class="detail_info">
  125.  
     
  126.  
    <div class="detail_info_item">
  127.  
    {{Str2Html .goods.GoodsContent}}
  128.  
    </div>
  129.  
    <div class="detail_info_item">
  130.  
    <ul>
  131.  
    {{range $key,$value:=.goodsAttr}}
  132.  
     
  133.  
    {{if ne $value.AttributeValue ""}}
  134.  
    <li class="row clearfix">
  135.  
     
  136.  
    <div class="span5">
  137.  
     
  138.  
    <h2>{{$value.AttributeTitle}}</h2>
  139.  
    </div>
  140.  
    <div class="span15">
  141.  
    {{$value.AttributeValue | FormatAttr | Str2Html}}
  142.  
    </div>
  143.  
    </li>
  144.  
    {{end}}
  145.  
    {{end}}
  146.  
    </ul>
  147.  
    </div>
  148.  
     
  149.  
    <div class="detail_info_item">
  150.  
    <ul class="comment_list">
  151.  
    <li>
  152.  
    <div>
  153.  
    <img src="https://www.itying.com/themes/itying/images/stars5.gif">
  154.  
    </div>
  155.  
    <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
  156.  
     
  157.  
    <p class="eval-order-info"> <span class="eval-time">2018-11-18
  158.  
    14:00:35</span><span>月岩白</span><span>6GB 64GB</span><span></span></p>
  159.  
     
  160.  
    </li>
  161.  
    <li>
  162.  
    <div>
  163.  
    <img src="https://www.itying.com/themes/itying/images/stars5.gif">
  164.  
    </div>
  165.  
    <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
  166.  
     
  167.  
    <p class="eval-order-info"> <span class="eval-time">2018-11-18
  168.  
    14:00:35</span><span>月岩白</span><span>6GB 64GB</span><span></span></p>
  169.  
     
  170.  
    </li>
  171.  
    <li>
  172.  
    <div>
  173.  
    <img src="https://www.itying.com/themes/itying/images/stars5.gif">
  174.  
    </div>
  175.  
    <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
  176.  
     
  177.  
    <p class="eval-order-info"> <span class="eval-time">2018-11-18
  178.  
    14:00:35</span><span>月岩白</span><span>6GB 64GB</span><span></span></p>
  179.  
     
  180.  
    </li>
  181.  
    <li>
  182.  
    <div>
  183.  
    <img src="https://www.itying.com/themes/itying/images/stars5.gif">
  184.  
    </div>
  185.  
    <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
  186.  
     
  187.  
    <p class="eval-order-info"> <span class="eval-time">2018-11-18
  188.  
    14:00:35</span><span>月岩白</span><span>6GB 64GB</span><span></span></p>
  189.  
     
  190.  
    </li>
  191.  
    </ul>
  192.  
    </div>
  193.  
    </div>
  194.  
     
  195.  
    </div>
  196.  
    </div>
  197.  
     
  198.  
    {{ template "frontend/public/page_footer.html" .}}
  199.  
    </body>
  200.  
    </html>
  201.  
    {{end}}
学新通

6.js代码

在static/frontend/js/base.js中增加 initProductContentTab()方法-商品详情页面 tab切换(内容,规格参数等； initProductContentColor()方法- 商品详情 颜色选中功能,如果有关联的商品图片,则展示对应的商品图片信息
  1.  
    (function ($) {
  2.  
     
  3.  
    var app = {
  4.  
    init: function () {
  5.  
     
  6.  
    this.initSwiper();
  7.  
     
  8.  
    this.initNavSlide();
  9.  
     
  10.  
    this.initProductContentTab();
  11.  
     
  12.  
    this.initProductContentColor();
  13.  
     
  14.  
    },
  15.  
    initSwiper: function () { // 轮播图切换操作
  16.  
    new Swiper('.swiper-container', {
  17.  
    loop: true,
  18.  
    navigation: {
  19.  
    nextEl: '.swiper-button-next',
  20.  
    prevEl: '.swiper-button-prev'
  21.  
    },
  22.  
    pagination: {
  23.  
    el: '.swiper-pagination',
  24.  
    clickable: true
  25.  
    }
  26.  
     
  27.  
    });
  28.  
    },
  29.  
    initNavSlide: function () { // 导航鼠标移上去效果
  30.  
    $("#nav_list>li").hover(function () {
  31.  
     
  32.  
    $(this).find('.children-list').show();
  33.  
    }, function () {
  34.  
    $(this).find('.children-list').hide();
  35.  
    })
  36.  
     
  37.  
    },
  38.  
    initProductContentTab: function () { // 商品详情页面tab切换(内容,规格参数等tab切换)
  39.  
    $(function () {
  40.  
    $('.detail_info .detail_info_item:first').addClass('active');
  41.  
    $('.detail_list li:first').addClass('active');
  42.  
    $('.detail_list li').click(function () {
  43.  
    var index = $(this).index();
  44.  
    $(this).addClass('active').siblings().removeClass('active');
  45.  
    $('.detail_info .detail_info_item').removeClass('active').eq(index).addClass('active');
  46.  
     
  47.  
    })
  48.  
    })
  49.  
    },
  50.  
    initProductContentColor: function () { // 商品详情颜色选中功能,如果有关联的商品图片,则展示对应的商品图片信息
  51.  
    var _that = this;
  52.  
    $("#color_list .banben").first().addClass("active");
  53.  
    $("#color_name").html($("#color_list .active .yanse").html())
  54.  
    $("#color_list .banben").click(function () {
  55.  
    $(this).addClass("active").siblings().removeClass("active");
  56.  
    $("#color_name").html($("#color_list .active .yanse").html())
  57.  
    var goods_id = $(this).attr("goods_id")
  58.  
    var color_id = $(this).attr("color_id")
  59.  
    //获取当前商品对应颜色的图片信息
  60.  
    $.get("/product/getImgList", {"goods_id": goods_id, "color_id": color_id}, function (response) {
  61.  
    if (response.success == true) {
  62.  
    var swiperStr = ""
  63.  
    for (var i = 0; i < response.result.length; i ) {
  64.  
    swiperStr = '<div class="swiper-slide"><img src="https://blog.csdn.net/zhoupenghui168/article/details/130356348' response.result[i].img_url '"> </div>';
  65.  
    }
  66.  
    $("#item_focus").html(swiperStr)
  67.  
    _that.initSwiper()
  68.  
    }
  69.  
    })
  70.  
    })
  71.  
    }
  72.  
    }
  73.  
     
  74.  
    $(function () {
  75.  
    app.init();
  76.  
    })
  77.  
     
  78.  
    })($)
学新通

[上一节][golang gin框架] 25.Gin 商城项目-配置清除缓存以及前台列表页面数据渲染公共数据

[下一节][golang gin框架] 27.Gin 商城项目-购物车

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgfaabg
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群