前端的 CSS 样式，用于比较 Laravel 10 中的产品

Question

我想以Desired Look下所示的水平形式显示产品，但现在它以现有外观下所示的垂直形式显示。

请看下面的 Desired Look 截图：

期望的外观代码

shop-compare.html

 <main class="main">
        <div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                    <span></span> Shop <span></span> Compare
                </div>
            </div>
        </div>
        <div class="container mb-80 mt-50">
            <div class="row">
                <div class="col-xl-10 col-lg-12 m-auto">
                    <h1 class="heading-2 mb-10">Products Compare</h1>
                    <h6 class="text-body mb-40">There are <span class="text-brand">3</span> products to compare</h6>
                    <div class="table-responsive">
                        <table class="table text-center table-compare">
                            <tbody>
                                <tr class="pr_image">
                                    <td class="text-muted font-sm fw-600 font-heading mw-200">Preview</td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-2-1.jpg" alt="compare-img" /></td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-1-1.jpg" alt="compare-img" /></td>
                                    <td class="row_img"><img src="assets/imgs/shop/product-3-1.jpg" alt="compare-img" /></td>
                                </tr>
                                <tr class="pr_title">
                                    <td class="text-muted font-sm fw-600 font-heading">Name</td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">J.Crew Mercantile Women's Short</a></h6>
                                    </td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">Amazon Essentials Women's Tanks</a></h6>
                                    </td>
                                    <td class="product_name">
                                        <h6><a href="shop-product-full.html" class="text-heading">Amazon Brand - Daily Ritual Wom</a></h6>
                                    </td>
                                </tr>
                                <tr class="pr_price">
                                    <td class="text-muted font-sm fw-600 font-heading">Price</td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$12.00</h4>
                                    </td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$14.00</h4>
                                    </td>
                                    <td class="product_price">
                                        <h4 class="price text-brand">$15.00</h4>
                                    </td>
                                </tr>
                                <tr class="pr_rating">
                                    <td class="text-muted font-sm fw-600 font-heading">Rating</td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(121)</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(35)</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="rating_wrap">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width: 90%"></div>
                                            </div>
                                            <span class="rating_num">(125)</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="description">
                                    <td class="text-muted font-sm fw-600 font-heading">Description</td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                    <td class="row_text font-xs">
                                        <p class="font-sm text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
                                    </td>
                                </tr>
                                <tr class="pr_stock">
                                    <td class="text-muted font-sm fw-600 font-heading">Stock status</td>
                                    <td class="row_stock"><span class="stock-status in-stock mb-0">In Stock</span></td>
                                    <td class="row_stock"><span class="stock-status out-stock mb-0">Out of stock</span></td>
                                    <td class="row_stock"><span class="stock-status in-stock mb-0">In Stock</span></td>
                                </tr>
                                <tr class="pr_weight">
                                    <td class="text-muted font-sm fw-600 font-heading">Weight</td>
                                    <td class="row_weight">320 gram</td>
                                    <td class="row_weight">370 gram</td>
                                    <td class="row_weight">380 gram</td>
                                </tr>
                                <tr class="pr_dimensions">
                                    <td class="text-muted font-sm fw-600 font-heading">Dimensions</td>
                                    <td class="row_dimensions">N/A</td>
                                    <td class="row_dimensions">N/A</td>
                                    <td class="row_dimensions">N/A</td>
                                </tr>
                                <tr class="pr_add_to_cart">
                                    <td class="text-muted font-sm fw-600 font-heading">Buy now</td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm"><i class="fi-rs-shopping-bag mr-5"></i>Add to cart</button>
                                    </td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm btn-secondary"><i class="fi-rs-headset mr-5"></i>Contact Us</button>
                                    </td>
                                    <td class="row_btn">
                                        <button class="btn btn-sm"><i class="fi-rs-shopping-bag mr-5"></i>Add to cart</button>
                                    </td>
                                </tr>
                                <tr class="pr_remove text-muted">
                                    <td class="text-muted font-md fw-600"></td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                    <td class="row_remove">
                                        <a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>

请看下面的现有外观截图：

现有外观代码

view_compare.blade.php

<div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                     <span></span> Compare
                </div>
            </div>
        </div>
        <div class="container mb-80 mt-50">
            <div class="row">
                <div class="col-xl-10 col-lg-12 m-auto">
                    <h1 class="heading-2 mb-10">Products Compare</h1>
                    <h6 class="text-body mb-40">There are products to compare</h6>
                    <div class="table-responsive">
                        <table class="table text-center table-compare">

                            <tbody id="compare">
                                
                               
                            </tbody>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>

master_dashboard.blade.php

<!--  /// Start Load Compare Data -->
<script type="text/javascript">

    function compare(){
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "/get-compare-product/",

            success:function(response){ 

                $('#compareQty').text(response.compareQty);

                var rows = ""
                $.each(response.compare, function(key,value){

                    rows += ` <tr class="pr_image">
                    <td class="text-muted font-sm fw-600 font-heading mw-200">Preview</td>
                    <td class="row_img"><img src="/${value.product.product_thambnail}" style="width:300px; height:300px;"  alt="compare-img" /></td>

                    </tr>
                    <tr class="pr_title">
                    <td class="text-muted font-sm fw-600 font-heading">Name</td>
                    <td class="product_name">
                    <h6><a href="shop-product-full.html" class="text-heading">${value.product.product_name} </a></h6>
                    </td>

                    </tr>
                    <tr class="pr_price">
                    <td class="text-muted font-sm fw-600 font-heading">Price</td>
                    <td class="product_price">
                    ${value.product.discount_price == null
                    ? `<h4 class="price text-brand">AED ${value.product.selling_price}</h4>`
                    :`<h4 class="price text-brand">AED ${value.product.discount_price}</h4>`

                } 
                </td>

                </tr>

                <tr class="description">
                <td class="text-muted font-sm fw-600 font-heading">Description</td>
                <td class="row_text font-xs">
                <p class="font-sm text-muted"> ${value.product.short_descp}</p>
                </td>

                </tr>
                <tr class="pr_stock">
                <td class="text-muted font-sm fw-600 font-heading">Stock status</td>
                <td class="row_stock">
                ${value.product.product_qty > 0 
                ? `<span class="stock-status in-stock mb-0"> In Stock </span>`

                :`<span class="stock-status out-stock mb-0">Stock Out </span>`

            } 

            </td>

            </tr>

            <tr class="pr_remove text-muted">
            <td class="text-muted font-md fw-600"></td>
            <td class="row_remove">
            <a type="submit" class="text-muted"  id="${value.id}" onclick="compareRemove(this.id)"><i class="fi-rs-trash mr-5"></i><span>Remove</span> </a>
            </td>

            </tr> ` 

        });

                $('#compare').html(rows); 

            }
        })
    }

    compare();

  // / End Load Compare Data -->

</script> 

欢迎任何建议。

提前谢谢你。

Answer 1

您想要的表结构比您当前呈现的更复杂。要理解的重要部分是，对于每个row，您要显示each 产品对象的属性。这告诉我们，我们将需要嵌套循环。外循环将遍历产品属性，内循环将遍历每个产品。

我们可以从代表行的键数组开始。每个键都是我们希望在该行中呈现的产品的属性。

如果我们只是想在其对应的键处呈现每个产品项的值，那将非常简单。但是，我们有一些具有特定映射逻辑的情况 - 例如，显示

selling_price

或

discount_price

。因此，我们将使用一个函数将产品项映射到一个键的输出，封装具体的映射逻辑。

我们还应该包括一个对象来将行键映射到一个友好的显示值。

请注意，在我提供的示例代码中，我没有包含 CSS 类或 HTML 的任何其他属性。这只是基本的 HTML。

const response = {
  compare: [
    {
      product: {
        discount_price: null,
        product_thumbnail: 'https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80',
        product_name: 'Product One',
        product_qty: 5,
        selling_price: 100,
        short_descp: 'A little about Product One'
      }
    },
    {
      product: {
        discount_price: 199,
        product_thumbnail: 'https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80',
        product_name: 'Product Two',
        product_qty: 0,
        selling_price: 200,
        short_descp: 'A little about Product Two'
      }
    }
  ]
}

$('#compareQty').text(response.compareQty);

const getItemDisplayForRowKey = (item, key) => {
  if (key === 'product_qty') {
    return item.product.product_qty > 0 ? 'In Stock' : 'Stock Out';
  } else if (key === 'product_thumbnail') {
    return `<img src="${item.product.product_thumbnail}">`;
  } else if (key === 'selling_price') {
    return item.product.discount_price || item.product.selling_price;
  }
  
  return item.product[key];
}

const rowHeading = {
  product_thumbnail: '',
  product_name: 'Name',
  product_qty: 'Quantity',
  selling_price: 'Price',
  short_descp: 'Description'
};

const html = ['product_thumbnail', 'product_name', 'product_qty', 'selling_price', 'short_descp'].map(rowKey => {
  return `
    <tr>
      <td>${rowHeading[rowKey]}</td>
      ${response.compare.map(item => {
        return `<td>${getItemDisplayForRowKey(item, rowKey)}</td>`
      })}
    </tr>
  `
});

$('#compare').html(html);

table {
  border: 1px solid black;
  border-collapse: collapse;
}

tr {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-header breadcrumb-wrap">
  <div class="container">
    <div class="breadcrumb">
      <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
      <span></span> Compare
    </div>
  </div>
</div>
<div class="container mb-80 mt-50">
  <div class="row">
    <div class="col-xl-10 col-lg-12 m-auto">
      <h1 class="heading-2 mb-10">Products Compare</h1>
      <h6 class="text-body mb-40">There are products to compare</h6>
      <div class="table-responsive">
        <table class="table text-center table-compare">

          <tbody id="compare"></tbody>

        </table>
      </div>
    </div>
  </div>
</div>