Hướng dẫn tạo giỏ hàng trong wordpress, hướng dẫn tạo giỏ hàng popup cho woocommerce

     
Options Choose...Entity SEOViết contentCode PluginCode ThemeSEO Tổng thểThiết kế websiteTối ưu websiteFix chip core Web VitalsFix Google tìm kiếm ConsoleCông vấn đề khác

jdomain.vn – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng vạn dự án lớn nhỏ tuổi cho nước ngoài và mặt hàng trăm dự án web cho Việt Nam.

Bạn đang xem: Hướng dẫn tạo giỏ hàng trong wordpress, hướng dẫn tạo giỏ hàng popup cho woocommerce

SEO thành công không ít dự án lớn, độ khó cao. Hack (Moderator) cùng Admin (Administraror) của nhiều diễn bầy về SEO với CODE web MMO trên Việt NamDạy Lập trình thiết kế Web và SEO Miễn tổn phí 15++ Năm (Từ 2006 đến Nay)

Trang chủ reviews Dịch vụ xây dựng website tối ưu Website nội dung bài viết chuẩn SEO Viết bài xích cho chúng tôi Landing Page Miễn Phí dự án công trình đã tiến hành Học HTML, CSS học tập PHP MySQL học WordPress mẹo nhỏ SEO tìm tiền Online sale Online cuộc sống đời thường Key Trends SEO Liên hệ

Thêm tài liệu giỏ hàng tùy chỉnh cấu hình vào WooCommerce


5/5 - (3 bình chọn)
Một giữa những điều tuyệt độc nhất vô nhị về WooCommerce là tính linh hoạt của nó. Bạn sẽ trông như một chủ cửa hàng. Tôi đang làm một dự án nhỏ và tôi phải thêm một vài dữ liệu tùy chỉnh một sản phẩm khi thêm nó vào giỏ hàng. Sử dụng những kỹ thuật Hook giúp tôi thuận tiện đạt được phần đa điều này.

*

Trong hướng dẫn dưới đây, tôi đã hướng dẫn chúng ta cách thêm ngôi trường vào sản phẩm, hiển thị dữ liệu trong giỏ sản phẩm của bạn, lưu giữ nó vào đối kháng đặt hàng. Tiếp đến hiển thị nó cho người sử dụng và người dùng quản trị.

Đây là phía dẫn nâng cao. Bạn tốt nhất nên xây dựng chức năng này vào một plugin tùy chỉnh, đó phụ thuộc vào bạn.


Contents


Thêm trường tùy chỉnh vào sản phẩm của bạn

Thứ nhất, khi chúng ta muốn thêm 1 trường tùy chỉnh cấu hình vào sản phẩm hãy để mắt tới kịch bạn dạng này như thể ví dụ: bạn quản lý điều hành một siêu thị nơi mà khiến cho những biển hiệu được làm bằng gỗ được tương khắc trổ tùy chọn. Bạn muốn người sử dụng của bạn cũng có thể nhập văn bản được khắc trên một ngôi trường nhập vào thành phầm của bạn. Tiếp đến lưu cùng với đơn đặt đơn hàng cho đội sản xuất bắt đầu chế tạo sản phẩm.

Tôi đã cấu hình thiết lập một sản phẩm đơn giản để chuyển động dựa trên sản phẩm tùy biến của mình.

*

Trước khi thêm vào nút giỏ mặt hàng (cart), hãy thêm một trường nhập liệu đơn giản dễ dàng được gọi là “khắc” (Engraving).

Tôi muốn trường tùy chỉnh cấu hình của bọn họ nằm trong mẫu thêm vào giỏ hàng, còn nếu không dữ liệu sẽ không được đăng cùng rất biểu mẫu khi khách hàng thêm nó vào giỏ mặt hàng của họ. Trong khuôn khổ /single-product/add-to-cart/simple.php, có một số hook chúng ta cũng có thể sử dụng. Làm rõ thêm trường trước lúc ấn nút chế tạo giỏ hàng, do vậy bọn họ sẽ sử dụng hook woocommerce_before_add_to_cart_button.

/*** output đầu ra engraving field.*/function iconic_output_engraving_field() {global $product;if ( $product->get_id() !== 1741 ) return;?>
" maxlength="10">
Có một số trong những điều xẩy ra như sau:

Thứ nhất, tôi sẽ kiểm tra đây là sản phẩm của chúng ta với một ID hardcoded. Lý tưởng độc nhất vô nhị là họ sẽ tất cả một trường meta trong trang thành phầm chỉnh sửa nơi chúng ta cũng có thể chuyển thay đổi trường tương khắc khỏi hiển thị. Nhưng vì phải sự ví dụ và nhanh chóng, tôi đã tiến hành nó như vậy này.Tiếp theo, họ đang phá vỡ PHP và giới thiệu HTML trường của bọn chúng ta.Tôi đã vứt một maxlength vào trường đầu vào (input field).Cuối cùng, tôi thêm hành động để xuất ra ngôi trường đó trước khi thêm vào giỏ hàng.

*

Thêm tài liệu khắc vào mục giỏ hàng

Khách hàng của bọn chúng ta hiện thời có thể nhập văn bạn dạng khắc của họ trước lúc họ thêm thành phầm vào giỏ hàng. Hiện tại, khi họ thêm thành phầm vào giỏ hàng, sẽ không tồn tại gì xảy ra. Chúng ta nên lấy dữ liệu đó lúc nó được đăng cùng thêm nó vào thành phầm trước khi nó được phân phối giỏ hàng.

WooCommerce khá xuất sắc trong bí quyết thêm nhiều món đồ vào giỏ hàng.Ví dụ: nếu họ thêm dấu hiệu vào giỏ hàng nhị lần với 1 văn bản, chúng ta muốn hiển thị bên dưới dạng 1 sản phẩm trong giỏ mặt hàng với con số 2. Tuy nhiên, nếu chúng ta thêm sản phẩm vào giỏ hàng bao gồm 2 mẫu mã khắc khác nhau, bọn họ muốn nó diễn tả dưới dạng 2 mặt hàng riêng biệt trong giỏ hàng.

WooCommerce sử dụng bất kỳ mục nào chúng ta thêm vào mục giỏ hàng (trong số đầy đủ thứ khác) để sinh sản ID giỏ hàng. Điều này có nghĩa là nếu mục meta của chúng ta là duy nhất, nó sẽ được hiển thị như thể một thành phầm độc tốt nhất trong giỏ hàng.

Để thâu tóm dữ liệu tương khắc trổ này khi thành phầm được sản xuất giỏ hàng, tôi hy vọng sử dụng cỗ lọc woocommerce_add_cart_item_data.

* add engraving text to lớn cart item.**
param array $cart_item_data*
param int $product_id*
param int $variation_id**
return array*/function iconic_add_engraving_text_to_cart_item( $cart_item_data, $product_id, $variation_id ) $engraving_text = filter_input( INPUT_POST, "iconic-engraving" );if ( empty( $engraving_text ) ) return $cart_item_data;$cart_item_data<"iconic-engraving"> = $engraving_text;return $cart_item_data;add_filter( "woocommerce_add_cart_item_data", "iconic_add_engraving_text_to_cart_item", 10, 3 );Bộ thanh lọc này đồng ý 3 tham số:

$cart_item_data Một mảng chứa ngẫu nhiên dữ liệu giỏ mặt hàng nào không giống cho thành phầm này. Như với bất kỳ bộ lọc như thế nào trong WordPress, đó cũng là phần đông gì chúng ta muốn lúc hàm trả tác dụng lại.$product_id ID của sản phẩm mà tôi đang cung ứng giỏ hàng.$variation_id Nếu chúng ta thêm một biến chuyển thể, đó là ID đổi mới thể.

Xem thêm: Hướng Dẫn Sử Dụng Minitool Partition Wizard Toàn Tập, Minitool Partition Wizard Professional 10

Thứ nhất, tôi đã sử dụng filter_input() để sanitize tài liệu đã đăng .Nếu $engraving_text trống (tức là không có giá trị như thế nào được nhập hoặc tài liệu thậm chí ko được đăng), thì họ bỏ qua và trả lại công dụng là $cart_item_data .

Nếu nó có một giá bán trị, chúng ta gán nó cho mảng$cart_item_data với một chìa khóa iconic-engraving. Sau đó, ta sẽ trả lại $cart_item_data.

Dữ liệu khắc thiết lập cấu hình hiện được link với món đồ trong giỏ hàng. Tuy nhiên, nó sẽ không còn thực sự tiết kiệm ngân sách và chi phí với yêu ước hoặc hiển thị ở bất kể nơi nào.

Hiển thị dữ liệu chạm xung khắc trong giỏ hàng

Bây giờ bọn họ đã links dữ liệu tương khắc với sản phẩm giỏ hàng, ta có thể truy cập tài liệu đó và hiển thị nó trong giỏ hàng. Theo mang định, WooCommerce hiển thị dữ liệu chuyển đổi trong giỏ sản phẩm sau thương hiệu sản phẩm, bởi vậy, họ cần thêm nó vào đó. Chúng ta rất có thể sử dụng bộ lọc woocommerce_get_item_data nhằm thêm tài liệu khắc vào mục giỏ hàng.

* Display engraving text in the cart.**
param array $item_data*
param array $cart_item**
return array*/function iconic_display_engraving_text_cart( $item_data, $cart_item ) if ( empty( $cart_item<"iconic-engraving"> ) ) return $item_data;$item_data<> = array("key" => __( "Engraving", "iconic" ),"value" => wc_clean( $cart_item<"iconic-engraving"> ),"display" => "",);return $item_data;add_filter( "woocommerce_get_item_data", "iconic_display_engraving_text_cart", 10, 2 );Như bạn thấy, woocommerce_get_item_data chấp thừa nhận 2 tham số:

$item_data Đây là mảng bao gồm chứa dữ liệu bổ sung cho mặt hàng trong giỏ mặt hàng của bọn chúng ta.$cart_item Đây là 1 trong những mảng mục giỏ hàng cùng dữ liệu liên quan của nó.

Bởi vì chúng ta đã chỉ định dữ liệu khắc cho sản phẩm trong giỏ sản phẩm nên hiện giờ nó hoàn toàn có thể truy cập vào mảng $cart_item. Trước hết ta buộc phải kiểm tra xem nó tất cả tồn tại hay không. Nếu không, ta vẫn trả lại tài liệu mục như bình thường. Nếu có, chúng ta thêm dữ liệu vào mảng $item_data, gán một key và một value.Và key sẽ được sử dụng làm title mục dữ liệu.

Bạn sẽ thấy gồm một mục mảng display . Nếu vấn đề đó là đúng, nó sẽ được sử dụng front-end thay vày mục mảng value . Điều này cho phép bạn tất cả một quý hiếm khác với những gì được hiển thị trên front-end. Trong trường hợp này, tôi để trống nó để trường value được sử dụng thay thế. Bạn cũng hoàn toàn có thể đưa nó thoát ra khỏi mảng, nếu khách hàng muốn.

*

Lưu dữ liệu chạm tương khắc vào đối chọi đặt hàng

Bước tiếp theo là lưu tài liệu vào đơn đặt hàng khi được cách xử lý xong. Điều này thực thụ rất dễ dàng và đơn giản khi họ sử dụng các cách thức CRUD mới trong WooCommerce. Tất cả mọi gì bọn họ cần làm là dùng ktx thuật hook trong hook woocommerce_checkout_create_order_line_item với thêm meta của đối chọi đặt hàng. WooCommerce kế tiếp sẽ cách xử trí hiển thị tài liệu đó vào biên nhận đơn hàng, khoanh vùng tài khoản và quanh vùng quản trị.

* showroom engraving text khổng lồ order.**
param WC_Order_Item_Product $item*
param string $cart_item_key*
param array $values*
param WC_Order $order*/function iconic_add_engraving_text_to_order_items( $item, $cart_item_key, $values, $order ) if ( empty( $values<"iconic-engraving"> ) ) return;$item->add_meta_data( __( "Engraving", "iconic" ), $values<"iconic-engraving"> );add_action( "woocommerce_checkout_create_order_line_item", "iconic_add_engraving_text_to_order_items", 10, 4 );Hành cồn woocommerce_checkout_create_order_line_item chấp dấn 4 tham số:

$item Đây là đối tượng chi tiết đơn đặt hàng.$cart_item_key Đây là chuỗi đựng khóa mục giỏ hàng.$values Đây là mảng chứa tất cả dữ liệu đến mục giỏ hàng bao hàm dữ liệu tùy chỉnh.$order Đây là trường hợp WC_Order chứa đối tượng mua hàng mới.

Thứ nhất, họ cần chất vấn xem liệu giá chỉ trị iconic-engraving được tùy chỉnh cấu hình hay chưa. Giả dụ chưa, bọn họ sẽ return và không làm những gì khác. Nếu có, bọn họ sử dụng phương thức add_meta_data() trên $item nhằm thêm tài liệu khắc vào mục yêu cầu đặt hàng.

Phương thức add_meta_data() đồng ý 3 tham số:

$meta_key Đây là phím meta. Đây cũng là các thứ được hiển thị lân cận đơn mua hàng cho khách hàng, vì vậy tôi sẽ nhập nó như thể nhãn “khắc” (Engraving).$meta_value Đây là cực hiếm của tài liệu meta, văn bạn dạng khắc vào trường vừa lòng này.$unique (bool – tùy chọn) Đặt điều đó thànhtrue để bảo đảm an toàn rằng khóa meta này là duy nhất. Falselà theo mặc định.

Một điều thú vị bắt buộc lưu ý: nếu bạn có nhu cầu thêm dữ liệu meta vào đơn mua hàng mà chỉ gồm quản trị viên mới có thể thấy được, hãy thêm chi phí tố $meta_key bằng dấu gạch men dưới: $item->add_meta_data( "_private_meta", "Some Value" ). Điều này đã chỉ hiển thị trong khu vực quản trị.

Như sẽ đề cập, dữ liệu meta này hiện nay đã được lưu giữ vào mục các món đồ và được hiển thị trong suốt:

*
*

Tổng kết

Vậy là chúng ta đã hoàn thành xong, đó là cách bạn thêm dữ liệu mục hàng tùy chỉnh cấu hình và tiếp nối lưu nó vào đối kháng đặt hàng cuối cùng của bạn. Có nhiều trường hợp cho điều này, bởi vì vậy tôi hi vọng hướng dẫn này sẽ giúp đỡ bạn đã có được một mở màn tốt. Hãy mang đến tôi biết những ý kiến đóng góp của bạn.


Chuyên mục: Domain Hosting