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

Posted

技术标签:

【中文标题】WooCommerce- 画布/绘画的 SizeInfo 按钮。 [PHP,Javascript,html,css]【英文标题】：WooCommerce- SizeInfo button for canvas/paintings. [PHP,Javascript,html,css] 【发布时间】：2021-11-16 04:07:10 【问题描述】：

我需要一个插件/功能来显示 WooCommerce 上绘画的尺寸信息模式。我发现很多用于显示尺寸图表和表格，但没有用于画布/绘画。

问题：

    如何获取 WooCommerce 属性值以在 javascript 中使用。 已解决

    如何根据两个条件（尺寸和画布类型）更改图像源已解决

示例：（加框 && 60x90 然后显示图片 Framed60x90.jpg | 5 Piece && 60x90 然后显示图片 5Piece60x90.jpg）

我需要类似于下图中显示的 WooCommerce 产品功能。

【问题讨论】：

好的，我决定将 js 和 html 放在一个 php 文档中，这样可以更轻松地从 php 获取值并在 javascript 中使用它们。 我重新编写了整个帖子，因为经过一些研究以使代码正常工作，我找到了所有问题的答案。如果有人对我可以在哪里改进它有任何建议，我将不胜感激。 【参考方案1】：

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

最后编辑于 2021 年 10 月 10 日 [mm/dd/yy] - 增加二次换图功能

第 1 步： 从产品中调用 get the attributes。( 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 步：获取要在 javascript 中使用的 PHP 数组。

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 模板。我希望它有所帮助。也欢迎任何关于改进的意见

【讨论】：

以上是关于WooCommerce- 画布/绘画的 SizeInfo 按钮。 [PHP,Javascript,html,css]的主要内容，如果未能解决你的问题，请参考以下文章

canvas绘画基础：认识canvas画布

使用vue学习three.js之加载和使用纹理-使用canvas画布上的绘画作为纹理渲染到方块上，使用动态绘画纹理

在 Retina 显示屏上的 CGContextRef 上绘画

canvas入门，一篇博文带你学会用代码绘画，直击实战案例！

canvas入门，一篇博文带你学会用代码绘画，直击实战案例！

带有Node.js的HTML5画布，集群和Socket.IO