YITH WooCommerce Product Add-ons Premium插件二次

YITH WooCommerce Product Add-ons Premium

是一个产品附属选项插件,但是不好用。需要二次。

下面是针对下拉选择功能自定义。

用到的第三方下拉代码是:

https://rvera.github.io/image-picker/

直接在图片上选择是我想要的。

wp-content/plugins/yith-woocommerce-advanced-product-options-premium/templates/frontend/yith-wapo-input-select.php
修改18行:
$selected = $checked ? 'selected' : '';
echo sprintf( '<option class="%s" data-typeid="%s" data-price="%s" data-pricetype="%s" data-index="%s" value="%s" data-img-src="%s" %s >%s</option>',



wp-content/plugins/yith-woocommerce-advanced-product-options-premium/templates/frontend/yith-wapo-group-type.php
修改90行:
<div class="ywapo_options_container picker">
<?php if ( $type == 'select' ) : ?>

<select name="<?php echo $name; ?>" class="image-picker show-html ywapo_input" <?php echo $required ? 'required' : ''; ?> <?php echo $disabled; ?>>
<option value=""><?php echo $empty_option_text; ?></option>

把https://github.com/rvera/image-picker/archive/master.zip 解压放到:
wp-content/plugins/yith-woocommerce-advanced-product-options-premium/assets/

放在插件首个目录的init.php最下面
wp_register_script( 'image-pickerjs', YITH_WAPO_ASSETS_URL . '/image-picker/image-picker.js', '', '', true );
wp_enqueue_script( 'image-pickerjs' );
wp_register_style( 'image-pickercss', YITH_WAPO_ASSETS_URL. '/image-picker/image-picker.css', false, '' );
wp_enqueue_style( 'image-pickercss' );



在模板插入js需要在网页的最底部:
<script type="text/javascript">

    jQuery("select.image-picker").imagepicker({
      hide_select:  false,
    });

    jQuery("select.image-picker.show-labels").imagepicker({
      hide_select:  false,
      show_label:   true,
    });

    jQuery("select.image-picker.limit_callback").imagepicker({
      limit_reached:  function(){alert('We are full!')},
      hide_select:    false
    });

    var container = jQuery("select.image-picker.masonry").next("ul.thumbnails");
    container.imagesLoaded(function(){
      container.masonry({
        itemSelector:   "li",
      });
    });

  </script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*