“WooCommerce 网格/列表切换”插件可切换 WooCommerce 中产品列表的 View 。最后的选择存储在 cookie 中。
HTML 页面包含:
<nav class="gridlist-toggle">
<a href="#" id="grid" title="gridview">⊞ <span>gridview</span></a>
<a href="#" id="list" title="listview">⊟ <span>listview</span></a>
</nav>
<ul class="products">
<li class=" ...
Javascript 函数是:
jQuery(document).ready(function(){
jQuery('#grid').click(function() {
jQuery(this).addClass('active');
jQuery('#list').removeClass('active');
jQuery.cookie('gridcookie','grid', { path: '/' });
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).addClass('grid').removeClass('list').fadeIn(300);
});
return false;
});
jQuery('#list').click(function() {
jQuery(this).addClass('active');
jQuery('#grid').removeClass('active');
jQuery.cookie('gridcookie','list', { path: '/' });
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).removeClass('grid').addClass('list').fadeIn(300);
});
return false;
});
if (jQuery.cookie('gridcookie')) {
jQuery('ul.products, #gridlist-toggle').addClass(jQuery.cookie('gridcookie'));
}
if (jQuery.cookie('gridcookie') == 'grid') {
jQuery('.gridlist-toggle #grid').addClass('active');
jQuery('.gridlist-toggle #list').removeClass('active');
}
if (jQuery.cookie('gridcookie') == 'list') {
jQuery('.gridlist-toggle #list').addClass('active');
jQuery('.gridlist-toggle #grid').removeClass('active');
}
jQuery('#gridlist-toggle a').click(function(event) {
event.preventDefault();
});
});
如何无论用户的选择如何始终在主商店页面上获取 ListView 并始终在类别页面上获取 GridView ?
最佳答案
使用 WordPress 条件标签。
使用 Php 将 cookie 设置为默认值。类似...
<?php if (is_page(id)) {
$defaultView = 'list';
}
else {
$defaultView = 'grid';
}
setcookie("gridcookie", $defaultView);
?>
将 id
替换为您的主商店页面的页面 ID。或者使用其他选项之一 http://codex.wordpress.org/Function_Reference/is_page
关于javascript - Wordpress WooCommerce 网格/列表切换 : How to trigger a button click?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28441573/