How to set PayPal shipping costs with JavaScript/JQuery - javascript

I have a Form that is in html.twig format. In that form there is a for loop that shows every product we have.
Corresponding to that Form there is a chckForm() Functions which calculates or to be more precise adds shipping costs to a product when a user buys it.
The shipping costs dropdown has 2 Values: "12,00" or "18.50". This Value is then added to the order.
The problem is that if users buys more of our products than the shipping cost is always added again instead of only being added once to the whole order.
Form Code in html.twig:
<table class="table table-striped">
{% for item in page.header.paypal.items %}
{% set image = media['user://pages/images/'~item.image].resize(52) %}
<tr>
<td>{{ image }}</td>
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>{{ item.amount|number_format(2,',') }} {{ currency_sign }}</td>
<td>
<form name="{{ item.name }}"
id="{{ item.name }}"
target="paypal"
action="{{ page.header.paypal.action }}"
method="post"
onsubmit="return chkForm('{{ item.name }}');">
<input src="/images/button-basket.png" name="submit"
alt="In den Warenkorb" title="In den Warenkorb"
type="image">
<input name="add" value="1" type="hidden">
<input name="cmd" value="_cart" type="hidden">
<input name="business" value="{{ page.header.paypal.business }}" type="hidden">
<input name="item_name" value="{{ item.name }} - {{ item.description }}" type="hidden">
<input name="amount" value="{{ item.amount|number_format(2,'.') }}" type="hidden">
<input name="no_shipping" value="0" type="hidden">
<input name="shipping" value="0.00" type="hidden">
<input name="no_note" value="1" type="hidden">
<input name="currency_code" value="{{ page.header.paypal.currency_code }}" type="hidden">
<input name="lc" value="{{ page.header.paypal.lc }}" type="hidden">
<input name="bn" value="PP-ShopCartBF" type="hidden">
</form>
</td>
</tr>
{% endfor %}
</table>
and the corresponding JavaScript/jQuery code:
function chkForm(form)
{
var shippingCosts = $('#shippingCosts').val(); // value from shipping dropdown 12 or 18.50
var shippingField = $('#'+form+' input[name=shipping]'); // hidden input > 0.00
shippingField.val(shippingCosts);
console.log("value1:" + shippingCosts);
return true;
}
Now I need to solve that problem by somehow saying that the shipping value should only be added once in the .js Function. I tried a few things with some if`s but it didn't work.
Another way could be to just add the products with the price and then at the end if the User presses the final BUY so on the PayPal checkout site he is asked to either specify shipping costs as 12$ or 18.50$ - but I don't know if that is possible with PayPal.

Related

shopify liquid showing variant prices based on input

I am a beginner in liquid and currently I am trying to develop a shopify store. In the products page, I am displaying the options as radio buttons and taking customer inputs. The prices are different for the variants. Now I am trying to display the variant price based on the customer input, I am a bit lost. This is what I have so far:
{% for product_option in product.options_with_values %}
{{ product_option.name }}
{% for value in product_option.values %}
<input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
<label for="{{ value }}">{{ value }}</label>
{% endfor %}
<!--want to show the variant price here-->
<br>
{% endfor %}
</div>
I know that I can display all the variant prices like this:
{% for variant in product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
But that's not what I want. Is there any way to do it without having to use javaScript? Thanks in advance.
Liquid is a server side language. It is processed by the server and cannot offer any dynamic behaviour.
You need to change the price with Javascript. There is no other solution.
Using your code I've made a small example
document
.querySelectorAll("input[name='Size']").forEach(option =>{
option.addEventListener("change", function (event, target) {
document.querySelectorAll(".price").forEach((price) => {
if(price.dataset.option==option.value){
price.classList.remove("hide");
}else{
price.classList.add("hide");
}
});
});
})
.hide{
display: none;
}
<html>
<form>
Size
<input type="radio" id="S" name="Size" checked="checked" value="S">
<label for="S">S</label>
<input type="radio" id="M" name="Size" value="M">
<label for="M">M</label>
<br>
<p>Price:
<span class="price" data-option="S">£14.00</span>
<span class="price hide" data-option="M">£15.00</span>
</p>
<input type="number" min="1">
<button type="submit">Add to Cart</button>
</form>
</html>

Shopify adding two products to cart with one checkout button

So I have a bundle I created to add two products to cart once those products are selected. I want them to be added to cart at the same time. I'm currently only getting one product being added, with the name="id". How can I create the values in input for both to checkout?
Here's my form:
<form method="post" action="/cart/add" class="col-button ">
<input id="idPrice" type="hidden" name="id" value="" />
<input id="designPrice" type="hidden" name="id" value="" />
<input min="1" max="2" type="hidden" id="quantity" name="quantity" />
<button name="checkout" {%unless product.available %}style='margin-bottom:20px;'{% endunless %}type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="collection-add-to-cart {% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
{{ 'layout.general.checkout' | t }}
</button>
</form>
Thanks in advance!

javascript ROWs INDEX when change value of a field

I m trying to check controls between two values on 2 fields in same row.
my html part of my table is:
<tbody>
{% for payable in payables %}
<tr class="item">
<td>
<input class="readonly" id="item-{{ payable.id }}" name="client-{{ payable.id }}" required="" type="text" value="{{ payable.client }}" readonly >
</td>
<td>
<input class="readonly" id="duedate-{{ payable.id }}" name="duedate-{{ payable.id }}" required="" type="text" value="{{ payable.duedate }}" readonly >
</td>
<td>
<input class="readonly" id="number-{{ payable.id }}" name="number-{{ payable.id }}" required="" type="text" value="{{ payable.number }}" readonly >
</td>
<td>
<div class="readonly"><input id="montantttestaxes-{{ payable.id }}" name="montantttestaxes-{{ payable.id }}" required="" type="text" value="{{ payable.montantttestaxes|floatformat:2|intcomma }}" readonly></div>
</td>
<td>
<div class="readonly"><input type=number step="0.01" id="soldedu-{{ payable.id }}" name="soldedu-{{ payable.id }}" required="" type="text" value="{{ payable.soldedu|floatformat:2|intcomma }}" readonly></div>
</td>
<td>
<input type=number id="payment-{{ payable.id }}" name="payment-{{ payable.id }}" required="" type="text" value=0.00 step="0.01" onchange="compare(this);">
</td>
</tr>
{% endfor %}
</tbody>
I had a compare function for payment field I want to get back to my javascript function the row index. for now my code return is undefined...I put rowindex in nbrow variable to log...
this is my javascript:
function compare(y){
console.log(y.value)
var nbrow = y.parentNode.rowIndex
console.log(nbrow)
var x = document.getElementById("myTable").rows[nbrow].cells;
var due = x[4].value
var payment = y.value
console.log(due)
console.log(payment)
if (due< payment){
alert("your payment is too high!");
return false;
}
}
thanks for help
You will want to change y.parentNode.rowIndex to y.parentNode.parentNode.rowIndex.
y is the current element
parentNode is the parent of that element, which is td
So by using parentNode.parentNode, you are getting the parent of the parent, which is tr. Which will have rowIndex associated.

Dividing item.price in shopify

I want to divide {{ item.price | money_without_currency }} by 1.21. I am calling on the item.price in a hidden input value.
<input type="hidden" name="PRODUCT_PRICE_{{ forloop.index }}" value="{{ item.price |
money_without_currency }}">
When I do the below, it shows the value as "100/1.21" as my test product is 100. Makes sense since HTML doesn't do math.
<form name="addToFavorites" method="post" action="contoso.com">
<input type="hidden" name="PARTNER_KEY" value="34234234234234">
<input type="hidden" name="TOTAL_DOMESTIC_SHIPPING_CHARGE" value="0">
{% for item in cart.items %}
<input type="hidden" name="PRODUCT_ID_{{ forloop.index }}" value="{{ item.sku }}">
<input type="hidden" name="PRODUCT_NAME_{{ forloop.index }}" value="{{ item.title }}">
<input type="hidden" name="PRODUCT_PRICE_{{ forloop.index }}" value="({{ item.price |
money_without_currency }}/1.21)">
<input type="hidden" name="PRODUCT_Q_{{ forloop.index }}" value="{{ item.quantity }}">
<input type="hidden" name="PRODUCT_SHIPPING_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_1_{{ forloop.index }}" value="{{ item.variant.title }}">
<input type="hidden" name="PRODUCT_CUSTOM_2_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_3_{{ forloop.index }}" value="">
{% endfor %}
</form>
When I try to play with Javascript, it still just posts over the equation 100/1.21 and not the solution
<script>
var withoutTax = {{ item.price | money_without_currency }} / 1.21
var euPrice = "name=\"PRODUCT_PRICE_{{ forloop.index }}\" value=\"+withoutTax+\""
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("euPrice").innerHTML=euPrice;
}
</script>
<form name="addToFavorites" method="post" action="https://foo.com">;
<input type="hidden" name="PARTNER_KEY" value="987979879879879">
<input type="hidden" name="TOTAL_DOMESTIC_SHIPPING_CHARGE" value="0">
<input type="hidden" name="ORDER_CURRENCY" value="EUR">
{% for item in cart.items %}
<input type="hidden" name="PRODUCT_ID_{{ forloop.index }}" value="{{ item.sku }}">
<input type="hidden" name="PRODUCT_NAME_{{ forloop.index }}" value="{{ item.title }}">
<input type="hidden" id="euPrice">
<input type="hidden" name="PRODUCT_Q_{{ forloop.index }}" value="{{ item.quantity }}">
<input type="hidden" name="PRODUCT_SHIPPING_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_1_{{ forloop.index }}" value="{{ item.variant.title }}">
<input type="hidden" name="PRODUCT_CUSTOM_2_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_3_{{ forloop.index }}" value="">
{% endfor %}
</form>
My ultimate goal is to take a $100 product, discount it by 21%, and insert
Please help by dividing the item price by 1.21 before the post the info.
You could use the divided_by math filter:
{{ item.price | divided_by: 1.21 | money_without_currency }}
Use Javascript parseInt
var priceasnumber = parseInt({{ item.price | money_without_currency }});
var withoutTax = priceasnumber / 1.21;

Javascript - Edit Forms Issue

I have a form that will show profile information and I have a javascript that will edit the form. The edit was working ok, but don't know what I did now. I'm not a javascript expert, but I been pulling my hair trying to figure out the problem.
Here is my code:
<script type="text/javascript">
// Enable all the text fields, rename value of Edit button and submit the forms
function activate(){
get_button_name = $("#save_button").text();
if (get_button_name == 'Edit'){
$(".enable").attr('disabled', false);
$("#save_button").text('Save');
}
else {
$("#editProfileForm").submit();
}
}
function search(){
document.getElementById('button-name').value="search";
}
</script>
<div id="profile_form">
<form id="editProfileForm" method="get" action="/updateProfile/">
{% csrf_token %}
<table>
<h1 style="margin-left: 40px;">Profile</h1>
<!-- Search box -->
<div id="search">
<input type="text" name="search_input" id="search_input" style="display: inline;" />
<button type="submit" onclick="search()">Search</button>
</div>
<input type="hidden" name="button-name" id="button-name" value="" />
{% for i in profile %}
<tr>
<td><label>Firstname:</label></td>
<td><input class="enable" name="firstname" type="text" disabled value="{{ i.firstname }}" /></td>
</tr>
<tr>
<td><label>Lastname:</label></td>
<td><input class="enable" name="lastname" type="text" disabled value="{{ i.lastname }}" /></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input class="enable" name="email" type="text" disabled value="{{ i.user.email}}" /></td>
</tr>
<tr>
<td><label>Location:</label></td>
<td><input class="enable" type="text" name="location" disabled value="{{ i.location }}" /></td>
</tr>
{% endfor %}
</table>
{% if edit %}
<button style="margin: 30px 30px" id='save_button' type='button' onclick='activate()'>Edit</button>
{% endif %}
</form>
</div>
Here is my code:
http://jsfiddle.net/U5jhc/
My problem was on the django setting. I had the wrong setting for causing the jquery file not to load.

Categories