Mã rút gọn nút thêm vào giỏ hàng của WooCommerce

Tìm hiểu cách tạo nút thêm vào giỏ hàng WooCommerce tự động thêm sản phẩm vào giỏ hàng, theo SKU và Số lượng. Triển khai nút dưới dạng mã ngắn trong nội dung của bạn hoặc nối trang sản phẩm đơn lẻ để hiển thị các nút “thêm x5”, “thêm x10”. Bởi vì chúng tôi sẽ tự hiển thị HTML, chúng tôi sẽ có thể làm rất tốt việc làm cho nút thân thiện với SEO.

Chúng ta sẽ phân tích vấn đề thành một số chức năng hỗ trợ / phụ trợ, và chức năng cốt lõi của thịt và khoai tây… một chức năng thực hiện một việc và làm tốt điều đó.

Trước khi chúng ta bắt đầu

  • Để làm theo hướng dẫn này, bạn sẽ cần phải sử dụng một chủ đề con tùy chỉnh để bạn có thể giữ cho các functions.php của chủ đề của chúng tôi sạch sẽ.
  • Đảm bảo rằng bạn đã cài đặt và hoạt động WooCommerce, đồng thời bạn có ít nhất một sản phẩm có SKU. Bạn thực sự nên sử dụng SKU cho tất cả các sản phẩm và biến thể của mình, nếu bạn có thể.

Hãy viết một số mã

Chức năng cốt lõi của chúng tôi sẽ đưa các thông số $sku, $quantity$text. Nếu văn bản của nút không được chỉ định thì chúng tôi sẽ tự động tạo nó bằng cách sử dụng tên của sản phẩm. Sau đó, chúng tôi sẽ gọi hàm của mình từ một trình xử lý mã ngắn… và bất kỳ nơi nào khác mà chúng tôi muốn sử dụng nó.

Trước hết, hãy tạo một số giàn giáo bằng cách tạo một tệp PHP trong thư mục chủ đề con tùy chỉnh của bạn, được gọi là functions-add-to-cart.php . Dán những thứ sau vào đó.

/**
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-add-to-cart-button-shortcode/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function hw_atc_button(string $sku, int $quantity, string $text) {
   $html = '';
   // Render the button HTML here.
   $html .= '

Hello World

'; return $html; } function do_shortcode_hw_atc_button($atts) { $args = shortcode_atts( array( 'sku' => '', 'qty' => 1, 'text' => '', ), $atts ); $html .= hw_atc_button( strval($args['sku']), intval($args['qty']), strval($args['text']) ); return $html; } add_shortcode('atc_button', 'do_shortcode_hw_atc_button');

Để tham chiếu mã mới từ chủ đề, hãy mở tệp functions.php của chủ đề con tùy chỉnh của bạn và thêm thông tin sau:

/**
 * WooCommerce Add-to-Cart button
 */
require_once 'functions-add-to-cart.php'; 

Lưu hai tệp này và tìm một chút nội dung (một bài đăng hoặc một trang) nơi bạn có thể thêm mã ngắn. Lưu và sau đó xem nội dung của bạn - bạn sẽ thấy dòng chữ “Hello World” nơi bạn đã thêm shortcode. Điều này xác nhận rằng…

  • Mã ngắn được đăng ký đúng cách
  • Mã ngắn đang gọi hw_atc_button()hàm của chúng tôi
  • Chúng tôi đang hiển thị đúng đầu ra HTML từ hw_atc_button()
Bây giờ chúng ta có thể tập trung vào chức năng cốt lõi - thực hw_atc_button()hiện một công việc thực sự tốt là hiển thị nút thêm vào giỏ hàng giàu SEO.

Chức năng cốt lõi

Điều duy nhất mà hàm chính cần làm là trả về một chuỗi với một số HTML trong đó, dựa trên ba tham số mà chúng ta truyền vào nó. Chuỗi đầu ra HTML sẽ xuất hiện trông giống như sau:

   3
   Multipack
 
Số “567” là id sản phẩm WooCommerce nội bộ, không phải SKU.

Vì vậy, với điều kiện chúng tôi chuyển SKU, số lượng và nhãn tùy chọn, chúng tôi chỉ cần chuyển đổi SKU thành Id sản phẩm WooCommerce, tạo URL thêm vào giỏ hàng và ghép các đoạn HTML lại với nhau.

Đây là phiên bản cập nhật hw_atc_button()mà bạn có thể dán vào tệp functions-add-to-cart.php của mình .

function hw_atc_button(string $sku, int $quantity, string $text) {
   $html = '';
   if (!function_exists('WC')) {
      $html .= sprintf('WooCommerce is not installed');
   } elseif (empty($sku)) {
      $html .= sprintf('SKU not specified');
   } elseif (empty($product_id = wc_get_product_id_by_sku($sku))) {
      $html .= sprintf('Product not found: %s', $args['sku']);
   } elseif (empty($product = wc_get_product($product_id))) {
      $html .= sprintf('Failed to get product data: %s (%d)', $args['sku'], $product_id);
   } else {
      $product_name = $product->get_name();
      // Check that the quantity is valid.
      if ($quantity <= 0) {
         $quantity = 1;
      }
      // If we didn't set a text label, then use the product name.
      if (empty($text)) {
         $text = $product_name;
      }
      $url = sprintf(
         '%s?add-to-cart=%d&quantity=%d',
         wc_get_cart_url(),
         $product_id,
         $quantity
      );
      // If you want more/different CSS classes on your  wrapper, you
      // can add them to this array.
      $css_classes = array(
         'hw-atc',
         'sku-' . sanitize_title($sku),
      );
      // Open the anchor element.
      $html .= sprintf(
         '',
         esc_url($url),
         esc_attr(implode(' ', $css_classes)),
         $quantity,
         esc_attr($product_name)
      );
      // Quantity and text/label.
      $html .= sprintf(
         '%d%s',
         $quantity,
         $quantity,
         esc_html($text)
      );
      // Close the anchor element.
      $html .= '';
   }
   return $html;
} 

Giống như với bất kỳ chức năng nào nhận một số đầu vào, một số hoạt động và sau đó tạo ra một số đầu ra… bạn nên luôn kiểm tra xem các đầu vào có “lành mạnh” hay không trước khi bạn xử lý chúng. Phần trên cùng của các hàm kiểm tra xem mọi thứ có ổn không và phần cuối cùng của hàm có hoạt động thực sự hay không.

  • Kiểm tra xem WooCommerce đã được cài đặt và SKU hợp lệ chưa.
  • Nếu $ số lượng là một số lạ, hãy đặt nó thành giá trị (sane) là 1
  • Nếu $ label không được chỉ định thì hãy đặt nó thành tên của sản phẩm
  • Tạo chuỗi $ url
  • Tạo chuỗi $ html
Lưu ý đến hàm sanitize_title () nơi chúng tôi tạo danh sách các lớp CSS cho phần tử neo của chúng tôi. Đây là một chức năng tiện dụng của WordPress có chức năng nhận bất kỳ loại đầu vào văn bản nào và chuyển đổi nó thành các ký tự chữ thường không có khoảng trắng. Ví dụ: “Một số chuỗi kiểm tra” sẽ trở thành “chuỗi kiểm tra nào đó”. Nó thường được sử dụng để tạo liên kết cố định / slugs, nhưng bạn cũng có thể sử dụng nó cho những việc khác, như tạo tên lớp CSS hoặc ID thực thể HTML.

Thêm một chút phong cách

Chúng tôi đã cấu trúc HTML để bạn có thể tải CSS và phần sau sẽ giúp bạn bắt đầu. Thêm cái này vào tệp style.css của chủ đề con tùy chỉnh của bạn . Nó sẽ không giành được bất kỳ giải thưởng thiết kế nào, nhưng bạn có thể điều chỉnh nó sau, khi mã được kiểm tra và hoạt động.

/*
 * WooCommerce Add-to-Cart button
 */
.hw-atc {
    display: inline-block;
    position: relative;
    background-color: blue;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    transition: 0.3s;
    color: white;
}
.hw-atc:hover {
    text-decoration: none;
    background-color: cornflowerblue;
    color: white;
}
.hw-atc .qty::before {
    content: '+';
}
.hw-atc .qty {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 3em;
    height: 3em;
    background-color: green;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 0.75em;
    transform: translate(-65%, -50%) rotate(-10deg);
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.50);
} 
…Và bạn có nó rồi đấy. Nút thêm vào giỏ hàng được tùy chỉnh thân thiện với SEO mà bạn có thể sử dụng ở bất kỳ đâu trên trang web của mình.

Sử dụng nhiều hơn cho nút Thêm vào giỏ hàng

Bây giờ chúng ta đã có một hàm thực hiện một chức năng đơn lẻ (và hoạt động tốt), chúng ta có thể sử dụng nó ở nơi khác. Hãy xem trang sản phẩm đơn WooCommerce tiêu chuẩn. Nó có đầy đủ các móc hành động cho phép chúng tôi đưa các bit HTML vào. Nếu chúng ta sử dụng hook woocommerce_ after_add_to_cart_button thì chúng ta có thể chèn một số HTML sau nút Thêm vào giỏ hàng tiêu chuẩn.

Tất cả những gì chúng ta phải làm là thêm đoạn mã sau vào functions-add-to-cart.php để kết nối hành động và gọi hàm của chúng ta ba lần, được bao bọc trong một hàm chứa <div>:

function hw_atc_add_buttons() {
   // Get the current product.
   if (empty($product = wc_get_product())) {
      // We should never end up in here.
   } elseif (empty($sku = $product->get_sku())) {
      // Product has no SKU.
   } else {
      echo '
'; echo hw_atc_button($sku, 5, 'Add Five'); echo hw_atc_button($sku, 10, 'Add Ten'); echo hw_atc_button($sku, 15, 'Add Fifteen'); echo '
'; // .add-qty-buttons } } add_action('woocommerce_after_add_to_cart_button', 'hw_atc_add_buttons');

… Và một chút CSS để giải phóng các nút một cách độc đáo:

.add-qty-buttons {
    display: block;
    clear: both;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2em 0;
}
.add-qty-buttons .hw-atc {
    width: 25%;
} 

Kết thúc

  • Hãy thử đặt các giá trị ngớ ngẩn cho SKU và số lượng để đảm bảo việc xử lý lỗi hoạt động đúng cách.
  • Thu dọn CSS để nút trông không quá rác.
Chúc bạn vui vẻ khi bán hàng với trang web của bạn.