为啥移动视图中的代码加倍元素？

Posted 2023-05-08

【中文标题】为啥移动视图中的代码加倍元素？

【英文标题】：Why is code doubling elements in Mobile View?为什么移动视图中的代码加倍元素？

【发布时间】：2021-08-30 07:39:24

【问题描述】：

我的网站 onlinevending.com - 一个带有 woocommerce 的 Wordpress 页面 - 我在单个产品页面上有一些自定义代码，在桌面视图上似乎可以正常工作。但是 - 当您查看移动视图时 - 数量按钮和产品附加组件等某些内容似乎加倍。

这里是一个例子：https://onlinevending.com/product/southern-beaver-bulk-vending-machine/

我试图弄清楚之前的开发人员做了什么来实现这一点。这是代码sn-p：

<script>
     

jQuery( document ).ready(function($) 
      $( ".product-subtitle" ).insertAfter( ".product_title" );
      $( ".single_add_to_cart_button" ).after( "<br/><br/>" );
      $( "li.additional_information_tab" ).removeClass( "active" )
      $('li.description_tab>a[href="#tab-description"]').trigger('click');
      $('h2:first-child:contains("You may also like…")').remove();
      $( ".sku_wrapper" ).after( $( ".woocommerce-Price-amount:first" ) );
      $('h2:contains("Optional Accessories …")').text("You may also like ..."); 
      $( ".quantity" ).prepend( $( ".product_meta " ) );
      $( ".product_meta" ).insertAfter( ".single_add_to_cart_button" );
      $( ".quantity" ).insertBefore( ".single_add_to_cart_button" );
   

 $(function() 
    if ( document.location.href.indexOf('?s=') > -1 ) 
        $('h1:contains("Options")').remove();
    
);

$( "<h3>Optional Accessories</h3>" ).insertBefore( ".upsell-style:first-child" ); 
 
 if ($("input[name='upsells[]']").length) 
    $('ul>h3').show();
  else 
   $('ul>h3').hide();  
 
  
 
  if ($("#upsell_3132").length) 
    $('.upsell-style , h3').hide();
    //$('.clear+.quantity .text').css('display','none');
  
  
  
  $( "h3:contains('SELECT SHIPPING ACCESSORIAL OPTIONS')").css('display','block');
  $( "h3:contains('PRODUCT OPTIONS & SHIPPING ACCESSORIAL OPTIONS')").css('display','block');
  
  
  
    
$( "h2:contains('You may also like ...')" ).insertBefore( "ul.products>li:first-child" );

$( "div.woocommerce>form:nth-child(4)" ).insertAfter( "input#billing_wcj_checkout_field_1" );




);



</script>

这里是添加到主题中的 content-single-product.php

/**
 * The template for displaying product content in the single-product.php template
 *
 * Override this template by copying it to yourtheme/woocommerce/content-single-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     3.7.0
 */
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<?php
    /**
     * woocommerce_before_single_product hook
     *
     * @hooked woocommerce_show_messages - 10
     */
     do_action( 'woocommerce_before_single_product' );
?>

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
        /**
         * woocommerce_show_product_images hook
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

    <div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

        <?php global $product, $woocommerce, $woocommerce_loop; ?>

        <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data"> 


            <?php do_action('woocommerce_before_add_to_cart_button'); ?>

            <?php
            if ( ! $product->is_sold_individually() )
                woocommerce_quantity_input( array(
                    'min_value' => apply_filters( 'woocommerce_quantity_input_min', 1, $product ),
                    'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->backorders_allowed() ? '' : $product->get_stock_quantity(), $product )
                ) );
            ?>

            <hr class="clear" />

            <?php
            
            $upsells = $product->get_upsells();
            
            //if ( sizeof( $upsells ) == 0 ) return;
            $meta_query = $woocommerce->query->get_meta_query();
            $args = array(
              'post_type'           => 'product',
              'ignore_sticky_posts' => 1,
              'no_found_rows'       => 1,
              'posts_per_page'      => $posts_per_page,
              'orderby'             => $orderby,
              'post__in'            => $upsells,
              'post__not_in'        => array( $product->id ),
              'meta_query'          => $meta_query

            );
            

            $query = new WP_Query( $args );
            if ( $query->have_posts() ): ?>
                <ul style="padding-left: 0px;">
                    <? $upsell_num = 0; ?>
                <?php while ( $query->have_posts() ): $query->the_post(); ?>
                    <label for="upsell_<?php the_ID(); ?>" class="upsell-style">

                      <? //echo wc_get_product( $upsells[$upsell_num++] )->get_price();
                      ob_start();
                      the_ID();
                      $remembered_id = ob_get_contents();
                      ob_end_clean();
                      ?>

                      <input type="checkbox" name="upsells[]" id="upsell_<?php the_ID(); ?>" value="<?php the_ID(); ?>" />
                      <?php the_title(); ?>
                      $<? echo wc_get_product( $remembered_id )->get_price(); echo " (SKU# "; echo wc_get_product( $remembered_id )->get_sku(); echo ")"; ?> </label>
            
                <?php endwhile;  ?>
                </ul>
                
            <?php endif; ?>

            <?php wp_reset_postdata(); ?>

            <button type="submit" class="single_add_to_cart_button button alt"><?php echo apply_filters('single_add_to_cart_text', __( 'Add to cart', 'woocommerce' ), $product->product_type); ?></button>
        </form>

        </div><!-- .summary -->

    <?php
        /**
         * woocommerce_after_single_product_summary hook
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
    ?>

</div><!-- #product-<?php the_ID(); ?> -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

这里是它的样子——你可以看到它增加了一堆东西，比如数量和添加到购物车按钮。

【问题讨论】：

尝试从 content-single-product.php 中删除

感谢您的帮助-确实在移动版本上将其删除-看起来很棒！但是 - 它也会从桌面视图中删除它......所以我认为这不会起作用。除非我做错了......

【参考方案1】：

您正在使用 jQuery 添加 Quantity 和 product meta 两次。如果你想更正它，那么你需要更正你的 jQuery 代码，或者你可以使用带有正确媒体查询的 css 来更正它。您应该使用更改最小宽度的媒体查询来显示 none。

https://prnt.sc/15edgxf https://prnt.sc/15edk50

【讨论】：

感谢您对此的帮助！我似乎无法让 css 工作 - 你知道如何修复 jQuery 吗？再次感谢！

【参考方案2】：

你应该添加这个 css

在css文件中：

@media only screen and (max-width: 767px)
    .alt+ div.product_meta,
    ul+ .quantity .text 
        display: none !important;
    

如果您无法打开 css 文件，那么您可以将此 css 添加到您的模板或您的工作 php 文件中

<style type="text/css">
@media only screen and (max-width: 767px)
    .alt+ div.product_meta,
    ul+ .quantity .text 
        display: none !important;
    

</style>