Saa asiakkaat valitsemaan vaihtoehto

Tämä sivu on tulostettu Jan 18, 2022. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-option.

Kun asiakas vierailee verkkokauppasi tuotesivulla, ensimmäinen saatavilla oleva versio valitaan oletusarvoisesti. Voit käyttää tätä mukautusta poistaaksesi automaattisen valinnan käytöstä. Näin asiakasta kehotetaan valitsemaan versio manuaalisesti ennen sellaisen näyttämistä.

Osiin jaetut ja jakamattomat teemat

Huomautus: Tämän tutoriaalin vaiheet vaihtelevat sen mukaan, käytätkö osiin jaettua vai osiin jakamatonta teemaa. Osiin jaetussa teemassa etusivun asettelua voi järjestää vetämällä ja pudottamalla elementtejä, osiin jakamattomassa teemassa ei.

Teeman Muokkaa koodia -sivulla saat selville tukeeko teemasi osioita. Jos Osiot-hakemistossa on tiedostoja, käytössäsi on osioihin jaettu teema. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Jos käytät osioihin jaettua teemaa, klikkaa Osioihin jaetut teemat -painiketta ja noudata ohjeita. Jos käytät vanhempaa teemaa, jota ei ole jaettu osioihin, klikkaa Osioihin jakamattomat teemat -painiketta ja noudata ohjeita.

Valitse teema

Tämän mukautuksen toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ennen kuin noudatat seuraavia ohjeita:

Boundless-teeman toimintavaiheet

Kun haluat mukauttaa Boundless-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Etsi koodi initVariantSelectors. Etsi sitten tämän alta seuraava koodi:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Lisää seuraava koodi tämän alle uudelle riville:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Sen pitäisi näyttää suurin piirtein tältä:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Etsi seuraava koodirivi:

$(selectors.addToCartText).html(theme.strings.soldOut);

Tämä koodirivi esiintyy kaksi kertaa, kumpikin löytyy productVariantCallback-funktiosta. Korvaa vain jälkimmäinen esiintymä seuraavalla koodilla:

$(selectors.addToCartText).html('Make a Selection');

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% assign current_variant = product.selected_variant %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Debut-teeman toimintavaiheet

Kun haluat mukauttaa Debut-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Lisää seuraava koodi tiedoston alareunaan:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

Etsi koodi _updatePrice: function(variant). Korvaa seuraava koodi:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

seuraava koodi:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Jos et löydä yllä olevaa koodia, etsi seuraava koodi:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Korvaa se tällä:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

Etsi koodi this.currentVariant = variant;

Lisää alla oleva koodi:

this._updatePaymentButton(variant);

Tuloksen pitäisi näyttää suurin piirtein tältä:

this.currentVariant = variant;
this._updatePaymentButton(variant);

Etsi koodi _updateImages: function(variant). Korvaa seuraava koodi:

var currentVariantImage = this.currentVariant.featured_image || {};

seuraava koodi:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

Etsi alta seuraava koodi:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Korvaa se tällä:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

Etsi koodi _updateSKU: function(variant). Korvaa seuraava koodi:

if (variant.sku === this.currentVariant.sku) {
  return;
}

seuraava koodi:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

Etsi koodi _initVariants: function() {. Korvaa seuraava koodi:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

seuraava koodi:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Etsi seuraava koodi:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Lisää seuraava koodi uudelle riville yllä mainitun koodin alle:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Sen pitäisi näyttää suurin piirtein tältä:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {%- assign current_variant = product.selected_or_first_available_variant -%}

Korvaa se tällä:

liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else %} {%- assign current_variant = product.first_available_variant -%} {%- endif %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Jos et löydä yllä olevaa koodia, etsi tämä koodi ja poista se:

liquid {%- if variant == current_variant %} selected="selected" {%- endif -%}
Etsi seuraava koodi:

liquid {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Korvaa se tällä:

liquid {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Jos et löydä yllä olevaa koodia, etsi tämä koodi:

liquid {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Korvaa se tällä:

liquid {%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Etsi seuraava koodi:

liquid {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

Korvaa se tällä:

liquid {% if current_variant == blank %} {{ 'products.product.unavailable' | t }} {% elsif current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %}
Etsi seuraava koodi:

liquid {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}

Korvaa se tällä:

liquid <div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}"> {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %} </div>
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muokkaa tuotehinnan koodinpätkää

Näin voit muokata tuotehinnan koodinpätkää:
1. klikkaa Koodinpätkät-hakemistossa product-price.liquid.
2. Etsi seuraava koodi:
  
  liquid {%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif</p><p>assign money_price = price | money -%}
  
  Korvaa se tällä:
  
  liquid {%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available elsif product.title assign compare_at_price = product.compare_at_price assign price = product.price assign available = product.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif</p><p>assign money_price = price | money -%}
Huomaa

Jotkin Debut-versiot eivät sisällä tässä vaiheessa korvattavaa koodia. Jos et löydä koodia, siirry seuraavaan vaiheeseen.

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Minimal-teeman toimintavaiheet

Kun haluat mukauttaa Minimal-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Lisää seuraava koodi tämän alle uudelle riville:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Sen pitäisi näyttää suurin piirtein tältä:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Napauta Tallenna.

Muokkaa tuotesivun mallia:

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {% assign variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% assign variant = product.selected_variant %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Etsi kaikki tämän koodin esiintymät:

liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Korvaa se tällä:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Narrative-teeman toimintavaiheet

Kun haluat mukauttaa Narrative-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa kohtaa custom.js.
Lisää seuraava koodi tiedoston alareunaan:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {%- assign current_variant = product.selected_or_first_available_variant -%}

Korvaa se tällä:

liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else -%} {%- assign current_variant = product.first_available_variant -%} {%- endif -%}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Simple-teeman toimintavaiheet

Kun haluat mukauttaa Simple-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Lisää seuraava koodi tämän alle uudelle riville:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Sen pitäisi näyttää suurin piirtein tältä:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% assign current_variant = product.selected_variant %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Supply-teeman toimintavaiheet

Kun haluat mukauttaa Supply-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Lisää seuraava koodi tämän alle uudelle riville:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Sen pitäisi näyttää suurin piirtein tältä:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {% assign variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% assign variant = product.selected_variant %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Etsi kaikki tämän koodin esiintymät:

liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Korvaa se tällä:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Venture-teeman toimintavaiheet

Kun haluat mukauttaa Venture-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.
Lisää seuraava koodi tiedoston alareunaan:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

Etsi seuraava koodi:

this.currentVariant = this._getVariantFromOptions();

Korvaa se tällä:

this.currentVariant = this._getVariantFromOptions() || {};

Etsi koodi _updatePrice: function(variant). Korvaa seuraava koodi:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

seuraava koodi:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

klikkaa Osat-hakemistossa kohtaa product-template.liquid.
Etsi seuraava koodi:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}
Etsi seuraava koodi ja poista se:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Jos et löydä yllä olevaa koodia, etsi tämä koodi ja poista se:

liquid {% if variant == current_variant %} selected="selected" {% endif %}
Etsi kaikki tämän koodin esiintymät:

liquid {% unless current_variant.available %}

Korvaa se tällä:

liquid {% unless current_variant.available or product.variants.size == 1 and variant.available %}
Etsi seuraava koodi:

liquid {% unless current_variant.available or product.variants.size == 1 and variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

Korvaa se tällä:

liquid {% if current_variant == blank %} {{ 'products.product.unavailable' | t }} {% else %} {% unless current_variant.available or product.variants.size == 1 and variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} {% endif %}
Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

```liquid {% if current_variant == blank %} {% endif %} ``` Sen pitäisi näyttää suurin piirtein tältä: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Napauta Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".
1. Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.
1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
4. Napauta Tallenna.

Kehotteiden lisääminen versiosi pudotusvalikkoihin

Näin voit lisätä kehotteita versiopudotusvalikkoihisi:

klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
Anna uudelle koodinpätkällesi nimeksi pick-an-option.
Liitä this code hosted on GitHub uuteen katkelmatiedostoon.
Napauta Tallenna.
Valitse Ulkoasu-luettelosta theme.liquid.
Etsi lähellä tiedoston alareunaa oleva sulkeva </body>-tunniste. Liitä seuraava koodi uudelle riville heti sulkevan </body>-tunnisteen yläpuolelle:

liquid {% render 'pick-an-option' %}
Napauta Tallenna.
Etsi tiedosto, joka sisältää Lisää ostoskoriin -lomakkeen. Siinä on action-ominaisuus, jonka arvona on /cart/add.

Sen pitäisi olla yhdessä näistä neljästä tiedostosta:

- product.liquid-malli Mallit-kohdassa - theme.liquid-asettelu Asettelu-kohdassa - product.liquid-koodinpätkä Koodinpätkät-kohdassa - single-product.liquid-koodinpätkä Koodinpätkät-kohdassa

Etsi lomakkeesta tämä koodi:

liquid <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

tai

liquid <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Korvaa se tällä:

liquid <option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Etsi ja korvaa seuraava koodi:

Minimal, Pop tai Supply

Jos käytät Minimal-, Pop- tai Supply-koodia, etsisilloin kaikki tämän koodin esiintymät:

liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Korvaa se tällä:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Muut ilmaiset Shopify-teemat

Jos käytät jotakin muuta Shopify-teemaa, etsisilloin tämä koodi:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Korvaa se tällä:

liquid {% assign current_variant = product.selected_variant %}

Napauta Tallenna.

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Valitse Shopifyn admin-sivulla Verkkokauppa > Teemat.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.

Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.

Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.
Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection.
Napauta Tallenna.

Saa asiakkaat valitsemaan vaihtoehto

Osiin jaetut ja jakamattomat teemat

Valitse teema

Boundless-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Debut-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muokkaa tuotehinnan koodinpätkää

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Minimal-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia:

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Narrative-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Simple-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Supply-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Venture-teeman toimintavaiheet

Muokkaa teeman JavaScript-tiedostoa

Muokkaa tuotesivun mallia

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Kehotteiden lisääminen versiosi pudotusvalikkoihin

Minimal, Pop tai Supply

Muut ilmaiset Shopify-teemat

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Valmiina aloittamaan Shopifyssa?