带有JS脚本的WooCommerce定制产品，无法理解其工作原理

我正在学习WP，请温柔点，因为我是n00b！

该网站是xtraicehome.com. 他们出售用于曲棍球训练的人造冰。之前的网站管理员开发了一个Woocommerce产品，该产品执行JS脚本，根据客户的输入计算要添加到购物车的面板数。

现在他们需要改变制造工艺，面板将有不同的尺寸（和形状，它们将是方形的），所以我需要编辑ConfigurICER.

如果我通过FTP访问，我会看到。js和。子主题文件夹中的css文件。在WP中，所有内容都通过链接到WP页面模板的Woocommerce产品呈现，产品和页面共享相同的永久链接。

嗯，我似乎找不到WP到底在哪里打电话。JS函数。它不在函数中。php，它不是一个额外的css类，我不知道如何才能说创建产品的副本并开始编辑。js代码，因此我可以让这两个产品同时工作。我甚至不知道在哪里编辑这些文字！

我知道这一切都很抽象，但我不知道如何以任何其他方式表达这个问题。也许我缺少一些非常基础的知识，我现在看起来很笨。

非常感谢您的帮助。

编辑：PROGOSTECH回复后的更多信息。

如果我检查页面源代码，我会看到通过FTP在子主题中找到的文件。我仍然找不到页面模板或产品中指向这些文件的指针。另外，我甚至不能编辑最简单的东西，那就是我在前一张图片中谈论的文本，它们在哪里！？

产品代码：

[vc_row unlock_row="" row_height_percent="0" back_image="18108" back_repeat="repeat-x" overlay_alpha="50" gutter_size="3" shift_y="0"][vc_column][dhvc_woo_product_page_add_to_cart el_class=""][/vc_column][/vc_row]

页面模板代码：

[vc_row unlock_row="" row_height_percent="0" back_image="18108" back_repeat="repeat-x" overlay_alpha="50" gutter_size="3" shift_y="0"][vc_column][dhvc_woo_product_page_add_to_cart el_class=""][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_empty_space empty_h="3"][vc_empty_space empty_h="3"][vc_column_text]The ConfigurIcer tool is designed to make it easy to choose the size of your Xtraice Home Synthetic Ice surface for hockey training.  Just plug in the measurements of the space where you\'d like to put the surface and the ConfigurIcer will literally configure the surface for you so that you know how many panels can fit and in which direction.[/vc_column_text][vc_empty_space empty_h="3"][/vc_column][/vc_row]

编辑2：

我已经开始了解以前的开发人员到底做了什么。我找到的每个教程都说必须使用wp\\u enqueue\\u script（）和wp\\u enqueue\\u style（）。

在网站文件和管理菜单中到处搜索并反复检查了几个小时后，我意识到了一些事情：没有使用add\\u to\\u cart功能的标准快捷码，而是使用了[dhvc\\u woo\\u product\\u page\\u add\\u to\\u cart el\\u class=”]。

我开始在Google中输入dhvc，自动填充让我找到了这个插件的存在https://codecanyon.net/item/woocommerce-products-layouts/7384574

深入调查插件文件夹，我找到了编辑产品或模板时找不到的文本（在wp-content/plugins/dhvc-woocommerce-page/includes/shortcode.php中硬编码）。由于某些原因，windows search没有索引。php内容，这就是为什么我在WordPress文件中找不到字符串“Welcome to the Configuricer”，而中包含其他字符串和类。css和。js文件很容易找到。现在我学到了一些新东西：需要转到windows索引选项并为我使用的几个常见扩展选择“索引内容”。

现在，我不是专家，但在插件文件的函数中添加HTML代码对我来说并不是最佳实践，如果我错了，请纠正我。

public function dhvc_woo_product_page_add_to_cart_shortcode($atts, $content = null) {

    extract ( $this->_shortcode_atts ( array (

            \'el_class\' => \'\' 

    ), $atts ) );

    ob_start ();

    if (! empty ( $el_class ))

        echo \'<div class="\' . $el_class . \'">\';


?>
<link rel="stylesheet" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/bootstrap-spinner.css">
<link rel="stylesheet" type="text/css" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/styleconfigurator.css">

<script language="javascript" src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jsconfigurator.js"></script>
<script src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jquery.spinner.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js"></script>



<div class="printArea"  id="printArea">
    <h2 class="tittleConfiguraicer">Welcome to the ConfigurIcer</h2>
    <p class="textConfiguricer">Insert measurements or get one of our packs</p>
    <div class="panelControl">
            <div class="tittleMeasurement" onClick="ocPanel();">
                Insert measurements
                <span>+</span>
            </div>
            <div id="dataPanel">
                <div>
                    <span class="tittle">LENGTH</span>
                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="height" id="height" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="10">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();" ><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">\'</span> 

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="heightin" id="heightin" value="0" data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="11">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">"</span>
                </div>
                <div class="sepConfigurator">
                    <span class="tittle">WIDTH</span>

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="width" id="width" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="12">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">\'</span>

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="widthin" id="widthin" value="0"  data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="13">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">"</span> 
                </div>
                <div>
                    <span class="tittle">PANELS NEEDED</span> <input type="text" name="totalPanels" id="showPanell" value="0" disabled class="totalPanels">
                </div>

            </div>


            <div id="<?php echo esc_attr($uniq_id); ?>" class="dfd-single-product-module woocommerce dfd-<?php echo esc_attr($product_style); ?> <?php echo esc_attr($el_class); ?> <?php echo esc_attr($animate); ?>" style="<?php echo $module_css;?>" <?php echo $animation_data; ?>>
    <?php
        woocommerce_template_single_add_to_cart ();
    ?>
</div>



        </div>
        <div class="panelBoton" id="panelBoton">
            <div class="boton" id="botonIndoor" onClick="changeIndoor();">
                <div onClick="changeIndoor();">INDOOR</div>
                <div onClick="changeIndoor();">OUTDOOR</div>
            </div>
        </div>


    <div id="wrapper" class="wrapper">
        <div class="gridbacktexture transition" id="gridbacktexture"></div>
          <div class="gridPosition transition" id="gridPosition">
            <div class="gridback transition" id="gridback">
                <div id="reglaW" class="reglaW">
                    <div id="rwPanel" class="no-span"><span id="rwPanelText" >xxx"</span></div>
                </div>
                <div id="reglaH" class="reglaH ">
                    <div id="rhPanel" class="no-span"><div id="rhPanelText" >xxx"</div></div>
                </div>
                  <div id="grid" class="grid transition" >

                  </div>
          </div>
        </div>
        <div class="clear"></div>
    </div>
</div>


</div>




<?php if(!empty($css_js)) : ?>
<script type="text/javascript">
    (function($) {
        "use strict";
        $(\'head\').append(\'<?php echo $css_js; ?>\');
    })(jQuery);
</script>
<?php endif; ?>

        echo \'</div>\';

    return ob_get_clean ();

}

现在我可以编辑代码了。问题是我想把这两种产品同时放在店里。旧版本将为美国游客提供（直到库存售罄），新面板计算器将仅向加拿大游客展示。

我想我需要一个地理位置不同的条件。js和。css文件加载到产品视图中。将开始调查此事。

欢迎您提出任何建议！

小码农CODE

相关推荐

插件中的JavaScript数据表