如何根据 PHP 和 AJAX 的尺码过滤衣服？

Question

我正在尝试使用 PHP 和 AJAX 制作电子商务过滤系统。我在 YouTube 上看过一些人并且它有效，但我的电子商务网站是在服装行业，而他的是电子产品......所以他没有解释如何过滤存储数量的尺寸（例如：S:2, M:3, L:4) 与过滤系统。现在，如果我为产品添加过滤器，产品会正确显示该尺寸。但是如果我第二次尝试，它不会执行。我想是因为我的专栏在 MySQL 中的设置方式。请帮忙。

这是我的过滤系统代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<ul class="list-group">
                    <li class="list-group-item">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input product_check" value="S" id="Maat_Voorraad">S
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input product_check" value="M" id="Maat_Voorraad">M
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input product_check" value="L" id="Maat_Voorraad">L
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input product_check" value="XL" id="Maat_Voorraad">XL
                            </label>
                        </div>
                    </li>
                </ul>

<script type="text/javascript">
    $(document).ready(function(){
        
        $(".product_check").click(function(){
            $("#loader").show();
            
            var action = 'data';
            var type = get_filter_text('type');
            var maat_voorraad = get_filter_text('Maat_Voorraad');
            
            $.ajax({
                url:'action.php',
                method:'POST',
                data:{action:action,type:type,maat_voorraad:maat_voorraad},
                success:function(response){
                    $("#result").html(response);
                    $("#loader").hide();
                    $("#textChange").text("Gefilterde producten");
                }
            });
            
        });

        function get_filter_text(text_id){
            var filterData = [];
            $('#'+text_id+':checked').each(function(){
                filterData.push($(this).val());
            });
            
            return filterData;
        }
        
    });

</script>


// action.php

if(isset($_POST['maat_voorraad'])){
   $maat_voorraad = implode("','", $_POST['maat_voorraad']);
   $sql .= "AND Maat_Voorraad LIKE '%$maat_voorraad%'";
}

// Maat_Voorraad refers to my table column in database. There the size and quantity is 
   stored per shirt like: S:2, M:4, L:3
// maat_voorraad means size_and_quantity and that variable sends only the size

查看示例here 非常感谢您的帮助！

Answer 1

从您分享的示例代码中，我可以看出您的数据库设计存在问题。我可能会有一个 table 来存储衬衫信息，例如：

ID
球衣名称
衬衫价格（最低 SKU 的价格）。
时间戳（添加项目时）。您可以添加与产品相关的任意多个时间戳。

存储衬衫尺码的另一个 Table：

id
姓名（例如“S”）

另一个 Table (PIVOT Table) 包含有关衬衫、尺码以及相关价格和可用性的信息：

shirt_id（外键引用衬衫Table）
size_id（外键参考衬衫尺码Table）
unit_price（上述衬衫特定尺寸的价格）
discount_price（如果球衣有特价）

一个 table 来保存每件衬衫的图像：

id
shirt_id（外键引用衬衫 Table）
url（球衣图片位置）
时间戳（图像添加时间和最后更新时间）。

最后，下单table

id（订单号）
shirt_id（外键引用衬衫 Table）
shirt_size_id（外键引用 Shirt Size Table）
数量
总计
日期（订单创建，订单完成）

这只是您可以用来更有效地设计数据库的指南。我省略了一些列，因为我认为您可能已经有了它们。如果您想在一个订单中实现多个项目，只需为订单项目创建一个 table 来存储已订购的单个项目，然后创建一个 table 来存储订单总额。

下面的 link 将更清楚地说明我上面写的内容。

此时可以安全地规范您的数据库以使查询更容易。参考 Normalization 了解更多。

如何根据 PHP 和 AJAX 的尺码过滤衣服？

How do I filter clothing on sizes with PHP and AJAX?

php

ajax

jquery

filter

e-commerce