Complete e-commerce project--(6) Commodity module (7): Product details page

Product details page business analysis

• 1. Commodity channel classification (talked about)
• 2. Breadcrumb navigation (talked about)
• 3. Hot sales ranking (talked about)
• 4. Product SKU information (detailed information) (query)
• 5. SKU specification information (talked about)
• 6. Product details introduction, specifications and packaging, after-sales service (query)
• 7. Product evaluation (query)
• 8. Traffic statistics
  , nothing else to say, we mainly explain the sku specification display of the product details page
  

business

spu product specification query

• It is the information in the box in the picture above. Let's talk about it and understand it later.

The first step: make it clear that this is the product detail page!

• That is, the information of the specific sku product
• Among them, we know the id of this product, and when displaying the specifications, we can find that the specification option is the selected product

Step 2: Query specification option information

• Method: Refer to the previous model (data sheet) to explain the relationship, which is actually very simple to implement.
• Query the spu product model object through the product id == "Query the corresponding sku model object through the foreign key == "Then the foreign key query all the corresponding specification model objects (such as size, color, memory) ==" Then query it ,Specification options corresponding to each specification (such as color: blue, black, white)
• After that, the data structure can be constructed. The front-end and back-end are not separated and it is very simple to directly return the query object.

Link structure on specification options:

** Here comes the point!

• ** Observing the above picture, we found that the version selected is 8G128GB. When we want to change to other configurations, how do we determine the link of the specific product? Then realize the jump?
  
• It can be found that every time the configuration option is changed , the front end will send a request to return the current sku product information.
• Realization : Discover the law: Our mouse can only click to change one configuration option at a time, that is to say, the only difference between the two products is only one configuration option ! This inspired us, when the specification option information is passed on, each specification option can actually construct a certain product id based on the current sku product information , that is, we have determined that each product specification information is bound to one The commodity id value is sent to the front-end. When the user changes a certain specification option on the current commodity page, the front-end knows which detailed commodity to request from the back-end, because each specification is bound to a commodity id information.
• That is to say : when we return the specification options through the current product, we must bind the product id behind each specification option every time.
• Data structure construction:
  Let's connect all the steps mentioned above to see:

# 获取商品对应的spu， 获取里面的信息
        spu = sku.spu
# 获取商品的规格信息(就是比如 颜色，配置，尺寸等抽象，规格)
        # sku==>spu==>specs(外键指定的属性名)
        specs = spu.specs.order_by('id')
# 通过最开始通过sku_id，查询到sku，再查询到spu，通过spu对应的外键，查询到 spu对应的所有sku商品
        skus = spu.skus.order_by('id')
# 下面是准备工作： 我们构造所有sku商品的信息
'''

        构造这段数据的目的就是： 通过这个字典，为下面每一个类型的商品添加一个 id，点击不同的类型，可以切换到不同的商品
                {
                    选项:sku_id     （选项就是一个元组，里面的值是对应的规格的 规格选项值id）
                }
                说明：键的元组中，规格的索引是固定的
                示例数据如下： 假设华为手机有两个配置，颜色和内存(元组中每个元素代表对应规格的选项，位置是固定的，比如第一个位置表示颜色，第二个位置标识配置的选项id)
                {
                    (1,3):1,        # 元组里：1表示颜色规格对应的选项值，假如是对应红色，  3代表内存规格对应的选项 加入128G， 后面的值，代表商品id
                    (2,3):2,
                    (1,4):3,
                    (2,4):4
                }
      # 注意，两种规格就是有四种具体 sku商品组合
        '''
# 获取上述结构数据
		sku_options= {
    
    }
        sku_option = []
        for sku1 in skus:
            infos = sku1.specs.order_by('spec_id')  # 通过外键获得sku商品的所有规格选项id， 然后将这些获得的规格选项按照 规格的顺序进行排序（规格在另外一张表中的id来排序）
            option_key = []
            for info in infos:
                option_key.append(info.option_id) # 获取选项的id，放到列表里面
                # 获取当前商品的规格信息，因为要默认选择的
                if sku.id == sku1.id:
                    sku_option.append(info.option_id)

            # 下面开始构造上面格式的数据，列表值是可变的不能作为字典的键，所以转换为元组
            sku_options[tuple(option_key)]=sku1.id  # 键的值就是商品的id

# 下面就是为当前商品为基础，为每个规格选项绑定具体的商品id了！ 要用的上面得出的数据
# 遍历当前的spu所有的规格
        specs_list = []
        for index, spec in enumerate(specs):  # enumerate(), 通过这个方法，可以遍历出来 列表的元素和对应的索引
            option_list = []
            for option in spec.options.all():
                # 如果当前的商品为蓝，64，则对应的列表为[2，3]
                # 当前商品的选项
                sku_option_temp = sku_option[:]
                # 替换对应索引的元素：规格的索引是固定的，这句代码就是关键！ 一次只能更改一个规格选项，从而确定 每个规格选项绑定的商品id
                sku_option_temp[index] = option.id  # 新的列表，代表一个具体新的 sku商品
                # 为选项添加sku_id属性，用于在html中输出链接，这里得选项时 选项对象。因为前后端不分离开发
                option.sku_id = sku_options.get(tuple(sku_option_temp), 0) # 默认值为0
                option_list.append(option)
            spec.option_list = option_list
            specs_list.append(spec)
这样 specs 就被代替为了 specs_list ,因为里面的选项对象，重新添加了 商品id属性

This part is the most complicated place. However, it is not difficult to understand carefully, and grasp the key points.