HadiAlexandre

Is it possible to access an image that is in my gallery from a javascript that I injected in your code? What is the url for the images in my gallery?

I would like to add another button to cart page. The normal button will take the user to the checkout page where he can pay using paypal, or card. The new button will take the user to another page where he can pay with a local Portuguese payment method.

Imagine the user fill the form, I want to get the values from the fields in the form from a javascript that is going to execute in another section in the page. Here is the code I created. Here I get the values of the checkbox options with, for instance, document.getElementById("tahini").value function enviaMessage() { var message = "Produtos escolhidos: " let checkbox=document.getElementById("tahini"); if (checkbox.checked){ message = message + checkbox.value; } checkbox=document.getElementById("zaatar"); if (checkbox.checked){ message = message + ", " + checkbox.value; } checkbox=document.getElementById("1001"); if (checkbox.checked){ message = message + ", " + checkbox.value; } checkbox=document.getElementById("granola"); if (checkbox.checked){ message = message + ", " + checkbox.value; } nome = document.getElementById("nome").value; morada = document.getElementById("morada").value; telefone = document.getElementById("telefone").value; mensagem = document.getElementById("mensagem").value; message = message + " Nome: " + nome + " Morada: " + morada + " Telefone: " + telefone + " mensagem: " + mensagem var href = "https://api.whatsapp.com/send?phone=+xxxxxxxxx&text=" + message; window.location.href = href; } <div id="encomendaProdutos"> <form> <fieldset id="escolhaProdutos" aria-required="true"> <legend class="title"> Escolha o(s) seu(s) produto(s): <span class="required" aria-hidden="true">*</span> </legend> <label><input type="checkbox" id="tahini" name="escolhaProdutos-field" value="tahini"> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label> <label><input type="checkbox" id="zaatar" name="escolhaProdutos-field" value="zaatar"> Za'atar 150 Gms</label> <label><input type="checkbox" id="1001" name="escolhaProdutos-field" value="1001"> Cabaz Gourmet Mil e Uma Noites</label> <label><input type="checkbox" id="granola" name="escolhaProdutos-field" value="granola"> Granola Max 500 Gms</label> </fieldset> <br><br> <label for="nome">Nome:</label><br> <input id="nome" name="nome" type="text" spellcheck="false" maxlength="30" data-title="Nome" aria-required="true"> <br><br> <label for="morada">Morada:</label><br> <input id="morada" name="morada" type="text" spellcheck="false" maxlength="60" data-title="Morada" aria-required="true"> <label for="telefone">Telefone:</label><br> <input type="number" id="telefone" name="telefone" maxlength="9" data-title="Telefone" aria-required="true"><br><br> <label for="mensagem">Se quiser enviar uma mensagem para o Chef, introduza-a aqui:</label><br> <input id="mensagem" name="mensagem" type="text" spellcheck="false" maxlength="150" data-title="mensagem" aria-required="true"> <input type="button" onclick="enviaMensagem()" value="Pressione aqui para enviar mensagem por whatsapp"> </form> </div> If I want to do the same with the form created in squarespace, there is no place when we create the form to set an id for each field. The only way to find out the name / id (some fields have id others only name), I have to request the page in the browser use the Developer tools to see the source and find out the name or id. Following is the code I copied from a portion of the form related with the checkbox. As you can see they do not use id argument, and the name in all of the options is the same, so it is difficult in a javascript to find out which option were selected. <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Tahini 🌱 (Pasta de Sésamo) 300 Gms"/> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label></div> <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Za'atar 150 Gms"/> Za'atar 150 Gms</label></div> <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Cabaz Gourmet Mil e Uma Noites"/> Cabaz Gourmet Mil e Uma Noites</label></div> <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Granola Max 500 Gms"/> Granola Max 500 Gms</label></div> I found a way to do the code: const checkboxes = document.getElementsByName('checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field'); // loop through all the checkboxes and check if it's checked for (let i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { // if the checkbox is checked, log its value console.log(checkboxes[i].value); } } But what I really would like is a way to set the names/id of the fields when I create the form in squarespace

I would like to access the values in a form field from another section where I inject code. How can I do that? There should be a way to access the field value, like var email = document.querySelector ( '[name="email"]' ).value var products = document.querySelector ( '[name="products"]' ).value The problem is that when I create the form fields, I do not see an option to specify a 'name' or 'id' for the field.

I would like to access the information that was added to the cart. I can see in the source page of the cart that a json message is used like the one I show below. My question is how canI access this information using injection code from another page? {"cart": {"id":"6449661d6425dd3ce121b64b", "cartToken":"5it6x3HFD4XZnjDC2dDaR1TwRK4I1pp08h7S-u3u", "items":[{"id":"6449661d36d9b40c9cbd5c71", "productId":"641749825cf2ca012575a394", "productType":"PHYSICAL", "sku":"SQ5692676", "variantId":"fcdfcc6a-6061-46f9-a18e-a08f43eaab36", "productName":"Cabaz Gourmet Mil e Uma Noites", "productDescription”:…, "productUrl":"/produtos/p/1001box", "quantity":3,"multipleQuantityAllowed":true, "unitPrice":{"currencyCode":"EUR","value":7000,"decimalValue":"70.00","fractionalDigits":2}, "itemTotal":{"currencyCode":"EUR","value":21000,"decimalValue":"210.00","fractionalDigits":2}, "variantOptions":[],"image”:{…},”…. "subtotal":{"currencyCode":"EUR","value":21000,"decimalValue":"210.00","fractionalDigits":2}, "shippingTotal":{"currencyCode":"EUR","value":0,"decimalValue":"0.00","fractionalDigits":2}, "discountTotal":{"currencyCode":"EUR","value":0,"decimalValue":"0.00","fractionalDigits":2}, "taxTotal":{"currencyCode":"EUR","value":0,"decimalValue":"0.00","fractionalDigits":2}, "appliedGiftCardBalanceTotal":{"currencyCode":"EUR","value":0,"decimalValue":"0.00","fractionalDigits":2}, "grandTotal":{"currencyCode":"EUR","value":21000,"decimalValue":"210.00","fractionalDigits":2}, …}

I have added that custom css and it solved my issue. the selector now appears integrated in the header in the top right corner.

I have added that code that I find somewhere to be able to add a language selection that when you select a specific language I will forward the page to /language/pagename, for instances, /pt/orders. There is a way to inject the code in the header or footer. I did it, but the language selection element is behind the Theme, it is not visible. Probable the Theme element is overlapping my element. There should be a way to integrate my language selection element in the header. Like it happens when I enable the squarespace language selector, it appears in the right part of the header, inside the Theme. Sorry, If I do not explain very well. Please any doubt, ask me, but imagine you are talking with someone that select squarespace , because I do not have any experience with html and css.

I want to ingest code in the header, a language selection, but it is not visible in the page. It seems to be hidden under the header, under the Theme or some other element in the page. I know that you have your own language selector mechanism, but it doesn't fit my interests. The code I am trying to ingest is: <!-- Add CSS to style the select element. You can customize the styling to fit your website's design: css. This I added to the Custom CSS part. --> #language-select { border: none; font-size: 16px; background-color: transparent; color: #fff; text-transform: uppercase; cursor: pointer; } <!-- Add JavaScript to handle the language switch. You can use an event listener to detect when the user selects a different language and update the page accordingly. Here's an example using jQuery: javascript --> <script> $('#language-select').on('change', function() { var path = window.location.pathname; var page = path.split("/").pop(); console.log( page ); var language = $(this).val(); window.location.href = '/' + language + '/' + page; }); </script> <!-- In this example, the language code is appended to the URL of the current page. You'll need to adjust this code to match the URL structure of your website. Finally, add the language switcher to your HTML header: --> <select id="language-select"> <option value="en">English</option> <option value="fr">Français</option> <option value="es">Español</option> </select> <!-- That's it! With these steps, you should be able to create a simple language switcher in your HTML header. -->

I found the solution, I need to call the initPayPalButton()function after the user has calculated the amount value by calling the calc() function. I do this by adding an onsubmit attribute to the form element that calls the calc() function and then returns false to prevent the form from submitting. <script type="text/javascript"> function calc() { ... document.querySelector('#smart-button-container #amount').value = total; } </script> <div id="calculatePrice"></div> Choose your menu: <form onsubmit="calc();return false;" oninput="calc();"> ... <label for="total">Total price will be:</label><br> <output class="enMoney" id="total" name="total"></output><br><br> </form> <div id="smart-button-container"> <div style="text-align: center"><label for="description">Your order is: </label><output type="text" name="description" id="description" maxlength="127" value=""></div> <div style="text-align: center"><label for="amount">Total: </label><output name="amount" type="number" id="amount" value="" ><span> EUR</span></div> <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div> </div> <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script> <script> function initPayPalButton() { paypal.Buttons({ style: { color: 'gold', shape: 'rect', label: 'paypal', layout: 'vertical', }, createOrder: function (data, actions) { return actions.order.create({ purchase_units: [{ amount: { currency_code: 'EUR', value: document.querySelector('#total').value } }] }); }, ...

I am trying to integrate a paypal button with my website. I calculate the value to pay in a function called in one div section, then I passed that value to another div section where I have my paypal button. I can see the total value to pay rendered in my page, but the paypal button function do not see the variable that was set previously in the other div. <script type="text/javascript"> function calc() { ... document.querySelector('#smart-button-container #amount').value = total; } </script> <div id="calculatePrice"></div> Choose your menu: <form oninput="calc();"> ... <label for="total">Total price will be:</label><br> <output class="enMoney" id="total" name="total"></output><br><br> </form> <div id="smart-button-container"> <div style="text-align: center"><label for="description">Your order is: </label><output type="text" name="description" id="description" maxlength="127" value=""></div> <div style="text-align: center"><label for="amount">Total: </label><output name="amount" type="number" id="amount" value="" ><span> EUR</span></div> <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div> </div> <script src="https://www.paypal.com/sdk/js?client-id=AT6Q7KMR8NWjax3f-g11uL-iCAFgBTccSt1CTnXG-VnSGVmqj5-ozsSzVAaXij5zJuIwyMuEKOQQx01n&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script> <script> function initPayPalButton() { var amount = document.querySelector('#smart-button-container #amount'); # this variable is not set with the value of the amount that was set above ...

Forget my last request , I found how to do it in zapier.

I have the same problem.

It has worked now. Thanks very much for your help. Now I need that in the email that is sent to user using zapier the content is enriched with the description of the values, not only the values. For instance, I have the field menu with value Petra. This one is easy to find, because they are fixed values, but other fields not so easy. This is an example of the email I received: 2/2/2023Andalusia2160peanuts{First=Joao, Last=Alexandre}4/3/1988345345346 I would like to have the name of the fields in the email: Date of the event: 2/2/2023 Menu: Andalusia .... Is this possible?

Hi, you say here that 'dynamically changing input or hidden field values ... is relatively easy with some JavaScript injection code to manipulate the DOM'. I have a form that when filled out by the user is submitted and an email is sent to me. I have added in the same page some code to add other fields and make some calculations, but these fields are not included in the email when the form is submitted. I created hidden fields in the Squarespace form to set there with the values of the fields I added with my code, but I do not know how to set the values in the hidden fields. I found out that those fields are associated with variables like SQF_FIELD_NAME, I tried to set these variables in my javascript, but it did not work.

Hello, Liked what I read here. It helped me. I am also trying to place some values of some fields from my javascript code into a hidden field on the form, so that I can have these data in the email that is submitted. Nevertheless, I still do not know how to do that. I I have found that the hidden fields are variables in the form with names that start with SQF_FIELD_NAME, so in my javascript I did: SQF_MENU = menu but this did no work the field is not populated in the form. I have read here that you do use the document.getElementsByTagName('input') to get the values of the form, have you figured out to set the values in the form?!