下载列表谁加载产品woocommerce(dropdown list who load product woocommerce)

下载列表谁加载产品woocommerce(dropdown list who load product woocommerce)

我正在构建我的自定义wordpress模板页面，并且我希望做一个下拉列表（或任何其他人）与选定的产品谁选择，出现在页面的底部！

目前，我发现的最佳方式是：

<form action="" method="get"><select name="type"> <option selected >product</option> </form>

并在div的页面底部：

<?php if(isset($_GET['type'])) echo do_shortcode('[product_page id="'.$_GET['type'].'"]'); else ?>

代码完成这项工作，但我还没有满意！ 如果插件已经存在短代码，我也会接受！

编辑：我想加载产品，无需重新加载页面！

提前致谢 ！

I'm building my custom wordpress template page and I would like to do a dropdown list (or anyone else) with selected product who, selected, appears in the bottom of the page !

Currently, I the best way I found is :

<form action="" method="get"><select name="type"> <option selected >product</option> </form>

and at the bottom of the page in a div:

<?php if(isset($_GET['type'])) echo do_shortcode('[product_page id="'.$_GET['type'].'"]'); else ?>

The code does the job, but I'm not satisfed yet ! If a plugin already exists with shortcode, I'll take it too !

EDIT: I would like to load the product without reload the page !

Thanks in advance !

最满意答案

Ajax是做到这一点的方法。 它也有助于了解一些jQuery，所以当JavaScript获取数据时，它可以定位一个元素并将其显示在那里。 你可以在页面模板，脚本标签内放入类似的东西，并在下拉改变时调用它。

jQuery.ajax({ url:"/wp-admin/admin-ajax.php", type:'POST', data:{ action : 'display_product', prod_id : jQuery(this).val() }, success:function(results) { jQuery("#product_display").html(results); } });

然后将PHP函数添加到functions.php中，例如

add_action( 'wp_ajax_nopriv_display_product', 'display_product' ); add_action( 'wp_ajax_display_product', 'display_product' ); function display_product() { if(isset($_POST['prod_id'])) { echo do_shortcode('[product_page id="'.$_POST['prod_id'].'"]'); } die(); }

Ajax is the way to do that. It also helps to know a bit of jQuery, so when the JavaScript gets the data back, it can target an element and display it there. You can put something like this in the page template, inside script tags, and call it when the dropdown changes.

jQuery.ajax({ url:"/wp-admin/admin-ajax.php", type:'POST', data:{ action : 'display_product', prod_id : jQuery(this).val() }, success:function(results) { jQuery("#product_display").html(results); } });

Then add the PHP function to functions.php, e.g.

add_action( 'wp_ajax_nopriv_display_product', 'display_product' ); add_action( 'wp_ajax_display_product', 'display_product' ); function display_product() { if(isset($_POST['prod_id'])) { echo do_shortcode('[product_page id="'.$_POST['prod_id'].'"]'); } die(); }