The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

How do I add a child product to the cart?

rayden150rayden150 Member
in Help edited August 2016
Hello,

I'm just curious, how do I add a child product to a cart with Javascript? I'm using sidecart effect/theme. And I'm also using couchcms.

In fact, I'm tremendously confused as to how I go about doing this, the documentation is no very detailed. If you can walk me through the steps of adding a child product with JS that will greatly appreciated.

Thanks!
Comments
  • fc_adamfc_adam FoxyCart Team
    edited August 2016
    @rayden150,

    Sure thing! To add products to the cart using javascript, you'd perform a JSONP request which you can see detailed on the wiki at http://wiki.foxycart.com/static/redirect/jsonp. To add the product as a child product, it would simply require including a parent_code attribute to the product, with the value being the code of the parent product that's already in the cart. So for example:
    FC.client.request('https://' + FC.settings.storedomain + '/cart?name=My+Product&price=20&code=child-product&parent_code=parent-product-code').done(function(dataJSON) {
    // Perform custom code here for after the product is added
    });
  • rayden150rayden150 Member
    edited August 2016
    @fc_adam,

    Thank you so much for the answer. The solution you provided is for a linked product, I went ahead and added the child theme via a form like this:
    <form name="productchild" action="https://mydomain.foxycart.com/cart" id="productchild" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Product" />
    <input type="hidden" name="price" value="0"/>
    <input type="hidden" name="parent_code" class="specific__Code" />
    <input type="hidden" name="image" value="<cms:show src='https://www.example.com/img/img.png'/>" />
    <label>Qty: <input type="text" name="quantity_min" value="1" /></label>
    </form>
    It works just fine with the JSONP request, it adds the child product but I'm hoping you can help me with just a few small things (last questions, I promise):

    -Even though the price is 0, I want to show it to infer that it's free, but it's not showing, how would I go about doing this?

    -How would I go about adding a custom field called SKU to the child product?

    -The weight field is showing up in my child product, it's the same as my parent's. I would like this child weight to not show, how do I do this?

    Once again thank you mate!




  • fc_adamfc_adam FoxyCart Team
    @rayden150,
    Even though the price is 0, I want to show it to infer that it's free, but it's not showing, how would I go about doing this?
    The cart will still display a $0 product, you shouldn't need to do anything special to get it to show. Do you have an add to cart page online that we could see?
    How would I go about adding a custom field called SKU to the child product?
    To add a custom attribute to a product, you simply add the extra input to your form:
    <input type="hidden" name="sku" value="abc123" />
    Any extra attribute that isn't a reserved attribute for products is simply treated as a custom product attribute.
    The weight field is showing up in my child product, it's the same as my parent's. I would like this child weight to not show, how do I do this?
    Do you still need the weight to be included for shipping calculation purposes? If not - you could set that child product to be in a category that is set to not be shipped. That way the weight shouldn't show for that product.

    If you do though, you'll need to approach it by hiding either using some CSS or by editing the twig cart template directly. A quick approach using CSS would rely on you specifying a code parameter for the product. You can then use that code to apply CSS to that product line item. For example, if your product had this:
    <input type="hidden" name="code" value="abc123" />
    Your CSS could then look like this:
    <style>
    [data-item-code="abc123"] .fc-cart__item__option--weight {
    display: none;
    }
    </style>
Sign In or Register to comment.