You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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);
});
});
The text was updated successfully, but these errors were encountered:
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:
custom.js:
The text was updated successfully, but these errors were encountered: