Hi, I need a bit help loading some JSON onto a modal window using Javascript. Here's the JSON:
{
"Shirts":[{"id":63, "name":"Winter Style", "price":9.99,
"options": [{"name":"large", "price":2.99},{"name":"Small", "price":1.99}]
}]
}
I create markup with the parent product above e.g. Winter Shirt and price with an add to cart button, I would like to load a modal with the options and then add to the price of the parent product e.g. 9.99 + 1.99.
What would be a good way to go about loading the options on a modal and then matching it up with its parent product. There will be a few products that may or may not have the options.
EDIT:
Currently I have some items without the options which gets added to an array items
with a javascript event. The item data are loaded onto a button with data attributes:
<button class="proAdd btn-sm" data-id="2117" data-price="3.45" data-name="Basic Jeans">Add</button>
On the event handler:
var name = $(this).attr("data-name");
var price = parseFloat($(this).attr("data-price"));
var id = parseInt($(this).attr("data-id"));
var item = {"id":id, "name": name,"price": price}
This is just part of the code:
cartItems.items.push(item);
I suppose I'd need to somehow check if the product contains options then combine it with the item
object, I'd imagine it'd look something like this after adding the options:
var item = {"id":id, "name": name,"price": price, "options":[{"name":large, "price":2.95}]}
Not entirely sure how to go about it, Any help/techniques would be highly appreciated.
Top comments (2)
What have you tried so far?
Hey! Thanks for asking it's a very familiar question from SO :-) I've updated my question, hopefully it makes more sense now.