javascript - WooCommerce- 画布/绘画的 SizeInfo 按钮。[PHP,Javascript,html,css]

我需要一个插件/功能来显示绘画的尺寸信息模式。我找不到一个，所以决定尝试制作一个简单而有效的来使用。

最后编辑于 2021 年 10 月 10 日 [mm/dd/yy] - 添加了第二个更改图像功能

第 1 步：从产品中获取属性的函数。（WooCommerce）[pa_attributename]

/*
Author: Khabazino
Version: 1.0.0
*/
<?php 
 
// Get attributes from single product of type size and canvas-type   
 global $woocommerce, $product, $post;
$product_size= $product->get_attribute( 'pa_size' );
$product_canvas_type= $product->get_attribute( 'pa_canvas-type' );
    
//Convert attributes to array and remove starting whitespace
$sizes_arr = preg_split ("/\,/", $product_size); 
$sizes_arr=array_map('ltrim', $sizes_arr);

$ctypes_arr = preg_split ("/\,/", $product_canvas_type); 
$ctypes_arr=array_map('ltrim', $ctypes_arr);

第 2 步： 为按钮和模式创建 html 和 css。（不包括 CSS）

<html>

<div id="sizeModalBtn">Size Info</div>


<div id="sizeModal" class="sizeModal">
<div class="sizeModalcontent">

<div class="si__sidebar si__style">
<span class="sizeModalclose">&times;</span>
<div class="si__container">

<div class="si__canvastype-container"> 
<div id="si__canvastype-container">

  </div>
 </div>

  <div class="si__content"> 
        <div class="si_background">
          <div id="si__imgs"> 
        <img src='https://...'>  
          </div>
        </div>
  </div>
    
    <div  class="si__sizes-container"> 
    
    
      <div id="si__sizes-container">
    
     </div> <!--this is the end of ID sizes where JS will insert data -->
   
    </div>

  </div><!-- end for container-->

</div><!-- end for sidebar-->
</div><!-- end of sizeModalcontent> -->
</div> <!-- end of sizeModal -->
</html>

第 3 步： 获取 PHP 数组以在 javascript 中使用。

var setSizes = <?php echo json_encode($sizes_arr);?>;
var setCanvTypes = <?php echo json_encode($ctypes_arr); ?>;

第 4 步：设置模式菜单和按钮


var sM_modal = document.getElementById("sizeModal");
var sM_btn = document.getElementById("sizeModalBtn");
var sM_span = document.getElementsByClassName("sizeModalclose")[0];
var nav_sizes = document.getElementById("si__sizes-container");
var nav_canv = document.getElementById("si__canvastype-container");
var CurrentImageSize="60x90";
var CurrentImageCanv="Framed";
var AlreadyClicked=false;

sM_btn.onclick = function() {
  sM_modal.style.display = "block";
  
  
  if(!AlreadyClicked){
  addSizeElement();
  addCanvasTypeElement();
  AlreadyClicked=true;
  }
}

sM_span.onclick = function() {
  sM_modal.style.display = "none";

}
window.onclick = function(event) {
  if (event.target == sM_modal) {
    sM_modal.style.display = "none";
    
  }
}

$('div.si__container').change(function() {
    var filename = $('#si__sizes-container').val() + '-' + $('#si__canvastype-container').val() + '.jpg';
    $('#si__imgs').prop('src', filename);
});

步骤 5：创建功能以设置菜单项和更改图像的条件

function addSizeElement () { 


var li_size1,li_size2;
li_size1=document.createElement("li");
li_size2=document.createElement("li");
var setSizes = <?php echo json_encode($sizes_arr);?>;   
var s_s1 = document.createElement("a");
var s_s2 = document.createElement("a");
for (var i=0; i<setSizes.length;i++){
if(i==0){
s_s1.appendChild(document.createTextNode(setSizes[i]));
li_size1.appendChild(s_s1);
li_size1.classList ? li_size1.classList.add('si__size') : li_size1.className += 'si__size';
li_size1.setAttribute("svalue",setSizes[i]);
nav_sizes.appendChild(li_size1);    
}   
else if(i==1){
s_s2.appendChild(document.createTextNode(setSizes[i]));
li_size2.appendChild(s_s2);
li_size2.classList ? li_size2.classList.add('si__size') : li_size2.className += 'si__size';
li_size2.setAttribute("svalue",setSizes[i]);
nav_sizes.appendChild(li_size2);    
}
else{}
}
var SIZEbtns = nav_sizes.getElementsByClassName("si__size");
for (var i = 0; i < SIZEbtns.length; i++) {
  SIZEbtns[i].addEventListener("click", function() {
  var SIZEcurrent = document.getElementsByClassName("si__size active");
  if (SIZEcurrent.length > 0) { 
    SIZEcurrent[0].className = SIZEcurrent[0].className.replace("active", "");
  }
  this.className += " active";
        CurrentImageSize=document.querySelector(".si__size.active").getAttribute("svalue");
     ChangeImage();
     
  });  
}
}


function addCanvasTypeElement () { 
var setCanvTypes = <?php echo json_encode($ctypes_arr); ?>;
var c_s1 = document.createElement("a");
var c_s2 = document.createElement("a");
for (var i=0; i<setCanvTypes.length;i++){
    

if(i==0){
c_s1.appendChild(document.createTextNode(setCanvTypes[i]));
c_s1.classList ? c_s1.classList.add('si__canvastype') : c_s1.className += 'si__canvastype';
c_s1.setAttribute("cvalue",setCanvTypes[i]);
nav_canv.appendChild(c_s1); 

}
else if(i==1){
c_s2.appendChild(document.createTextNode(setCanvTypes[i]));
c_s2.classList ? c_s2.classList.add('si__canvastype') : c_s2.className += 'si__canvastype';
c_s2.setAttribute("cvalue",setCanvTypes[i]);
nav_canv.appendChild(c_s2); 
else {}
//Load Activate canvas type onclick after menu is generated
var CANVbtns = nav_canv.getElementsByClassName("si__canvastype");
for (var i = 0; i < CANVbtns.length; i++) {
  CANVbtns[i].addEventListener("click", function() {
  var CANVcurrent = document.getElementsByClassName("si__canvastype active");
  if (CANVcurrent.length > 0) { 
    CANVcurrent[0].className = CANVcurrent[0].className.replace(" active", "");
  }
  this.className += " active";
  CurrentImageCanv=document.querySelector(".si__canvastype.active").getAttribute("cvalue");
    ChangeImage();
      

  });
 
}
}

function ChangeImage(){
var content_box = document.getElementById("si__imgs").childNodes;
    content_box[1].src='';
 if (CurrentImageSize=="60x90" && CurrentImageCanv=="Framed")
{
    
    content_box[1].src='https://...';
}
else if (CurrentImageSize=="60x90" && CurrentImageCanv=="5 Piece")
{
    content_box[1].src='https://...';
}
else{}
}

//Another option if you wish to make the code shorter and allow customization.
function ChangeImage2(){
var content_box = document.getElementById("si__imgs").childNodes;
 var imgName="https://www.example.com/imgs/"+CurrentImageCanv+CurrentImageSize+".jpg";
 content_box[1].src=imgName;
}

我找不到添加此功能的插件，所以我决定编写这个 php 模板。我希望它有所帮助。也欢迎任何关于改进的意见

javascript - WooCommerce- 画布/绘画的 SizeInfo 按钮。[PHP,Javascript,html,css]

问题描述

解决方案

推荐阅读