Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Required parameter missing or invalid: items" Error when adding to cart #210

Open
EricCarey286 opened this issue Sep 3, 2021 · 0 comments

Comments

@EricCarey286
Copy link

EricCarey286 commented Sep 3, 2021

I use Cart.js to upsell warranty products on my cart page. I found a solution on Shopify's site using an upsell.liquid file and JavaScript. I am fairly new to Shopify and not sure how everything works. The products get added underneath the car with a button that says add to cart but the button does nothing. When i check the console I see this error: POST : https://wi-plum-test.myshopify.com/cart/add.js Status: 404 Not Found. When I look at '/cart/add.js' I see this message "{"status":"bad_request","message":"Parameter Missing or Invalid","description":"Required parameter missing or invalid: items"}"

Any help would be greatly appreciated

Here is the upsell.liquid file and custom.js files:
upsell.liquid:

{% comment %} Create liquid variable for collection {% endcomment %}
{% assign upsellCollection = 'upsell-products' %}
<div class="c-upsell js-upsell">
    {% comment %} Use Product ID as Data Attribute which we will use for Add to Cart Event {% endcomment %}
    {% for product in collections[upsellCollection].products %}
    <div class="c-upsell__product js-product" data-product-id="{{ product.id}}">
        <div class="c-upsell__productImage">
            {% comment %} Fetch Product Images{% endcomment %}
            {% for image in product.images %}
            <img class="c-upsell__innerImage" src="{{ image | img_url: '586x' }}" alt="Product Img" />
            {% endfor %}
        </div>
        {% comment %} Fetch Product title & Price {% endcomment %}
        <h2 class="c-upsell__productTitle">{{ product.title }} </h2>
        <p class="c-upsell__productPrice"> {{ product.price }}</p>
        {% comment %} Add to Cart Button {% endcomment %}
      	<a href="#" class="c-upsell__atc js-atc">Add to Cart</a>
    </div>
    {% endfor %}
</div>
{% comment %} Now we're done with Liquid code and collection will be appeared on where we add it {% endcomment %}

custom.js:

const upsellProductArr = [];
function upsellProduct() {
	// Create an empty Array in which we'll be pushing our product ID 
	
	//get the Product ID from Attribute
	const productID = document.querySelector('.js-product').getAttribute('data-product-id');
 
	// Now push this product ID to Array
	upsellProductArr.push(productID);
  
	// Console.log to check you're pushing correct ID into array
	console.log(upsellProductArr);
 
}

// Let's Find our ATC button
const button = document.querySelector('.js-atc');
	// Now Add click event use our Array to add to cart the Product 
button.addEventListener('click', event => {
  
	upsellProduct();

	// This is CartJS API - Attaching link for reference 
	 CartJS.addItem(upsellProductArr[0], quantity = 1);
		
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant