Working with 100 + variants and Jason from Freakdesigns tutorial

premiumapparell
Tourist
9 0 1

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:

Capture6.PNG

 

Code:

 

{% comment %}
 
========================================
Code by Jason @ Freakdesign
Relates to a blog post:
========================================
 
{% 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 <select> element, ready for the option selector code to kick in.
{% endcomment %}
<ul name="id" id="ProductSelect">
{% for variant in productVariants %}
<li value="{{ variant.id }}">{{ variant.title }} ({{ variant.id }} - {{ variant.inventory_quantity}})</li>
{% endfor %}
</ul>
 
{% comment %}
You might already have this script in your theme so keep / remove as needed
{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
  
<script>
/* 
 
build a new product json output for the option selectors to use.
Since the product json can be used by other apps and scripts let's just recreate the whole thing from scratch, using out new variant list instead of the default ones.
 
*/
var productJson = {
id: {{ product.id | json }},
title: {{ product.title | json }},
handle: {{ product.handle | json }},
description: {{ product.description | json }},
vendor: {{ product.vendor | json }},
type: {{ product.type | json }},
tags: {{ product.tags | json }},
price: {{ product.price | json }},
price_min: {{ product.price_min | json }},
price_max: {{ product.price_max | json }},
available: {{ product.available | json }},
price_varies: {{ product.price_varies | json }},
compare_at_price: {{ product.compare_at_price | json }},
compare_at_price_min: {{ product.compare_at_price_min | json }},
compare_at_price_max: {{ product.compare_at_price_max | json }},
compare_at_price_varies: {{ product.compare_at_price_varies | json }},
variants: {{ productVariants | json }}, /* this is our new master list - assuming it works! */ 
images: {{ product.images | json }},
featured_image: {{ product.featured_image | json }},
options: {{ product.options | json }},
url: {{ product.url | json }}
};
 
/* 
This should really be your selectCallback function but I've thrown this in just for testing only...
*/
var selectCallback = function(variant, selector) {
console.log(variant, selector);
return;
};
 
/* assuming your theme has jQuery in place, let's fire the option selector scripts */
$(function() {
new Shopify.OptionSelectors('ProductSelect', {
product: productJson,
onVariantSelected: selectCallback,
enableHistoryState: true
});
});
 
</script>

 

Replies 9 (9)
premiumapparell
Tourist
9 0 1
LMPTechSolution
Shopify Partner
125 1 11

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
Tourist
9 0 1
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
Shopify Partner
67 19 54

"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
Shopify Partner
10 0 4

Hey @Guido_Michele did you ever get this working?

Guido_Michele
Shopify Partner
67 19 54

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
Shopify Partner
10 0 4

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

Guido_Michele
Shopify Partner
67 19 54

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

Good luck! 

avagyan
Shopify Partner
1 0 0

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