Skip to content

WooCommerce- SizeInfo button for canvas/paintings. [PHP,Javascript,html,css]

I require a plugin/function to display a size info modal for paintings on WooCommerce. I’ve found many for displaying size charts and tables but none for canvas/paintings.

Questions:

  1. How do i get the WooCommerce attribute values to use in JavaScript. Solved

  2. How do i make the image source changed based on two conditions ( Size & Canvas Type)Solved

example: ( Framed && 60×90 then display image Framed60x90.jpg | 5 Piece && 60×90 then display image 5Piece60x90.jpg)

I require something like the feature displayed in the images below for WooCommerce Products.

enter image description here

enter image description here

Advertisement

Answer

I required a plugin/function displays a size info modal for paintings.. I couldn’t find one so decided to try making a simple yet efficient one to use.

Last Edited on 10/10/2021 [mm/dd/yy] -Added a second change image function

Step 1: Function to get the attributes from the product.( 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);

Step 2: Create html & css for buttons and modal. ( CSS not included )

<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>

Step 3: Get the PHP array to use in javascript.

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

Step 4: Set up the modal menu and buttons

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);
});

Step 5: Create the functions to set up the menu items and the conditions to change the image

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;
}

I couldn’t find a plugin to add this feature so i decided to write up this php template. I hope it helps. Any input on improvement is also welcome

enter image description here

User contributions licensed under: CC BY-SA
3 People found this is helpful