Tämä sivu on tulostettu Apr 19, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations.
Tässä tutoriaalissa kuvataan, miten Debut-teemassa lisätään tuotesuositukset tuotesivulle. Lue lisää siitä, miten tuotesuositukset toimivat, tuotesuositusten näyttämistä tuotesivuilla käsittelevästä kohdasta.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Klikkaa Osat-hakemistossa kohtaa Lisää uusi osa.
Anna uudelle osiolle nimeksi product-recommendations ja valitse sitten Luo osio.
Korvaa koko sisältö alla olevalla koodilla:
Klikkaa Tallenna.
Kun osio hahmonnetaan tuotesivulla, recommendations.performed muuttuu tilaan false, jolloin luotu HTML näyttää latausanimaation:
Jos et halua näyttää latausanimaatiota, käytä sen sijaa tätä koodia:
Kun yllä oleva osa muodostetaan tuotesivulla, luotu HTML on div-elementti, jossa ei ole sisältöä:
Jos käyttäjä käyttää vaihtoehtoista alueasetusta, alue sisällytetään div-elementin data-base-url-osoitteeseen. Esimerkiksi /fr/recommendations/products.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Klikkaa Osat-hakemistossa kohtaa Lisää uusi osa.
Anna uudelle osiolle nimeksi product-recommendations ja valitse sitten Luo osio.
Korvaa koko sisältö alla olevalla koodilla:
Klikkaa Tallenna.
Kun osio hahmonnetaan tuotesivulla, recommendations.performed muuttuu tilaan false, jolloin luotu HTML näyttää latausanimaation:
Jos et halua näyttää latausanimaatiota, käytä sen sijaa tätä koodia:
Kun yllä oleva osa muodostetaan tuotesivulla, luotu HTML on div-elementti, jossa ei ole sisältöä:
Jos käyttäjä käyttää vaihtoehtoista alueasetusta, alue sisällytetään div-elementin data-base-url-osoitteeseen. Esimerkiksi /fr/recommendations/products.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Klikkaa Osat-hakemistossa kohtaa Lisää uusi osa.
Anna uudelle osiolle nimeksi product-recommendations ja valitse sitten Luo osio.
Korvaa koko sisältö alla olevalla koodilla:
Klikkaa Tallenna.
Kun osio hahmonnetaan tuotesivulla, recommendations.performed muuttuu tilaan false, jolloin luotu HTML näyttää latausanimaation:
Jos et halua näyttää latausanimaatiota, käytä sen sijaa tätä koodia:
Kun yllä oleva osa muodostetaan tuotesivulla, luotu HTML on div-elementti, jossa ei ole sisältöä:
Jos käyttäjä käyttää vaihtoehtoista alueasetusta, alue sisällytetään div-elementin data-base-url-osoitteeseen. Esimerkiksi /fr/recommendations/products.
Vaihe 2: sisällytä osio product.liquid-malliisi
Jos haluat näyttää tuotesuosituksia tuotesivusi alaosassa, sisällytä osio templates/product.liquid-tiedostosi alaosaan:
Vaihe 3: muokkaa theme.js-tiedostoasi ladataksesi suositukset asynkronisesti
Sinun täytyy ladata suositukset tyhjään säilöön, jonka osio loi tuotesivulle. JavaScriptin avulla voit tehdä HTTP GET ‑pyynnön <base_url>?section_id=<section_id>&product_id=<product_id>.
Avaa Assets-hakemistossa theme.js-tiedosto.
Etsi seuraava koodirivi:
Lisää tämän rivin alle seuraava koodi:
Lisää seuraava koodi tiedoston alareunaan:
Klikkaa Tallenna.
Vaihe 4: luo latausanimaatio muokkaamalla theme.scss.liquid-tiedostoasi (valinnainen)
Jos käytit koodinpätkää, joka näyttää latausanimaation tuotesuositusosiossa, lisää seuraava koodi assets/theme.scss.liquid-tiedostosi loppuun: