Блог

Главная - Вопросы по программированию - Отображение различных вариантов продуктов

Отображение различных вариантов продуктов

#javascript #php #jquery #mysql

#javascript #php #jquery #mysql

Вопрос:

У меня нет правильного названия вопроса, но я постараюсь задать свой вопрос как можно более четко.

 product_table
    ID | product_code | product name | company_id 
    1  |  12345       | beer cake    |343434defee
    2  |  12346       | vodka cake   |343434deereee

product_table
       Product_code |Quantity | price | weight 
       12345        |  34     |345    |0.5 
       12345        |  343    |600    |1.0 
       12345        |  4      |845    |1.5 
       12346        |  341    |345    |0.5

Вот как выглядят мои две таблицы на стороне базы данных, product_code во второй таблице — внешний ключ, а product_code и weight являются составными ключами для второй таблицы.

В первой таблице ID первичный ключ product_code является уникальным.

Mysql используется на стороне базы данных, Php на стороне сервера, а JS / Jquery используется на стороне клиента.

Предположим, я должен отобразить эти продукты на целевой странице продукта.

введите описание изображения здесь

У него есть два варианта веса 0.5 1.0 , и их может быть больше.В зависимости от веса для соответствующего присутствующего продукта.

Чего я пытался добиться, так это каким-то образом отобразить эти продукты на целевой странице, и когда пользователь нажимает на конкретный вес, должны отображаться цена и количество соответствующего веса.

Учтите, что в первых трех строках второй таблицы должны появиться три отдельные кнопки для них, и далее, если какая-либо из них имеет значение ноль, она должна быть отключена или этот вес не должен отображаться.

Во-вторых, если все веса имеют количество, равное нулю, отобразите распроданное изображение.

Как я могу добиться этого с помощью JS / JQUERY / HTML / PHP?

С уважением,
BOTJr.
Спасибо.

Комментарии:

1. дорогой друг, я рад, что мне удалось вам помочь, если вы можете просто отметить это правильным ответом 🙂

Ответ №1:

База данных:

 CREATE TABLE `product_table` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `product_code` INT NULL,
  `product_name` VARCHAR(45) NULL,
  `company_id` VARCHAR(45) NULL,
  PRIMARY KEY (`id`));

  CREATE TABLE `product_table_price` (
  `product_code` int(11) NOT NULL,
  `quantity` int(11) DEFAULT NULL,
  `price` varchar(45) DEFAULT NULL,
  `weight` varchar(45) DEFAULT NULL,
  `id` int(11) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) 


INSERT INTO `product_table` (`product_code`, `product_name`, `company_id`) VALUES ('12345', 'beer cake', '343434defee');
INSERT INTO `product_table` (`product_code`, `product_name`, `company_id`) VALUES ('12346', 'vodka cake', '343434deereee');


INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '34', '345', '0.5');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '343', '600', '1.0');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12345', '4', '845', '1.5');
INSERT INTO `product_table_price` (`product_code`, `quantity`, `price`, `weight`) VALUES ('12346', '341', '345', '0.5');

db.php подключение к базе данных:

 <?php

$username = 'kmoshe';
$password = 'password';
$host = 'localhost';
$dbname = 'test';

$conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password
    ,
    array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_PERSISTENT => false,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ));

index.php:

 <?php
require_once './db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

<div id="products">
    <?php
    // In this part of the code i'm building div's that have tag attributes that i've created with the
    // row-id, product-code, that those attributes contain the values from the db
    // i have given a class name of item, and i'm going to catch the click event on this with JQuery
    $sql = "SELECT * FROM product_table";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    while ($row = $stmt->fetch()){ ?>
        <div class="item" row-id="<?=$row['id'];?>" product-code="<?=$row['product_code']?>"><span><?= $row['product_name'];?></span></div>
   <?php } ?>
</div>



</body>
</html>

app.js:

 $(document).ready( function(){

        $(document).on('click','.item', function(e) {

            let pressedRowID =$(this).attr('row-id');
            let pressedProductCode =$(this).attr('product-code');
            let fd = new FormData();

            fd.append('id', pressedRowID);
            fd.append('product_code', pressedProductCode);

            console.log(pressedRowID, pressedProductCode);

            // In this part of the code according to the pressed product-code, we are going to fetch
            // the rows from the second table, the php will return a json structure that contains the 3 rows
            // or more with the  price and the quantity.

            $.ajax({
                url: "get_buttons.php",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,

                complete: function (results) {
                    try {
                        let str = JSON.parse(results.responseText);
                         updateDOM(str);
                         console.log(str)
                    } catch (e) {
                        console.error(e.message);
                    }
                },
            });


        }) ;



     updateDOM = (buttons) => {

         let disabled;
         let weight;
         let buttons_dom='';
         let buttons_container = $('#buttons-container');

         for (let property in buttons) {

             if(buttons[property].hasOwnProperty('quantity') amp;amp; parseInt(buttons[property]['quantity']) !== 0) {
                 disabled = '';
             } else if (buttons[property].hasOwnProperty('quantity') amp;amp; parseInt(buttons[property]['quantity']) === 0) {
                 disabled = 'disabled';
             }

             if(buttons[property].hasOwnProperty('weight')) {
                 weight = buttons[property]['weight'];
             }
             buttons_dom  = `<button ${disabled}>${weight}</button>`;
         }



         buttons_container.html ('');
         buttons_container.append(buttons_dom);


    };



});

get_buttons.php:

 <?php
require_once 'db.php';

$product_code = $_REQUEST['product_code'];

$sql = "SELECT * FROM product_table_price where product_code=$product_code";
$stmt = $conn->prepare($sql);
$stmt->execute();

$product_items = [];
$product_item = [];

while ($row = $stmt->fetch()){
    $product_item['product_code'] = $row['product_code'];
    $product_item['quantity'] = $row['quantity'];
    $product_item['price'] = $row['price'];
    $product_item['weight'] = $row['weight'];
    $product_item['id'] = $row['id'];
    array_push($product_items, $product_item);
}

echo json_encode($product_items);