Question

好的，我要把头发拉出来。

我希望有人可以帮助我。

我正在尝试在“下拉菜单”中添加“选择一个选项”值，然后在页面加载时将其设置为默认选项。

简要介绍背景：我一直试图将Shopify的“链接选项”和“选择选项”功能结合起来。遗憾的是，当您尝试同时实现这两者时，“链接选项”功能会覆盖“选择选项”。（选择一个选项会在下拉菜单中放置默认的“选择____”）。

所以我选择了一个选择选项，并尝试将其放入链接选项中。

以下是我放在其中的代码：

selector.prepend('<option value="">Select ' + {{ product.options[forloop.index0] | json }} + '</option>').val('');

以下是整个代码：

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact:     mllegeorgesand@gmail.com
// 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];
  selector.prepend('<option value="">Select ' + {{ product.options[forloop.index0] | json }} + '</option>');
  selector[0].selectedIndex = 0;
  for (var i=0; i<availableOptions.length; i++) {
var option = availableOptions[i];
var newOption = jQuery('<option></option>').val(option).html(option).val('');
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 %}

Answer 1

看起来它会花费太多时间来制作。代码段1演示了如何在选项前添加选项。代码段2演示了如何使用insertAdjacentHTML()。属性：selected，其值可以是："selected"或true/false，目的是指定默认选项。详细信息在代码中注释。

SNIPPET 1

＆＃13;

// Reference the select
var sel = document.getElementById('sel');
// Create an option
var opt = document.createElement('option');
// Add a value
opt.value = '0';
// Add content
opt.textContent = '0';
// Make it default
opt.setAttribute('selected', true);
// Reference the first child of the select
var first = sel.firstChild;
// Insert box before the first 
sel.insertBefore(opt, first);

＆＃13;

<select id='sel' name='sel'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
</select>

＆＃13;

SNIPPET 2

＆＃13;

var sel = document.getElementById('sel');

sel.insertAdjacentHTML('afterbegin', '<option value="" selected=true>Select</option>');

// Reference the first child of select
var first = sel.firstChild;
// This commented out because I don't have the data to use it.
// first.textContent = "Select "+{{product.options[forloop.index0] || json}}+";

＆＃13;

<script src='https://cdn.jsdelivr.net/handlebarsjs/4.0.5/handlebars.min.js'></script>
<select id='sel' name='sel'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
</select>

＆＃13;

insertAdjacentHTML()的第一个参数是插入位置：

 <section id='s1'>Content xxxxxxxxxxxxxxxxxxxxx</section>
▲-----------------▲----------------------------▲---------▲

beforebegin {___ {1}} {________________ {1}} _ afterbegin

第二个参数是将被解析为HTML的字符串。基本上beforeend是afterend类固醇。阅读here。

默认选择prepended选项

1 个答案:

SNIPPET 1

SNIPPET 2