Multiple products ?

[nzrubin]

hello is anybody knows if multiple products supported ?

[tanema]

You can use multiple product with collections. You can fetch a collection with the fetch method on the client

[richgilbank]

Just to follow up on @tanema's note, if you're looking to retrieve the actual products in a collection, rather than info about the collection, you'll need to use fetchQueryProducts and pass it a collection_id:
http://shopify.github.io/js-buy-sdk/api/classes/ShopClient.html#method-fetchQueryProducts

Alternatively, if you want to just fetch an array of products, you can pass the product ID array to the same method:

client.fetchQueryProducts( {product_ids: [1234, 5678]} ).then...

[nzrubin]

Thank you @tanema and @richgilbank for your replies! its a good news that multiple supported!

however i understand that i have to adjust almost entire code to roll products at the page in different divs!
here i managed to display products but "Add To Cart" button not working properly

http://korjik.info/ee/buy_sdk_example_progress/

could you please help may be give a little example or hint ?
thank you

[tanema]

One of the main issues you are having is that in your click handler you use the product variable which is defined at the top. This means that it will be defined as the last product that uses that variable.

You set a variant id on the buy buttons so you could get a variant id from that like this:

  function buyButtonClickHandler(evt) {
    evt.preventDefault();
    evt.stopImmediatePropagation();
    //This is the issue
    var id = product.selectedVariant.id; 
    //Should be something more like this
    var id = evt.target.id; 
    var quantity;
    var cartLineItem = findCartItemByVariantId(id);
    quantity = cartLineItem ? cartLineItem.quantity + 1 : 1;
    addOrUpdateVariant(product.selectedVariant, quantity);
    setPreviousFocusItem(evt.target);
    $('#checkout').focus();
  }

But this will not solve all of your issue, we will update the examples with a multiple buy-button example in the future for you to get a better idea.

[nzrubin]

Thank you @tanema for you reply!
i would love to see the example please! I ve got two customers now already waiting for the solution as well! Love shopify again!

[nocean]

Has there been any movement on an example using multiple products on a single page? Looking at @tanema's modified buyButtonClickHandler(), I am not seeing a value for evt.target.id. I guess I could add the variant ID data to the button and then use that, but was hoping there might be an example on the way so I can assure I'm going down the right path.

[nzrubin]

im waiting too.... looks like this is a bit complicating!
i started myself here
https://github.com/nzrubin/shopify-sdk-buy-multiple-products/

[michaelfeihstel]

I'd be very interested in a proper documentation that outlines the process of handling multiple products on the same page as well. Using and adjusting the add to cart example leads to several issues, particularly with updating the cartLineItem.quantity values.

Please extend the documentation which is very lacking right now.

[minasmart]

Hey there @michaelfeihstel! Can you expand on where you feel the documentation is most lacking? We're working on trying to improve it, but outside input definitely helps.

Also, can you tell me what issues you're running into when updating the line item quantity values?

[michaelfeihstel]

@minasmart Hello Mina, it starts with little details - for example you're suggesting to use deprecated attributes like "myShopifyDomain", which seems to have been replaced by "domain". Not a big problem, but outdated docs always suggest lacking care for a project.

Anyway, your current documentation doesn't explain how to handle multiple products on the same page, which probably is the use cases most potential users had in mind. A specific problem I was running into is the cart which I copied from your one product example, but obviously doesn't work as intended when it has to distinguish between multiple products and their variants.
I may get there and the variant specific code by @tanema may be of use here, but it's a lot of guesswork right now and therefor hard to use.

The Buy Button on the other hand is too limited in functionality and doesn't really work for the integration I had in mind - not even the CSS is customizable unless I'm missing something.

[michaelfeihstel]

Since nothing seems to be happening here and the docs still aren't updated, let me ask a more specific question: I almost have multiple products on the same page working (ab)using your original example code.

I use multiple levels of select box in order to have users get the right product. We're selling shoes, in about 20 colors and 30 sizes, so way too much for Shopify's variants per product limit, which is why each color of a shoe model is its own product. Only the ca. 30 sizes are variants.
I created a select box with the color as a name und product ID as value - once the color is selected there Shopify's example JS code loads the appropriate add to cart form for that product with all its sizes in another select box. Basically like this:

$('#color-select').on('change', function() {
    var productId = this.value;
    client.fetchProduct(productId).then(function (fetchedProduct) {

    ... //pretty much your unchanged client.fetchProduct code from here on

This works so far, I select blue shoes and a size, add them to my cart and they appear there. I select red shoes and a size, add them and they appear in the cart as well. Fine. My only issue is the fact that with each switch from color to color (and thereby loading a new product) the quantity of the add to cart button is increased - this also applies to the increase/decrease buttons in the cart. That means when I add the default color upon page load I'll get 1 item in the cart. Great. Now I select another color, add it to the cart as well, but I'll receive 2 items of this new color. Selecting another color (or the one I used before) increases the quantity interval to 3. Now all decrease/increase buttons add or remove 3 items at once. It continues with this pattern.

At some point while switching products there seems to be a problem. I had the quantity variable from the buyButtonClickHandler-function displayed in the console in order to debug the issue. It seems the add to cart event is fired multiple times depending on how many times I switched products/colors. Any suggestions?

[minasmart]

Hey there!

The fetching multiple products code is documented here.

It works in the form of:

client.fetchQueryProducts({ product_ids: ['id1', 'id2', 'id3', ..., 'idX']}).then(products => {
  console.log(products); // An array of products
});

As for why the event is being fired multiple times, the only thing I can think is that you may be attaching click handlers for each product you select, and not detaching them? Without seeing more of that code, I'm kind of limited in my ability to help.

[michaelfeihstel]

Mina, that's sounds very likely - since I just re-used your single product example, I didn't consider detaching those handlers.

I saw that part of the documentation but it's far from a detailed example and, frankly, its too barebones for my javascript knowledge. I'm pausing this effort for the time being. I might return to this at a later point and see if the docs have improved or consider something like SnipCart where a customizable store for a static website is a first-class feature, not an afterthought to the main product. That's not criticism, I'm aware that the Buy Button / JS SDK is a tiny niche of your business.

[ahl389]

@michaelfeihstel and anyone else finding this, I was having this same problem when working on a Shopify/SS integration this weekend, and got it working solid. It ended up eating about 12 hours of my time, but I'm hopeful that this will prevent others from having to go down the same rabbit hole!

Here's the example repo:
https://github.com/ahl389/shopify-buy-sdk-example

[nzrubin]

thank you ahl389 for an amazing and advanced coding!
however i think the most difficult part remains unsolved:
Which is rolling multiple products (or multiple collections that is the same problem actually).
hope that kind of programmers like yourself ahl389 can resolve it, cos its just above my head for now, i cannot reach it!

[michaelfeihstel]

@ahl389 Thank you, on first sight I might actually be able to work with your example. Variations for each product would have been even more helpful, but I'm going to take a closer look at it and see if that turns out to be true. In any case, it looks promising and very helpful.
@nzrubin I think it actually solves the problem. Whether it's a collection or a bunch of product IDs as outlined by @minasmart above, Ashley's example creates an add to cart form (that you can customize) for each item in the product array and handles cart management.

[ahl389]

@michaelfeihstel @nzrubin Yup, my example, as it stands, supports a collection. But it would be simple to change the fetch and swap it for several products - I can put that in the readme. Product variations are built in to my example too. The UI models the regular buy button, but generally speaking, could be customized easily.

As for several collections on one page - I would say to merge the multiple collections into one in the Shopify dashboard and hide it on the online store channel.

[ghost]

I may not be understanding the problem here, but please note that you can
easily fetch all collections with ShopClient.fetchAllCollections. Then
you can use the collection IDs from those resolved objects
(collection.attrs.collection_id) to query for products with
ShopClient.fetchQueryProducts.

( Maybe we should start a Slack channel, or something. )

On Wed, Sep 21, 2016 at 8:13 AM Ashley Livingston notifications@github.com
wrote:

@michaelfeihstel https://github.com/michaelfeihstel @nzrubin
https://github.com/nzrubin Yup, my example, as it stands, supports a
collection. But it would be simple to change the fetch and swap it for
several products - I can put that in the readme. Product variations are
built in to my example too. The UI models the regular buy button, but
generally speaking, could be customized easily.

As for several collections on one page - I would say to merge the multiple
collections into one in the Shopify dashboard and hide it on the online
store channel.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#148 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHwv-FmI48o9C-ECA2CfkqQU9_CTvOBgks5qsS1ygaJpZM4I_kiM
.

[ahl389]

@coreytrampe It looks like you can only fetch one collection at a time with fetchQueryProducts (unlike when using it to fetch multiple individual products by passing an array of product IDs). That being said, I'm not terribly sure of a use case where someone would need to show more than one collection on a page. Still, it would be possible to rework the code somewhat to handle multiple fetches and append them to the DOM correctly.

I am also open to a slack channel!

[nzrubin]

@ahl389 if collections are small they can be used at one page
here is an example http://www.rocketproducts.co.nz/shop/
but design suppose to be different, (bigger photos and 1 product per line, which can be done only with js-buy-sdk)

[ghost]

Probably TMI, but as to an use case for showing multiple collections on a page...

I'm writing a single page shopping application in Elm. I fetch all collections, and then for each collection, I fetch all the products in that collection. I map, filter, reduce it down to Dict CollectionHandle (Dict ProductType (List Product)).

And then render views based on this URL structure:

/ -> show all collections
/collectionName -> show all product types in that collection
/collectionName/productType -> show all products in collection of that type
/collectionName/productType/productName -> show product details

example:
/ -> [men's, women's]
/womens -> [tops, pants, dresses, shoes]
/womens/tops -> [cuteKitty, hungryBird]
/womens/tops/cuteKitty -> cuteKitty detail page