Please Help: Jason (freakdesign) Make a product with 100+ variants

Tourist
11 0 1

Good morning all,

 

I am working on my wife's website for her cleaning services, and I'm having a hard time trying to figure out why my implementation of Jason (freakdesign) code for making a product with 100+ variants is not giving me the right results. FYI: I have  very little coding skills.

 

I'll breakdown my explanation so you can have a better understanding of what I've done so far:

-I'm using the debut theme, and I need to have a single product on the home page. I tried to create one product with 3 options, but unfortunately it adds up to more than 100 variants.

 

So I found Jason's tutorial on how to make a product with 100+ variants, and this is what I did:

- I created a snipped titled "merge-products" and I pasted Jason's code in its entirety, and I made some minor edits. Then I added {% include 'merge-products' %} to the section/featured-product.liquid. I merged two products. The main product (book-us) is called directly from the featured products settings. The second one (additional-services) is called through Jason's code. The product form looks and response the way I want it to, with one exception. When I click on Add to Cart (Book now), only the product that derives from Jason's code adds to the cart.

 

This is what the code looks like:

 

<!-- Merge Multiple Products to Create One Product (added by me) -->
{% comment %}

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

{% endcomment %}            
            
            
{% comment %}


	Add in all the variants from the current product.


{% endcomment %}


{% assign productVariants = all_products.additional-services.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 = '' | 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 %}


<select name="id" id="ProductSelect">


	{% for variant in productVariants %}

<!-- To include variant prices add {{ variant.price | money }} after {{ variant.title }}(added by me) -->                                                                       
		<option value="{{ variant.id }}">{{ variant.title }}</option>


	{% endfor %}


</select>


{% 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 */


	jQuery(function() {


		new Shopify.OptionSelectors('ProductSelect', {


			product: productJson,


			onVariantSelected: selectCallback,


			enableHistoryState: true


		});


	});

</script>

 

Here is what the form looks like. The highlighted field is the one created with Jason's code.

Capture.PNG        So my question is, What can I do to the code so that both products add to the cart?

 

Thank you in advance,

Jay

 

0 Likes