Redirection Form from product page to checkout page in shopify
Redirection Form from product page to checkout page in shopify
Write form code that follows the shopify standards for product page that directs the customer straight to checkout page with form field data and product properties attached in incorporated on checkout page.
The form has the following fields:
Discount code
First Name
Last Name
Address
Address 2
Phone
City
State
Email
Zip Code
Rush my order submit button
I tried this code but it does not work:
<form id="checkout-form">
<label for="discount-code">Discount Code:</label>
<input type="text" id="discount-code" name="discountCode" ><br>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" required><br>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" required><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br>
<label for="address-2">Address 2:</label>
<input type="text" id="address-2" name="address2"><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" required><br>
<label for="state">State:</label>
<input type="text" id="state" name="state" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" required><br>
<button type="submit" id="rush-order-submit">Rush My Order</button>
</form>
<script>
document.getElementById('checkout-form').addEventListener('submit', function(event) {
event.preventDefault();
// Get form data
const formData = {
discountCode: document.getElementById('discount-code').value,
firstName: document.getElementById('first-name').value,
lastName: document.getElementById('last-name').value,
address: document.getElementById('address').value,
address2: document.getElementById('address-2').value,
phone: document.getElementById('phone').value,
city: document.getElementById('city').value,
state: document.getElementById('state').value,
email: document.getElementById('email').value,
zipCode: document.getElementById('zip-code').value
};
// Get product properties (example values, replace with actual product data)
const productProperties = {
productName: '{{ product.title }}',
price: {{product.price}},
quantity: 1
};
// Redirect to Shopify checkout page with form and product properties as query parameters
const checkoutUrl = '/checkout'; // Update with your Shopify checkout URL
const queryParams = new URLSearchParams({...formData, ...productProperties}).toString();
window.location.href = `${checkoutUrl}?${queryParams}`;
});
</script>
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand