I have this js code:
var my_elem = document.querySelector("[action='/cart/add']");
but I need to make it a string, so I can use it as a string variable.
How I can do that?
I already tried:
'var my_elem = document.querySelector("[action=\'/cart/add\']");'
but I got an error:
syntax error, unexpected '"') === true) {' (T_CONSTANT_ENCAPSED_STRING)
UPDATE
public function start()
{
$my_var = '
var my_elem = document.querySelector("\[action=\'\/cart\/add\']");
var a = document.createElement("div");
a.innerHTML = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
a.id = \'myBtn-sz\'; ';
}
The problem is that a traditional string literal cannot span multiple lines, unless you put a single backslash at the end of every line (which looks bad). A simple solution is to use back tics instead of single quotes, so it is a template literal:
$my_var = `
var my_elem = document.querySelector("[action='/cart/add']");
var a = document.createElement("div");
a.innerHTML = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
a.id = 'myBtn-sz'; `;
Notice the back tick at the very start and end of the template literal. You also no longer need to escape the single quotes now (although it also works if you keep them).