文章/答案/技术大牛

发布

社区首页 >问答首页 >用于帆布/绘画的SizeInfo按钮。[PHP，Javascript，html，css]

问用于帆布/绘画的SizeInfo按钮。[PHP，Javascript，html，css]
EN

Stack Overflow用户

提问于 2021-09-22 17:05:45

回答 1查看 189关注 0票数 2

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

问题：

如何获得在WooCommerce中使用的JavaScript属性值。解决了
如何根据两个条件(大小和画布类型)更改图像源，解决了

示例：(框架&& 60x90，然后显示图像帧60x90.jpg，5片和60x90，然后显示图像5Piece60x90.jpg)

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

javascript

php

jquery

wordpress

woocommerce

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-01 04:25:40

我需要一个插件/功能显示一个大小信息模式的绘画。我找不到一个，所以决定试着制作一个简单而高效的。

在10/10/2021 mm/dd/yy -Added上编辑的第二个更改图像函数

步骤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:获取数组以在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模板。希望能帮上忙。任何关于改进的意见也欢迎

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69288475

复制

相似问题

问用于帆布/绘画的SizeInfo按钮。[PHP，Javascript，html，css]
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于帆布/绘画的SizeInfo按钮。[PHP，Javascript，html，css]EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于帆布/绘画的SizeInfo按钮。[PHP，Javascript，html，css]
EN