php - 网格和列表的不同 css 样式与 WooCommerce 网格/列表切换

Question

我对这个 WooCommerce Grid/List toggle plugin 有疑问。

在我的 clients website产品价格用css定位position: absolute; .它在 GridView 中工作正常。但是当我切换到 ListView 时，价格与其他文本重叠。我试图编辑价格的位置(以 top: 10px; 为例)，但它也改变了价格在 GridView 中的位置。

所以我想用 php if header 中的语句和 echo <style> 中的正确位置根据选择的 GridView 或 ListView 。

我的问题是我不知道应该使用哪个功能。或者我应该根据选择的 View 比较哪些变量。

插件代码如下:

<?php
/*
Plugin Name: WooCommerce Grid / List toggle
Plugin URI: http://jameskoster.co.uk/tag/grid-list-toggle/
Description: Adds a grid/list view toggle to product archives
Version: 0.4.0
Author: jameskoster
Author URI: http://jameskoster.co.uk
Requires at least: 3.3
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wc_list_grid_toggle
Domain Path: /languages/
*/

/**
 * Check if WooCommerce is active
 **/
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

    /**
     * Localisation
     **/
    load_plugin_textdomain( 'wc_list_grid_toggle', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );

    /**
     * WC_List_Grid class
     **/
    if (!class_exists('WC_List_Grid')) {

        class WC_List_Grid {

            public function __construct() {
                // Hooks
                add_action( 'wp' , array( $this, 'setup_gridlist' ) , 20);

                // Init settings
                $this->settings = array(
                    array(
                        'name' => __( 'Default catalog view', 'wc_list_grid_toggle' ),
                        'type' => 'title',
                        'id' => 'wc_glt_options'
                    ),
                    array(
                        'name'      => __( 'Default catalog view', 'wc_list_grid_toggle' ),
                        'desc_tip'  => __( 'Display products in grid or list view by default', 'wc_list_grid_toggle' ),
                        'id'        => 'wc_glt_default',
                        'type'      => 'select',
                        'options'   => array(
                            'grid'  => __('Grid', 'wc_list_grid_toggle'),
                            'list'  => __('List', 'wc_list_grid_toggle')
                        )
                    ),
                    array( 'type' => 'sectionend', 'id' => 'wc_glt_options' ),
                );

                // Default options
                add_option( 'wc_glt_default', 'grid' );

                // Admin
                add_action( 'woocommerce_settings_image_options_after', array( $this, 'admin_settings' ), 20 );
                add_action( 'woocommerce_update_options_catalog', array( $this, 'save_admin_settings' ) );
                add_action( 'woocommerce_update_options_products', array( $this, 'save_admin_settings' ) );
            }

            /*-----------------------------------------------------------------------------------*/
            /* Class Functions */
            /*-----------------------------------------------------------------------------------*/

            function admin_settings() {
                woocommerce_admin_fields( $this->settings );
            }

            function save_admin_settings() {
                woocommerce_update_options( $this->settings );
            }

            // Setup
            function setup_gridlist() {
                if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) {
                    add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_styles' ), 20);
                    add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_script' ), 20);
                    add_action( 'woocommerce_before_shop_loop', array( $this, 'gridlist_toggle_button' ), 30);
                    add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_open' ), 9);
                    add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_close' ), 11);
                    add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_hr' ), 30);
                    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5);
                    add_action( 'woocommerce_after_subcategory', array( $this, 'gridlist_cat_desc' ) );
                }
            }

            // Scripts & styles
            function setup_scripts_styles() {
                if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) {
                    wp_enqueue_style( 'grid-list-layout', plugins_url( '/assets/css/style.css', __FILE__ ) );
                    wp_enqueue_style( 'grid-list-button', plugins_url( '/assets/css/button.css', __FILE__ ) );
                }
            }
            function setup_scripts_script() {
                if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) {
                    wp_enqueue_script( 'cookie', plugins_url( '/assets/js/jquery.cookie.min.js', __FILE__ ), array( 'jquery' ) );
                    wp_enqueue_script( 'grid-list-scripts', plugins_url( '/assets/js/jquery.gridlistview.min.js', __FILE__ ), array( 'jquery' ) );
                    add_action( 'wp_footer', array(&$this, 'gridlist_set_default_view') );
                }
            }

            // Toggle button
            function gridlist_toggle_button() {
                ?>
                    <nav class="gridlist-toggle">
                        <a href="#" id="grid" title="<?php _e('Zobrazit mřížku', 'wc_list_grid_toggle'); ?>">&#8862; <span><?php _e('Zobrazit mřížku', 'wc_list_grid_toggle'); ?></span></a><a href="#" id="list" title="<?php _e('Zobrazit seznam', 'wc_list_grid_toggle'); ?>">&#8863; <span><?php _e('Zobrazit seznam', 'wc_list_grid_toggle'); ?></span></a>
                    </nav>
                <?php
            }

            // Button wrap
            function gridlist_buttonwrap_open() {
                ?>
                    <div class="gridlist-buttonwrap">
                <?php
            }
            function gridlist_buttonwrap_close() {
                ?>
                    </div>
                <?php
            }

            // hr
            function gridlist_hr() {
                ?>
                    <hr />
                <?php
            }

            function gridlist_set_default_view() {
                $default = get_option( 'wc_glt_default' );
                ?>
                    <script>
                        if (jQuery.cookie('gridcookie') == null) {
                            jQuery('ul.products').addClass('<?php echo $default; ?>');
                            jQuery('.gridlist-toggle #<?php echo $default; ?>').addClass('active');
                        }
                    </script>
                <?php
            }

            function gridlist_cat_desc( $category ) {
                global $woocommerce;
                echo '<div itemprop="description">';
                    echo $category->description;
                echo '</div>';

            }
        }
        $WC_List_Grid = new WC_List_Grid();
    }
}

Answer 1

我终于解决了这个问题。我使用 CSS 类:ul.products.list li.product .price 来更改 ListView 中价格的外观。 GridView 可能是默认的 ul.products li .price。现在一切正常。希望这也会对同样有问题的人有所帮助。