导航一级分类

进入templates/myhome/index.html,并修改

1
2
3
4
5
6
导航中除了魅族商城和社区,其他的删除,换成以下内容:
{% load pagetag %}
  <!-- 去调用自定义的 模板标签,在标签中获取的数据并返回html -->
{% showNav %}

把鼠标经过出现内容的代码删除

进入应用myhome/views/IndexViews.py,并修改myhome_index函数

1
2
3
4
5
6
7
8
9
10
11
12
from myadmin.models import Cates
def myhome_index(request):
  # 先获取一级分类
  data = Cates.objects.filter(pid=0)
  # 在一级分类下 追加一个sub属性,
  for x in data:
      # sub属性里存放的是当前一级分类下的 二级子类
      x.sub = Cates.objects.filter(pid=x.id)
  # 分配数据
  context = {'navdata': data}
  # 加载模板
  return render(request, 'myhome/index/index.html', context)

进入应用myadmin/templatetags/pagetag.py,并增加自定义模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from myadmin.models import Cates
from django.shortcuts import reverse

# 自定义模板导航数据 标签
@register.simple_tag
def showNav():
  # 获取一级分类
  CatesList = Cates.objects.filter(pid=0)
  # print(CatesList)
  s = ''
  for x in CatesList:
      s += '''
      <li class="layout-header-nav-item">
        <a href="{url}" class="layout-header-nav-link">{name}</a>
      </li>
      '''.format(name=x.name,url=reverse('myhome_list',args=(x.id,)))
  return format_html(s)

进入应用myhome/urls.py,并修改列表路径

1
url(r'^list/(?P<cid>[0-9]+)', IndexViews.myhome_list,name="myhome_list"),

进入templates/myhome/index/index.html,并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
头部 侧导航
<ul class="home-category hidden-xs hidden-sm" id="homeCategory">
  {% for v in navdata %}
  <li class="home-category-item">
      <a href="{% url 'myhome_list' v.id %}" class="home-category-link">
          {{ v.name }}
      </a>
      <div class="home-category-child clearfix">
        <div class="home-category-child-list clearfix">
          {% for vv in v.sub %}
          <a href="{% url 'myhome_list' vv.id %}" class="home-category-child-item title" title="魅族手机">
            {{ vv.name }}
              {% for vvv in vv.goods_set.all %}
              <a class="home-category-child-item" href="{% url 'myhome_info' %}?goodsid={{ vvv.id }}" target="_blank" >
                <img class="home-category-child-img" src="{{ vvv.pic_url }}" height="40" width="40">
                <div class="home-category-child-text">{{ vvv.goodsname }}</div>
              </a>
              {% endfor %}
          </a>
          {% endfor %}
        </div>
      </div>
  </li>
  {% endfor %}
</ul>

面包屑导航-商品列表

进入应用myhome/views/IndexViews.py,并修改myhome_list函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 列表
def myhome_list(request,cid):
  # 根据cid获取当前分类对象
  ob = Cates.objects.get(id=cid)
  # 判断当前是否为一级类
  if ob.pid == 0:
      # 获取当前一级类的所有子类
      ob.sub = Cates.objects.filter(pid=ob.id)
      ob.pidcolor = True
      # 获取当前二级分类下的所有商品
      goods = []
      for x in ob.sub:
          goods += x.goods_set.all().values()
      # 把当前分类下商品追加到数据中
      ob.goods = goods
      # 分配数据
      context = {'Cateslist':ob}
  else:
      # 获取当前分类的 父级
      pob = Cates.objects.get(id=ob.pid)
      # 获取当前二级分类的 同级分类
      pob.sub = Cates.objects.filter(pid=pob.id)
      for x in pob.sub:
          if x.id == ob.id:
              # 给当前的二级类加一个标识
              x.index = True

      # 获取当前类下商品,不要同类的商品
      pob.goods = ob.goods_set.all()
      # 分配数据
      context = {'Cateslist':pob}
  return render(request,'myhome/index/list.html',context)

进入templates/myhome/index/list.html,并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!-- 面包屑 导航 -->
<div class="ml-nav hidden-xs hidden-sm">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="{% url 'myhome_list' Cateslist.id %}">{{ Cateslist.name }}</a></li>
  </ol>
</div>

<!-- 分类列表 -->
<ul>
  <li class="">
    <a {% if Cateslist.pidcolor %} style="color: dodgerblue;" {% endif %} href="{% url 'myhome_list' Cateslist.id %}" title="全部">全部</a>
  </li>
  {% for v in Cateslist.sub %}
  <li >
    <a {% if v.index %} style="color: dodgerblue;" {% endif %} href="{% url 'myhome_list' v.id %}" title="{{ v.name }}">{{ v.name }}</a>
  </li>
  {% endfor %}
</ul>

删除屏幕尺寸

<!-- 商品列表 -->
<div class="goods-list">
  <div class="row">
    {% for v in Cateslist.goods %}
    <div class="col-md-3 col-sm-6 col-xs-6">
      <div class="gl-item">
        <div class="compare-btn-list">
            <i class="iconfont  icon-duibi compare-duibi"></i>
            <span class="hidden-xs hidden-sm">对比</span>
        </div>
        <div class="gl-item-wrap">
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
              <a href="{% url 'myhome_info' %}?goodsid={{ v.id }}">
                <img class="lazy j-modProduct" src="{{ v.pic_url }}" width="220" height="220">
              </a>
            </div>
          </div>

          <!-- Nav tabs -->
          <div class="item-slide j-pro-wrap  hidden-xs hidden-sm">
            <ul class="nav nav-tabs  " role="tablist">
              <li role="presentation" class="active">
                <a href="#list-p1" aria-controls="list-p1" role="tab" data-toggle="tab">
                  <img class="lazy" src="{{ v.pic_url }}" style="display: inline;" width="40" height="40">
                </a>
              </li>
            </ul>
          </div>
          <div class="slide-btn j-modBtns" style="display: none;">
              <span class="prev iconfont disabled"></span>
              <span class="next iconfont"></span>
          </div>

          <h2>{{ v.goodsname }}</h2>
          <h3 class="red" title="{{ v.title }}">
          {{ v.title }}
          </h3>
          <dd class="mod-price">
              <span>￥</span>
              <span class="vm-price">{{ v.price }}</span>
              <span class="vm-start">起</span>
          </dd>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

商品详情页扩展

进入应用myhome/views/IndexViews.py,并修改myhome_info函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from django.http import Http404
from myadmin.models import Goods
# 详情
def myhome_info(request):
  try:
      # 根据商品id获取商品数据
      ob = Goods.objects.get(id=request.GET.get('goodsid'))
      # 分配数据
      context = {'goods':ob}
      # 加载模板
      return render(request,'myhome/index/info.html',context)
  except:
      pass

  raise Http404('您需要的页面找不到了...')

进入模板templates/myhome/index/info.html,并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
{% extends 'myhome/index.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/detail.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/detail-app.css">
{% endblock %}

{% block con %}
<div class="page-detail app-detail" style="margin-top: 50px;">
    <div class="container">
    <!-- 产品购买 -->
    <div class="row">
      <div class="col-md-5 col-sm-12 col-xs-12">
        <div class="preview">
          <!-- Tab panes -->
          <div class="tab-content preview-booth pt10">
            <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
              <img src="{{ goods.pic_url }}" width="375" height="375" class="sImg">
            </div>
          </div>

          <!-- Nav tabs -->
          <ul class="nav nav-tabs preview-thumb clearfix " role="tablist">
            <li role="presentation" class="active">
              <a href="#list-p1" aria-controls="list-p1" role="tab" data-toggle="tab">
                <img src="{{ goods.pic_url }}" style="display: inline;" width="75" height="75">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-7 col-sm-12 col-xs-12 pt10">
        <div class="property hidden-xs hidden-sm" id="property">
             <div class="property-hd">
               <h1>{{ goods.goodsname }}</h1>
               <p class="mod-info active">{{ goods.title }}</p>
             </div>
             <div class="property-sell">
                 <dl class="property-sell-price clearfix">
                     <dt class="vm-metatit" id="J_discountTag">价<span class="s-space"></span><span class="s-space"></span>格：
                     </dt>
                     <dd>
                         <div class="mod-price">
                             <small>¥</small>
                             <span id="J_price" class="vm-money">{{ goods.price }}</span>
                         </div>
                         <div class="mod-original" id="J_originalPrice" style="display:none;"></div>
                         <div class="mod-activity">
                         </div>
                         <div class="mod-countdown" id="J_discountCountDown" style="display:none;">
                         </div>
                     </dd>
                 </dl>
             </div>

          <div class="property-service">
            <dl class="property-service-item clearfix">
                <dt class="vm-metatit">支<span class="s-space"></span><span class="s-space"></span>持：
                </dt>
                <dd class="mod-bd" id="J_prodService">
                  <span><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>花呗分期</span>
                  <span><a href="#" target="_blank"><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>百城速达</a></span>
                  <span><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>顺丰包邮</span>
                  <span><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>7天无理由退货</span>
               </dd>
            </dl>
            <dl class="property-service-suda clearfix" id="J_delivery">
              <dt class="vm-metatit">配送<span class="s-space"></span>至：</dt>
              <dd class="mod-site clearfix">
                <div id="site-selector" class="site-selector">
                  <div class="text">广东 广州市 【请选择】</div>
                </div>
              </dd>
            </dl>
            <dl class="property-service-provider clearfix">
              <dt class="vm-metatit">服<span class="s-space"></span><span class="s-space"></span>务：
              </dt>
              <dd class="clearfix">
                 <span id="J_installmentInfo"></span>
                     本商品由 魅族 负责发货并提供售后服务
              </dd>
            </dl>
          </div>

          <div class="property-buy">
            <p class="vm-message" id="J_message"></p>
            <dl class="property-buy-quantity">
                <dt class="vm-metatit">数<span class="s-space"></span><span class="s-space"></span>量：</dt>
                <dd class="clearfix">
                    <div class="mod-control">
                       <a title="减少" href="javascript:;" class="vm-minus disabled">-</a>
                       <input value="1" id="J_quantity" data-max="5" type="text">
                       <a title="增加" href="javascript:;" class="vm-plus">+</a>
                    </div>
                </dd>
            </dl>
            <div class="property-buy-action">
                <a data-mtype="store_de_buy" href="javascript:void(0);" id="J_btnBuy" class="btn btn-danger btn-lg mr20">立即购买</a>
                <a data-mtype="store_de_cart" href="javascript:void(0);" id="J_btnAddCart" class="btn btn-primary btn-lg" style="display:inline-block;"><i></i>加入购物车</a>
                <span class="vm-service" id="J_panicBuyingWrap"></span>
            </div>
          </div>
        </div>

        <div id="prod" class="prod">
          <div class="prod-info">
            <div class="prod-info-header">
                <h1 class="vm-title">{{ goods.goodsname }}</h1>
            </div>
            <div class="prod-info-price">
                <div class="mod-price">
                    <small>¥ </small><span id="J_price" class="vm-money">{{ goods.price }}</span>
                </div>
                <div class="mod-original" id="J_originalPrice" style="display:none">
                </div>
                <div class="mod-countdown" id="J_discountCountDown" style="display:none">
                </div>
            </div>
          </div>
          <div class="prod-service" id="J_prodService">
            <ul>
              <li><i class="glyphicon glyphicon-ok-circle"></i>花呗分期</li>
              <li><i class="glyphicon glyphicon-ok-circl"></i>百城速达</li>
              <li><i class="glyphicon glyphicon-ok-circle"></i>顺丰包邮</li>
              <li><i class="glyphicon glyphicon-ok-circle"></i>7天无理由退货</li>
            </ul>
            <i class="glyphicon glyphicon-menu-right icon-enter" id="J_prodPromoEnter"></i>
          </div>
          <div class="prod-selected" id="J_prodSelected">
            <label>已选</label>
            <p>
                <span class="vm-props s-selected" id="J_selectedProps">全网通公开版,流光金,32GB</span>
                <span class="vm-quantity" id="J_selectedQuantity" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">×1</span>
            </p>
            <i class="glyphicon glyphicon-menu-right icon-enter" id="J_prodPromoEnter"></i>
          </div>
          <div class="prod-suda" id="J_prodSuda">
            <div class="prod-suda-selector" id="J_sudaSelector">
                <label>送至</label>
                <span id="J_siteText" class="">广东 广州市</span>
                <i class="glyphicon glyphicon-menu-right icon-enter" id="J_prodPromoEnter"></i>
            </div>
            <br>
            <div class="prod-suda-info" style="display:none;">
              <p class="mod-bd">
                <span id="J_siteStatus"></span>
                <span id="J_installmentInfo"></span>
              </p>
            </div>

            <div class="shortcut trans" style="float:right;">
                <div class="shortcut-con trans">
                    <div class="mod-buy">
                        <a data-mtype="store_de_buynow" href="javascript:void(0);" id="J_btnBuyShortcut" class="btn btn-danger btn-lg"><i></i>现在购买</a>
                        <a data-mtype="store_de_cart" href="javascript:void(0);" id="J_btnAddCart" class="btn btn-primary btn-lg" style="display:inline-block;"><i></i>加入购物车</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="prod-suda-supplier">
              <p class="mod-bd">
                本商品由<em>魅族</em>负责发货并提供售后服务
              </p>
            </div>

          </div>

        </div>
      </div>
  </div>
    <!-- 产品购买 -->
    </div>
    <!-- 漂浮的导航 -->
    <div class="detail-tab anim detail-fast-float" id="detailFast">
        <div class="fixed-container">
            <ul class="clearfix">
                <li class="">
                    <a href="javascript:void(0);">商品详情</a>
                </li>
                <li class="">
                    <a href="javascript:void(0);">规格参数</a>
                </li>
                    <li class="current">
                        <a href="javascript:void(0);">常见问题</a>
                    </li>
            </ul>

            <div class="mod-title">

            </div>
        </div>
    </div><!-- 漂浮的导航 E-->
    <!-- 产品详情 -->
    <div class="row detail" id="detail">
      <div class="detail" style="height:62px;">
        <div class="detail-tab" id="detailTabFixed">
          <div class="fixed-container">
            <ul class="clearfix" style="display: block;">
                <li class="current">
                    <a data-mtype="store_de_xq_1" href="javascript:void(0);">商品详情</a>
                </li>
                <li class="">
                    <a data-mtype="store_de_xq_2" href="javascript:void(0);">规格参数</a>
                </li>
                <li class="">
                    <a data-mtype="store_de_xq_3" href="javascript:void(0);">常见问题</a>
                </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="detail-content container">
          <div class="introduce current" id="introduce">
              {{ goods.goodsinfo | safe }}
              <img src="/static/myhome/public/img/app/m5.jpg" class="app-detial-intr">
              <img src="/static/myhome/public/img/app/m8.jpg" class="app-detial-intr">
              <img src="/static/myhome/public/img/app/m9.jpg" class="app-detial-intr">
              <img src="/static/myhome/public/img/app/m6.jpg" class="app-detial-intr">
          </div>
      </div>
  </div>
{% endblock %}

{% block js %}
<script type="text/javascript">
  //顶部导航鼠标经过出现内容
  topNav();
  //登录图片鼠标经过
  topLogin();
  //nav标签
  detaNav();
  //回顶部
  backTop();
  //移动端置顶
  appTopNav();
  //数量增加减少
  addMin();
  $("#introduce").children('p').children('img').addClass('pc-detial-intr');
</script>
{% endblock %}