Table of Contents
Here is an example of displaying a woocommerce order history list in Line’s mini-appli “LIFF”, a feature briefly introduced in Chapter 1.
1 Retrieving order history with a single Hook
You can retrieve the entire order history by executing only the hook “woocommerce_account_orders_endpoint”.
protected function do_action()
{
add_filter('woocommerce_my_account_my_orders_query', [$this, 'orders_query']);
ob_start();
do_action('woocommerce_account_orders_endpoint');
$this->main_contents .= '<h3>注文履歴</h3>';
$this->main_contents .= ob_get_clean();
$this->main_contents .=
sprintf(
'<h5>直近の注文履歴から最大 %s 件を表示します。</h5>',
self::ORDER_NUM_LIMIT
);
remove_filter('woocommerce_my_account_my_orders_query', [$this, 'orders_query']);
return true;
}
2 Customizing Order History Retrieval Conditions
To display the history of a specific user in Line’s mini-application, which has a limited display area, it is inevitable to specify additional conditions.
Therefore, the filter hook “woocommerce_my_account_my_orders_query” is used to overwrite the search criteria.
public function orders_query($arg)
{
$arg['customer'] = $this->user->ID; // 顧客を指定
$arg['post_status'] = array('wc-processing', 'wc-completed'); // 注文ステータスを指定
$arg['limit'] = self::ORDER_NUM_LIMIT; // 最大取得件数を指定
return $arg;
}
3 Minimize the scope of order history operations
The hook “woocommerce_account_orders_endpoint” is only an action used for the endpoint “myaccount” web page. For example, in the case of in the case of “myaccount”, we have a case where multiple buttons appear at the same time in the “operation” field, such as “display, invoice, delivery note, payment method, etc.”. Since the area for mini-applications is limited, let’s just use “View (.view)”.
.woocommerce-button:not(.view){
/*表示ボタン以外の操作は非表示*/
display: none;
}
4 User-friendly Auto Login
The order history list in Line is displayed. If you want to check the details of your history in Line, you have to intervene by logging in to the site. If you have obtained a Line idToken and have identified the user, you can have the user log in automatically at the same time when displaying the order details in the Line.
Extract the URL specified as endpoint “myaccount” with preg_match_all and convert it to an automatic login URL in a batch.
protected function set_mypage_auto_linelogin()
{
$pattarn = str_replace(['/', '.'], ['/', '.'], wc_get_page_permalink('myaccount')); // endpoint「myaccount」のURLを正規表現に
$pattarn = '/href="' . $pattarn . '(.*?)"/i';
if (preg_match_all($pattarn, $this->main_contents, $matched_url)) {
$replace_from = array();
$replace_to = array();
foreach ($matched_url[0] as $index => $url) {
$replace_from[] = $matched_url[1][$index];
$replace_to[] = $this->line_login->get_auto_linelogin_url($matched_url[1][$index]);
}
$this->main_contents = str_replace($replace_from, $replace_to, $this->main_contents);
}
}
5 Conclusion
If online store orders can be displayed in Line with a single click, the service will be improved and trust in the store will increase.
Previously, user information was acquired in the form of bot mode (Messaging API) steps, but from June 2023, the free limit for pot mode (Messaging API) will be reduced from 1000 to 200 messages. Shifting to mini-applications (LIFF) may be an option.
And if you are looking for more detailed source code or interested in LIFF development and want to exchange opinions about LIFE, please log in and leave a comment.