Working with 100 + variants and Jason from Freakdesigns tutorial

[premiumapparell]

Hi there,

Just wondering if someone could help me fix the last bit of my code so I can make the swatches etc work for my new set of variables on a particular product.

Image is currently what I’m dealing with, original product variables are showing in the usual spot as swatches and there is two drop-downs located at the bottom of the description with all the merged variants from 2 products.

Needing to obviously usher my code a bit to locate the default option selectors? I’m not that code savy bu I experiment and sometimes get great results.

Can anyone offer some advice?

Thanks in advance.

Cam.

Image:


Code:

{% comment %}

========================================
Code by Jason [email removed] Freakdesign
Relates to a blog post:
https://freakdesign.myshopify.com/admin/blogs/4018421/articles/105830151

{% endcomment %}
{% section ‘product-template-5000’ %}

{% comment %}
Add in all the variants from the current product.
{% endcomment %}
{% assign productVariants = product.variants %}

{% comment %}
Grab the option names of the current product
{% endcomment %}
{% assign productOptionNames = product.options | json %}

{% comment %}
First add all the handles of the other products that need to be bundled in.
The strip is just added for safety, in case you add a space after that comma in error.
Notice that there is no check to see if the options match. You should do that…
{% endcomment %}

{% assign productList = ‘5000-gildan-t-shirts-1,5000-gildan-t-shirts-2’ | replace:’ ’ | split:‘,’ %}
{% for productListHandle in productList %}

{% comment %}
Grab a product
{% endcomment %}
{% assign productListItem = all_products[productListHandle] %}

{% comment %}
Grab the option names of the additional product
{% endcomment %}
{% assign productListOption = productListItem.options | json %}

{% comment %}
Do nothing more if the option names don’t match
{% endcomment %}
{% unless productListOption == productOptionNames %}{% continue %}{% endunless %}

{% comment %}
Update our master variant list with the additional variants
{% endcomment %}
{% assign productVariants = productVariants | concat:productListItem.variants %}
{% endfor %}

{% comment %}
We should now have a pretty big list of variants so let’s push all of them out into a standard element, ready for the option selector code to kick in. {% endcomment %} {% for variant in productVariants %} {{ variant.title }} ({{ variant.id }} - {{ variant.inventory_quantity}}) {% endfor %} {% comment %} You might already have this script in your theme so keep / remove as needed {% endcomment %} {{ ‘option_selection.js’ | shopify_asset_url | script_tag }}

[premiumapparell]

@Jason

[LMPTechSolution]

Hi Jason,

I am happy to help you out. In regards the the select at the bottom, you can add a css style to just display none to hide them. Would you be able to give more specifics on the goals you are looking to have accomplished with the options.

[premiumapparell]

Hi there,

Mhmm this still doesn’t help with showing the merged products variants in the original option selectors. With the swatches and size selector swatch. Can you help fix this?

Thanks for your reply!

Appreciate it

[Guido_Michele]

“Fun part”: I am trying since 2 days to do exactly the same.

I combined 2 products, have the multi optionSelector showing all (+100) possible Variant combination, so far so good.

I am to make it more difficult working also with linked-options to have stock updated on variant change, ok and change the slider as well.

I still can’t get it to work. I assume that it has to do with the difference of the single selectors (color and size in my case), which are responsible for the swatches and the multi option selector working with the created master product in an array?

Did You solved it?

[eatin]

Hey @Guido_Michele did you ever get this working?

[Guido_Michele]

I did, but couldnt get the stock update via option-select.js all together with swatches for the 100+ products to work.

Anyway, since metafields can hold json strings now, i am using a completely different, would say better solution.

Instead of combining 2 products, i create “metafield products” with as much variants i need, and all the information a normal product would have. i use those to output my product in the shop. Very easy and clean method, if you respect the Shopify way of product json, you just have to add ‘metafields’ to the object. eg product.title change to product.metafields.titel. only when it comes to ATC i get the real product ID from a special metafield and add to cart.

[eatin]

Thanks for the reply. Your approach makes sense, thanks. I’ll think about trying something like that.

[Guido_Michele]

Start with a regular “decent” product, quick easy setup to see the way it works.

Good luck!

[avagyan]

Hi, can you share your code?

you have in metafields only the handles in json?

thanks

As for the code from Freakdesigns, it loads the dropdown for me in symmetry template, but doesn’t add to cart