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:
How do i get the WooCommerce attribute values to use in JavaScript. Solved
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.
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">×</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