Adding HTML to the Integrated Store Footer

Question

Hey there, guys! All right?

Recently, I started in the middle of the e-market and created my online store via Integrated Store.I’m trying to make some adjustments to the template I bought, adapting it to my needs, but I’m new in the coding business.

I’m trying to put some information at the bottom of the page, but to no avail. Here is the code below:

$("#rodape .institucional .container .row-fluid .span4").append(
    "<li class=\"email\">" +
        "<p><i class=\"fa fa-envelope\" aria-hidden=\"true\"></i>
            [email protected] </p>" +
    "<li>" +
    "<li class=\"endereco-loja\">" +
        "<span class=\"endereco\">" + 
        "<p><i class=\"fa fa-home\" aria-hidden=\"true\"></i> Teste de Endereço </p>" +
        "</span>" +
    "<li>");

Can someone help me shed some light on this mystery of why it’s not working? Thank you and hugs.

Answer 1

Points of attention and possible improvements:

• The email has several spaces before the text itself that conflict with how the code works, so it’s not working. But this is solved by eliminating all previous spaces and joining it to the previous line so that everything is in one line (no line breaks).

• To avoid placing an exhaust bar \ with every quote (" ") you find in every class/id that appears, just type the HTML normally and at the end of each line change the symbol of + by an exhaust bar - \ as you will see in the example below the final result of your corrected and working code.

• There are elements that are not properly closed </>.

Code in operation:

$('#rodape').append(
'<li class="email">\
  <p><i class="fa fa-envelope" aria-hidden="true"></i>[email protected]</p>\
</li>\
<li class="endereco-loja">\
  <span class="endereco">\
    <p><i class="fa fa-home" aria-hidden="true"></i> Teste de Endereço </p>\
  </span>\
</li>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="rodape">
  Rodapé institucional container
</div>