Ecommerce Shopify WordPress Discussion

Issue With Shopify Cart Update Using Variant ID

Hello Stackoverflow Community, I hope this post finds you well. I am reaching out to seek assistance with an issue I am currently facing in my Shopify store related to the integration of Flatpickr for date selection and updating the cart with the selected variant ID. Problem Description: I have implemented a date picker using Flatpickr that allows users to select booking dates. The logic is designed to determine the appropriate variant based on the selected date range, and it successfully updates the variant selector and displayed price accordingly. However, when attempting to add the product to the cart, I am encountering a "400 Bad Request" error, indicating an issue with the selected variant ID being posted to the cart. Relevant Code Snippet: POST https://pro-sound-and-lighting.myshopify.com/cart/add.js?id=1%20Week&quantity=1&oseid=NSa28yXZX8Q7AskYMTv3hbju 400 (Bad Request) Code Context: The issue seems to be related to how the variant ID is constructed and passed to the cart during the addToCart function. The selectedVariantId is not being formatted or encoded correctly, resulting in a failed request. Request for Assistance: I would greatly appreciate any guidance or assistance from the community in identifying and resolving this issue. Here are some specific questions: How can I properly format and encode the selectedVariantId before adding the product to the cart? Are there any modifications needed in the addToCart function to ensure the correct construction of the request URL? The Code: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- flatpickr --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <title>DateSelector</title> </head> <body class="vh-100"> <!-- Main Content --> <div class="mx-auto" style="margin-top:2.71px;margin-bottom:2.71px;"> <label class="form_label dates_label">Booking Dates</label> <form> <div class="date-picker-wrap date-pick-v3"> <div class="date-picker-custom book-from"> <label for="start_date" class="start-date">Book From:</label> <input type="text" id="start_date" class="form-control required" autocomplete="off" name="properties[Start Date]" form="product-form-{{ section.id }}" placeholder="" required> </div> <div class="booking-separator"></div> <div class="date-picker-custom book-to"> <label for="end_date" class="end-date">Book To:</label> <input type="text" id="end_date" class="form-control required" autocomplete="off" name="properties[End Date]" form="product-form-{{ section.id }}" placeholder="" required> </div> </div> </form> <!-- Displayed Price --> <div class="price__regular"> <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> <span id="displayed_price" class="price-item price-item--regular"> {{ money_price }} </span> </div> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- flatpickr --> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <!-- Your Shopify script with Flatpickr integration --> <script> document.addEventListener('DOMContentLoaded', function () { let selectedVariantId; const start_date = flatpickr("#start_date", { enableTime: false, allowInput: true, dateFormat: "d M", altInput: false, altFormat: "j F, Y", minDate: "today", disable: [ function(date) { // Disable Sundays return date.getDay() === 0; } ], minTime: "09:00", maxTime: "17:00", onChange: function (sel_date, date_str) { // Set maxDate for end_date to one week from the selected start date const maxEndDate = new Date(sel_date); maxEndDate.setDate(maxEndDate.getDate() + 7); // Maximum 7 days from the selected start date end_date.set("minDate", date_str); end_date.set("maxDate", maxEndDate); updateProductVariant(); } }); const end_date = flatpickr("#end_date", { enableTime: false, allowInput: true, dateFormat: "d M", altInput: false, altFormat: "j F, Y", minDate: "today", disable: [ function(date) { // Disable Sundays return date.getDay() === 0; } ], minTime: "09:00", maxTime: "17:00", onChange: function (sel_date, date_str) { updateProductVariant(); } }); function updateProductVariant() { // Logic to select product variant based on date range const start = start_date.selectedDates[0]; const end = end_date.selectedDates[0]; const daysDifference = Math.floor((end - start) / (24 * 60 * 60 * 1000)) + 1; let selectedVariant = "1 Night"; if (daysDifference >= 3 && daysDifference <= 4) { selectedVariant = "2-3 Nights"; } else if (daysDifference >= 5) { selectedVariant = "1 Week"; } const variantSelector = document.querySelector('.select__select'); // Find the option with the matching variant name const variantOption = Array.from(variantSelector.options).find(option => option.text === selectedVariant); if (variantOption) { // Set the selected variant in Shopify variant select variantSelector.value = variantOption.value; // Trigger a change event to ensure Shopify updates the product variant variantSelector.dispatchEvent(new Event('change')); // Fetch and update the displayed price based on the selected variant const displayedPriceElement = document.getElementById('displayed_price'); const selectedVariantPrice = fetchVariantPrice(selectedVariant); // Implement this function displayedPriceElement.textContent = selectedVariantPrice; // Update the selectedVariantId selectedVariantId = variantSelector.value; } } const cartButton = document.getElementById('ProductSubmitButton-template--14892119556214__main'); if (cartButton) { cartButton.addEventListener('click', addToCart); } function addToCart() { console.log('Selected Variant ID:', selectedVariantId); const encodedVariantId = encodeURIComponent(selectedVariantId); const addToCartUrl = `https://prosoundlighting.com.au/cart/add.js?id=${encodedVariantId}&quantity=1`; fetch(addToCartUrl, { method: 'POST' }) .then(response => response.json()) .then(data => { console.log('Product added to cart:', data); // Handle success, e.g., display a success message }) .catch(error => { console.error('Error adding product to cart:', error); // Handle error, e.g., display an error message }); } // Function to fetch the price of the selected variant function fetchVariantPrice(selectedVariant) { // Replace this with your logic to fetch the price based on the selected variant // Example: return a hardcoded price for the selected variant const regularPrice = parseFloat("{{ product.price | money_without_currency }}".replace(',', '')); // Replace with your actual Shopify liquid code switch (selectedVariant) { case "1 Night": return formatPrice(regularPrice); case "2-3 Nights": return formatPrice(regularPrice * 1.5); case "1 Week": return formatPrice(regularPrice * 3); default: return formatPrice(regularPrice * 3); } } // Helper function to format the price function formatPrice(price) { // Replace this with your logic to format the price (e.g., add currency symbol, decimal places, etc.) return "$" + price.toFixed(2); } }); </script> </body> </html> I have tried various approaches but haven't been able to resolve the issue on my own. Any insights or suggestions from the community would be immensely helpful. Thank you in advance for your time and assistance. Kindest regards, Josh What was tried? 1. Integration of Flatpickr Date Picker: The inclusion of Flatpickr Date Picker was attempted to allow users to select a date. 2. Updating Variant Selector Based on Date: Logic was implemented to update the variant selector based on the selected date using Flatpickr. 3. Fetching Variant ID: An attempt was made to fetch the correct variant ID corresponding to the selected date. 4. Adding Variant to Cart: The addToCart function was created to add the selected variant to the cart using Shopify's AJAX endpoint. What was expected? 1. User-Selectable Date: Users should be able to select a date using the Flatpickr Date Picker. 2. Dynamic Variant Selector: The variant selector should dynamically update based on the selected date. 3. Correct Variant ID: The logic should correctly determine the variant ID associated with the selected date. 4. Successful Addition to Cart: When adding the product to the cart, the expected result is a successful addition with the correct variant ID. What actually resulted? 1. Flatpickr Integration: The Flatpickr Date Picker was successfully integrated, allowing users to choose a date. 2. Dynamic Variant Selector: Logic was implemented to update the variant selector dynamically based on the selected date. 3. Fetching Variant ID: An attempt was made to fetch the variant ID, but there were challenges in extracting the correct information from the provided Shopify code. 4. Adding Variant to Cart: While the addToCart function was implemented, there were issues with obtaining the correct variant ID, resulting in Bad Request errors when trying to add the product to the cart.
Thanks for sharing page demo: Here you need to update the code to the current page. replace this line of code variantSelector.dispatchEvent(new Event('change')); with document.querySelector('variant-selects').dispatchEvent(new Event('change')); and also get the current variation ID inside addToCart function const encodedVariantId = encodeURIComponent(selectedVariantId); with const encodedVariantId = document.querySelector('[name="id"]').value;

January 20, 2024

TurboCommerce make the better internet purchasing globaly

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

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.