Sign up
107
0
Web Development WordPress

[Woocommerce] Part 3 : Get products và render data ra home page

Nguyễn Nam
Nguyễn Nam
06/06/2021 · 5 min read
107
Thời gian đọc: 5 phút

Chào mọi người, ở part 3 này chúng ta sẽ đi đến phần GET dữ liệu từ WooCommerce REST API. Ở đây, mình sẽ lấy products Best Selling và Trending Now ra giao diện trang chủ.

Tạo button Best Sell và Trending bằng ACF(Advanced Custom Fields)

Đầu tiên, các bạn hãy cài ACF vào nhé, bạn nào có rồi có thể bỏ qua, còn bạn nào chưa có thì hãy xem thêm thông tin tại đây.
Tiếp theo chúng ta vào mục Custom Fields trong admin và tạo field Home Product Config ở đây ta sẽ tạo hai button True/False và ở phần Location chọn Post Type là Product. Kết quả sẽ được như hình:

Sau đó, chúng ta sẽ vào phần Products của Woo lúc đó sẽ xuất hiện 2 button Best Sell và Trending. Các bạn lựa chọn sản phẩm muốn hiện thị theo từng mục rồi tích vào button true:

Render Products Best Selling

Để render products Best Selling đầu tiên chúng ta cần GET Products ra trước. Như đoạn code dưới đây:

api
  .get("products", {
    per_page: 20, // 20 products per page
  })
  .then((response) => {
    // Successful request
    console.log("Response Status:", response.status);
    console.log("Response Data:", response.data);
    renderProductBestSelling(response.data); // function render product best sell
  })
  .catch((error) => {
    // Invalid request, for 4xx and 5xx statuses
    console.log("Response Status:", error.response.status);
  })
  .finally(() => {
    // Always executed.
  });

Sau đó chúng ta tạo function để render html việc này giúp chúng ta có thể sử dụng lại đoạn code này khi render những products khác:

function renderHTMLResults(item) {
  return `<div class="wa-col-3">
        <div class="one-product">
            <div class="img-product">
                <img src="${item.images[0].src}" alt="img-product" />
            </div>
            <div class="name-pro">${item.name}</div>
            <div class="price-pro">${item.price_html}</div>
        </div>
    </div>`;
}

Tiếp theo chúng ta sẽ tạo function renderProductBestSelling():

function renderProductBestSelling(data) {
  var bestSellingRender = document.getElementById("bestSellingRender");
  var renderResult = data
    .map(function (item) {
      var isMetaData = (element) =>
        element.key == "best_selling" && element.value == 1;
      if (item.meta_data.findIndex(isMetaData) != -1) {
        return renderHTMLResults(item);
      }
    })
    .join("");
  if (bestSellingRender) {
    bestSellingRender.insertAdjacentHTML("beforeend", renderResult);
  }
}

Ở đoạn code trên các bạn sẽ thấy "item.meta_data[i].key" và "item.meta_data[i].value" đây là mình check key và value của field Best Selling mới tạo bằng ACF. Sản phẩm nào được tích là Best Selling sẽ được hiện ra ở đây. Các bạn để ý phần Console log của Browser sẽ thấy trong mỗi sản phẩm sẽ có thuộc tính meta_data. Các field ACF mà chúng ta tạo sẽ hiện ra ở đây.
Tiếp theo, các bạn tạo file product-best-selling.php và get_template_part nó vào template Homepage để hiện code ra trang chủ :

<section class="product_best_sell mg-bt-50">
    <div class="container">
        <div class="best_sell_contain">
            <div class="title-best-selling home-title">Best Selling</div>
            <div class="desc-best-selling home-desc">Bushwick blue bottle photo booth copper mug marfa craft beer
                pour-over swag
                subway tile organic cloud bread.</div>
            <div class="wa-row" id="bestSellingRender">
            </div>
        </div>
    </div>
</section>

Tiếp theo, các bạn đưa đoạn css này vào file mà mình đã tạo ở bài trước cho dễ nhìn nhé:

*{
  box-sizing: border-box;
}
.container{
  max-width: 1300px;
  margin: 0 auto;
}
.mg-bt-50{
  margin-bottom:50px;
}
.wa-row{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.wa-col-3{
  flex: 0 0 25%;
  max-width:25%;
  width:100%;
  padding: 0 15px;
  box-sizing: border-box;
}
img{display: block;
  width: 100%;
}
.home-title{
  font-size: 30px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 15px;
}
.home-desc{
  text-align: center;
    margin-bottom: 35px;
}
.name-pro{
  font-size: 20px;
  margin: 15px 0;
  &:hover{
    color: blue;
    transition:0.5s all;
  }
}
.one-product{
  cursor: pointer;
}
.img-product{
  overflow: hidden;
  img{
    transform: scale(1);
    transition: 0.5s all;
  }
  &:hover{
    img{
      transform: scale(1.1);
      transition: 0.5s all;
    }
  }
}

Sau khi xong tất cả thì chúng ta chạy lệnh "gulp" trong cmd, rồi ra trang chủ để xem kết quả nhé.

Render Products Trending

Tương tự như phần Best Selling, Chúng ta sẽ tạo hàm renderProductTrending(), sau đó đưa đoạn code nay vào:

function renderProductTrending(data) {
  var trendingRender = document.getElementById("trendingRender");
  var renderResult = data
    .map(function (item) {
      const isMetaData = (element) =>
        element.key == "trending" && element.value == 1;
      if (item.meta_data.findIndex(isMetaData) != -1) {
        return renderHTMLResults(item);
      }
    })
    .join("");
  if (trendingRender) {
    trendingRender.insertAdjacentHTML("beforeend", renderResult);
  }
}

Chúng ta tạo thêm file product-trending.php và đưa vào trang chủ:

<section class="product_trending mg-bt-50">
    <div class="container">
        <div class="trending_contain">
            <div class="title-trending home-title">Trending</div>
            <div class="desc-trending home-desc">Bushwick blue bottle photo booth copper mug marfa craft beer
                pour-over swag
                subway tile organic cloud bread.</div>
            <div class="wa-row" id="trendingRender">
            </div>
        </div>
    </div>
</section>

Như vậy là chúng ta đã Render được products ra trang chủ theo 2 mục Best Selling và Trending thông qua WooCommerce REST API rồi.
Dưới đây là tất cả code js của phần này:

// Hiện List products
api
  .get("products", {
    per_page: 20, // 20 products per page
  })
  .then((response) => {
    // Successful request
    console.log("Response Status:", response.status);
    console.log("Response Data:", response.data);
    renderProductBestSelling(response.data); // function render product best sell
    renderProductTrending(response.data); //function render product trending
  })
  .catch((error) => {
    // Invalid request, for 4xx and 5xx statuses
    console.log("Response Status:", error.response.status);
  })
  .finally(() => {
    // Always executed.
  });

function renderProductBestSelling(data) {
  var bestSellingRender = document.getElementById("bestSellingRender");
  var renderResult = data
    .map(function (item) {
      var isMetaData = (element) =>
        element.key == "best_selling" && element.value == 1;
      if (item.meta_data.findIndex(isMetaData) != -1) {
        return renderHTMLResults(item);
      }
    })
    .join("");
  if (bestSellingRender) {
    bestSellingRender.insertAdjacentHTML("beforeend", renderResult);
  }
}
function renderProductTrending(data) {
  var trendingRender = document.getElementById("trendingRender");
  var renderResult = data
    .map(function (item) {
      var isMetaData = (element) =>
        element.key == "trending" && element.value == 1;
      if (item.meta_data.findIndex(isMetaData) != -1) {
        return renderHTMLResults(item);
      }
    })
    .join("");
  if (trendingRender) {
    trendingRender.insertAdjacentHTML("beforeend", renderResult);
  }
}

function renderHTMLResults(item) {
  return `<div class="wa-col-3">
        <div class="one-product">
            <div class="img-product">
                <img src="${item.images[0].src}" alt="img-product" />
            </div>
            <div class="name-pro">${item.name}</div>
            <div class="price-pro">${item.price_html}</div>
        </div>
    </div>`;
}

Kêt quả :

Tổng kết

Như vậy là ở part 3 này chúng ta đã render được sản phẩm ra giao diện trang chủ thông qua WooCommerce REST API. Hẹn gặp lại các bạn ở bài tiếp theo trong series này.
Các bạn có thể tham khảo tổng quan về series Tại đây
Cảm ơn các bạn đã đón đọc. Các bạn có thắc mắc hay có vấn đề cần giải đáp thì hay inbox vào fanpage Wolfactive nhé.