Can you add multiple products to cart / allow linked products similar to product variants?

zpcohen
Shopify Partner
4 0 0

I've read up on the product variant options and had a quick question.

I'm trying to create a page that allows the customer to purchase two "linked" items (bikini top and bottom) on one page and still allow proper tracking of the skus.
For example, I'd like the customer to be able to select a large top and medium bottom (which is now possible via the product options) but track this as two separate skus so we properly maintain inventory.

I understand that shopify doesn't support this out of the box. Does anyone have any good examples or know of any tutorials on how to custom extend shopify themes to allow this behavior?  

Thanks

Zac

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hi Zac,

Yes, you can do this. I am not aware of a good example out there though, or any tutorial for this. I can't make any promises but I will try to write some code for this by Tuesday, to show to you.

Here are a few hints:

1- You will need to store the associated product handle in a product tag, so that your product page becomes 'aware' of an association. You could use some product field to store the product handle of the associated product, e.g. the 'product type' field, or the 'vendor' field, if you can spare those, but using a tag is usually sound...

In other words, you must tell each product what other product it has to be sold with. Shopify does not give you a product property to stick that information in, out of the box. You have to 'high-jack' some property for this purpose.

2- In your 'add to cart' form, you will need to set your form fields 'name' attribute to id[].

Some quick example - but it does not use Shopify options: http://11heavens.com/testing-something-for-Tom

Do a View Source or use Firebug.

On that page, there are 2 products (distinct products). One click - and if you have checked both checkboxes - both products are added to the cart.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

You could store the product handle of the associated product in a metafield.

0 Likes
zpcohen
Shopify Partner
4 0 0

Caroline,

  Thank you so much for your invaluable feedback.  I did a quick review of your page and like that you can add two products to the cart from one page. I'll look at the code in more detail tomorrow.
  If you could write some sample code (as you said you may be able to) that would be very helpful.

Thanks and hope you had a great weekend

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

zpcohen,

I just finished writing some code for you.

STEP 1

I have 2 products in my sandbox, and using a metafields app I stranded together, I added metafields to my 2 products, telling one that it can be bought along with the other, and vice versa.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

STEP 2

Then, I created an 'all' collection as per this tutorial here. This may not be necessary, but in my code I am accessing my 'extra' product using an 'all' collection, and was not sure the automatic 'all' collection would work for this. It probably would have.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

STEP 3

I modified product.liquid:

http://gist.github.com/2a5fab0310f7536e637c

(Using Reconfigured Theme just because it uses jQuery and options already, no other reason.)

0 Likes
zpcohen
Shopify Partner
4 0 0

Caroline,

 Thank you so much.  This is exactly what I've been trying to accomplish.  Great explanation.

Thanks,


Zac

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

You're welcome! There's so much more I could have done - like showing and updating the price, using the JavaScript callback. I'm glad this can get you started.

0 Likes