Last active
February 10, 2025 17:36
-
-
Save carolineschnapp/1083007 to your computer and use it in GitHub Desktop.
Linked options helper methods for Shopify. See this: http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| // (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: [email protected] | |
| // See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus | |
| var Shopify = Shopify || {}; | |
| Shopify.optionsMap = {}; | |
| Shopify.updateOptionsInSelector = function(selectorIndex) { | |
| switch (selectorIndex) { | |
| case 0: | |
| var key = 'root'; | |
| var selector = jQuery('.single-option-selector:eq(0)'); | |
| break; | |
| case 1: | |
| var key = jQuery('.single-option-selector:eq(0)').val(); | |
| var selector = jQuery('.single-option-selector:eq(1)'); | |
| break; | |
| case 2: | |
| var key = jQuery('.single-option-selector:eq(0)').val(); | |
| key += ' / ' + jQuery('.single-option-selector:eq(1)').val(); | |
| var selector = jQuery('.single-option-selector:eq(2)'); | |
| } | |
| var initialValue = selector.val(); | |
| selector.empty(); | |
| var availableOptions = Shopify.optionsMap[key]; | |
| for (var i=0; i<availableOptions.length; i++) { | |
| var option = availableOptions[i]; | |
| var newOption = jQuery('<option></option>').val(option).html(option); | |
| selector.append(newOption); | |
| } | |
| jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() { | |
| if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) { | |
| $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked'); | |
| } | |
| else { | |
| $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled'); | |
| } | |
| }); | |
| if (jQuery.inArray(initialValue, availableOptions) !== -1) { | |
| selector.val(initialValue); | |
| } | |
| selector.trigger('change'); | |
| }; | |
| Shopify.linkOptionSelectors = function(product) { | |
| // Building our mapping object. | |
| for (var i=0; i<product.variants.length; i++) { | |
| var variant = product.variants[i]; | |
| if (variant.available) { | |
| // Gathering values for the 1st drop-down. | |
| Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || []; | |
| Shopify.optionsMap['root'].push(variant.option1); | |
| Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']); | |
| // Gathering values for the 2nd drop-down. | |
| if (product.options.length > 1) { | |
| var key = variant.option1; | |
| Shopify.optionsMap[key] = Shopify.optionsMap[key] || []; | |
| Shopify.optionsMap[key].push(variant.option2); | |
| Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]); | |
| } | |
| // Gathering values for the 3rd drop-down. | |
| if (product.options.length === 3) { | |
| var key = variant.option1 + ' / ' + variant.option2; | |
| Shopify.optionsMap[key] = Shopify.optionsMap[key] || []; | |
| Shopify.optionsMap[key].push(variant.option3); | |
| Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]); | |
| } | |
| } | |
| } | |
| // Update options right away. | |
| Shopify.updateOptionsInSelector(0); | |
| if (product.options.length > 1) Shopify.updateOptionsInSelector(1); | |
| if (product.options.length === 3) Shopify.updateOptionsInSelector(2); | |
| // When there is an update in the first dropdown. | |
| jQuery(".single-option-selector:eq(0)").change(function() { | |
| Shopify.updateOptionsInSelector(1); | |
| if (product.options.length === 3) Shopify.updateOptionsInSelector(2); | |
| return true; | |
| }); | |
| // When there is an update in the second dropdown. | |
| jQuery(".single-option-selector:eq(1)").change(function() { | |
| if (product.options.length === 3) Shopify.updateOptionsInSelector(2); | |
| return true; | |
| }); | |
| }; | |
| {% if product.available and product.options.size > 1 %} | |
| var $addToCartForm = $('form[action="/cart/add"]'); | |
| if (window.MutationObserver && $addToCartForm.length) { | |
| if (typeof observer === 'object' && typeof observer.disconnect === 'function') { | |
| observer.disconnect(); | |
| } | |
| var config = { childList: true, subtree: true }; | |
| var observer = new MutationObserver(function() { | |
| Shopify.linkOptionSelectors({{ product | json }}); | |
| observer.disconnect(); | |
| }); | |
| observer.observe($addToCartForm[0], config); | |
| } | |
| {% endif %} | |
| </script> | |
@robhuska thanks for your solution that was does not work for me.
i want use radio button( variants swatches ) with linked option
the linked option when u change first option that time second option drop-down selected on box but add to cart still Unavailable . select second option add to cart work
First you need to convert dropdown into swatches.
There is already tutorial for it.
So go and implement that first and then try to understand what bug or code you need to fix in linked option to make it work.
I explained in my screenshot.
@aman-developer thanks for your support.
the linked option and variant selection not working
here is my code ` <script>
window.addEventListener('DOMContentLoaded', function() {
var Shopify = Shopify || {};
// Required functionality from depricated options_selection.js
Shopify.arrayIncludes = function(e, t) {
for (var n = 0; n < e.length; n++)
if (e[n] == t) return !0;
return !1
}, Shopify.uniq = function(e) {
for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
return t
}
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex) {
switch (selectorIndex) {
case 0:
var key = 'root';
var selector = jQuery('.single-option-selector:eq(0)');
break;
case 1:
var key = jQuery('.single-option-selector:eq(0)').val();
var selector = jQuery('.single-option-selector:eq(1)');
break;
case 2:
var key = jQuery('.single-option-selector:eq(0)').val();
key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
var selector = jQuery('.single-option-selector:eq(2)');
}
var initialValue = selector.val();
selector.empty();
var availableOptions = Shopify.optionsMap[key];
for (var i=0; i<availableOptions.length; i++) {
var option = availableOptions[i];
var newOption = jQuery('<option></option>').val(option).html(option);
selector.append(newOption);
}
/*
jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
$(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
}
else {
$(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
}
});
*/
$('.variant-swatches :radio').change(function() { {
var optionIndex = $(this).closest('.variant-swatches').attr('data-option-index');
jQuery(".variant-swatches[data-option-index='"+optionIndex+"'] .swatch-element").removeClass("active");
var optionValue = $(this).val();
jQuery(" .variant-swatches[data-option-index='"+optionIndex+ "'] .swatch-element[data-value='"+optionValue+ "' ] ").addClass("active");
}})
/* */
if (jQuery.inArray(initialValue, availableOptions) !== -1) {
selector.val(initialValue);
}
/* */
selector.trigger('change');
};
Shopify.linkOptionSelectors = function(product) {
// Building our mapping object.
for (var i=0; i<product.variants.length; i++) {
var variant = product.variants[i];
if (variant.available) { }
// Gathering values for the 1st drop-down.
Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
Shopify.optionsMap['root'].push(variant.option1);
Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
// Gathering values for the 2nd drop-down.
if (product.options.length > 1) {
var key = variant.option1;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option2);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
// Gathering values for the 3rd drop-down.
if (product.options.length === 3) {
var key = variant.option1 + ' / ' + variant.option2;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option3);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
}
// Update options right away.
Shopify.updateOptionsInSelector(0);
if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
// When there is an update in the first dropdown.
jQuery(".single-option-selector:eq(0)").change(function() {
Shopify.updateOptionsInSelector(1);
if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
// When there is an update in the second dropdown.
jQuery(".single-option-selector:eq(1)").change(function() {
if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
};
{% if product.available and product.options.size > 1 %}
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
Shopify.linkOptionSelectors({{ product | json }});
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
{% endif %}
var selector = jQuery('.single-option-selector:eq(0)');
selector.trigger('change');
/*
{% if product.options.size == 1 %}
{% for variant in product.variants %}
{% unless variant.available %}
jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endfor %}
jQuery('.single-option-selector').trigger('change');
{% endif %}
*/
});
/* */
</script>`
@aman-developer can you please post your solution it not working for me
Hello experts,
this snippet doesnt works for Prestige OS2.0 Theme.
Have anyone a snippet that works for this theme?
Please help me :)
Thanks for reaching out, you will have to edit the variables to match your
theme and it should work!
Thanks and Regards,
Jim Cook /* Avid Brio / *Business Development Manager
Call: +1-919-300-6224 / Skype: jim.avidbrio
www.AvidBrio.com <http://avidbrio.com>
…On Mon, Jan 17, 2022 at 2:04 AM YahyaYavuz61 ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Hello experts,
this snippet doesnt works for Prestige OS2.0 Theme.
Have anyone a snippet that works for this theme?
Please help me :)
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/1083007#gistcomment-4030739>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASTUSG67YH63FITXXIVOQNLUWMTWXANCNFSM4H53ISUA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you were mentioned.Message ID:
***@***.***>
Hello @YahyaYavuz61
This tutorial does not work directly for Prestige theme. Not for old version of Prestige theme too.
You will have to update product-form.liquid file first. You will have to call product options in dropdown and have to keep them hide. You have to update Classes assign to Swatches.
Then You will have to update this snippet and then it will work. There are numerous steps to implement linked-options for Prestige theme in shopify.
@sanjay-makwana-avidbrio which variables i must change? Can you explain please?
Hello @aman-developer thank you!
Can you do that for me?
if it's chargeable, I can also pay you.
Any update on this for Dawn 3.0?
I recently did it for Dawn 3.0 and 4.0 both.
I recently did it for Dawn 3.0 and 4.0 both.
Dude, could you help me?
The code sort of works.
It works in cases when there are 10-15 variants with 3 variant options, but when the varaint quantity increases to 30+ it does not work properly.
Is there a way to solve this?
Edit:
With 2options it works perfectly, but when 3rd option is added the functionality breaks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
+1 for @Sanjayavidbrio's solution found here: https://belvg.com/blog/shopify-variants.html#step_5! However, if you want to still show products that you do carry, but are out of stock, this will not work out of the box.
My goal was to remove variant combonations that we just do not carry, but if we have a variant that is Out of Stock, we still want to show that. Below is my
linked-options.liquidsnippet file.The key differences are to remove the
if (variant.available) { }located at line 61 (and the closing}on line 80). Then I remove the entire chunk from line 117-124 that deals with products with only one option size.Hope this help someone else!