Ajutor
Conectați-vă

Personalizarea sau eliminarea unui buton de cumpărare, a unei colecții integrate sau a unui coș încorporat

Puteți schimba aspectul sau comportamentul unui buton de cumpărare, al unei colecții integrate sau al unui coș încorporat editând codul încorporat în codul HTML sursă al paginii web. De asemenea, puteți șterge elementul integrat eliminând codul de pe pagina web.

Un buton de cumpărare afișează un produs cu un buton de achiziție. O colecție integrată afișează mai multe produse. Un coș încorporat afișează un coș independent pe care clienții îl pot folosi pe mai multe pagini.

Codul încorporat este fragmentul de cod pe care l-ați copiat din panoul de administrare Shopify și l-ați lipit în codul HTML al paginii web atunci când ați creat butonul de cumpărare sau coșul. Codul încorporat este scris în JavaScript, limbajul de programare utilizat pentru a adăuga funcții interactive paginilor web.

Pe această pagină

Înțelegerea codului încorporat pentru butonul de cumpărare

Fiecare buton de cumpărare este construit din părți separate numite componente. O componentă este o secțiune denumită din codul încorporat care controlează o parte a experienței butonului de cumpărare. De exemplu, când adăugați un produs cu un coș pe pagina web, codul încorporat generează următoarele componente:

  • o componentă product, care afișează informațiile despre produs și butonul de achiziție
  • o componentă cart, care afișează conținutul coșului
  • o componentă de tip toggle pentru coș, care afișează pictograma ce deschide coșul

Dacă componenta de produs deschide o fereastră pop-up cu detaliile produsului, atunci codul încorporat generează două componente suplimentare: o componentă modal pentru fereastra pop-up în sine și o componentă modalProduct pentru informațiile despre produs din interiorul ferestrei pop-up.

În următorul fragment de cod, există componente separate pentru product și cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Fiecare componentă este configurată printr-un obiect de configurare din codul încorporat. Un obiect este un grup structurat de setări, formatat ca o listă de perechi cheie-valoare:

  • O cheie reprezintă numele unei setări, cum ar fi buttonDestination.
  • O valoare este opțiunea definită pentru setarea respectivă, cum ar fi 'cart'.

Un obiect este similar cu o foaie de calcul: fiecare cheie corespunde unui nume de coloană, iar fiecare valoare corespunde conținutului unei celule. Pentru a schimba aspectul sau comportamentul butoanelor de cumpărare, editați cheile și valorile din interiorul obiectelor de configurare.

Fiecare componentă are mai multe chei editabile. Pentru o listă completă a cheilor editabile, consultați documentația pentru dezvoltatori. Pentru a configura o cheie care nu este deja în codul încorporat, adăugați cheia la obiectul corespunzător. Pentru un exemplu, consultați Schimbarea aspectului unui produs integrat.

Personalizarea stilurilor componentelor

Fiecare componentă are un obiect de configurare imbricat styles care controlează aspectul componentei. Un obiect imbricat este un obiect plasat în interiorul altui obiect.

Obiectul styles utilizează CSS, limbajul folosit pentru a descrie modul în care elementele paginii web sunt stilizate vizual. Fiecare cheie de nivel superior din obiectul styles reprezintă un element din componentă, cum ar fi titlul sau butonul. În cadrul acelei chei, fiecare cheie imbricată este o proprietate CSS (de exemplu, background-color sau border), iar valoarea este o valoare CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Orice proprietate CSS validă poate fi adăugată la styles. Asigurați-vă că numele proprietăților cu cratimă sunt incluse între ghilimele.

Pentru mai multe informații despre personalizarea CSS, consultați documentația pentru dezvoltatori.

Componentele colecțiilor integrate

Colecțiile integrate utilizează aceleași obiecte de configurare precum butoanele de cumpărare. Pentru a edita aspectul sau alte proprietăți ale produselor din colecție, găsiți obiectul de configurare product și editați-l în același mod în care ați edita un produs integrat. Pentru a edita proprietățile colecției în sine, cum ar fi textul butonului Pagina următoare, editați obiectul de configurare productSet în schimb.

Anumite chei, precum textul unei componente, sunt configurate prin intermediul obiectelor imbricate. De exemplu, textul butonului Pagina următoare se află în interiorul obiectului text al componentei productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

O fereastră modală cu detaliile produsului este o fereastră pop-up care afișează informații despre produs. Pentru a direcționa clientul către o fereastră modală cu detaliile produsului în loc de coș, editați codul încorporat al butonului de cumpărare în codul HTML sursă al paginii web.

Pași:

  1. Deschideți fișierul HTML al paginii care conține produsul încorporat pe care doriți să îl modificați.
  2. Găsiți obiectul de configurare product.
  3. Găsiți cheia buttonDestination în obiect:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Modificați valoarea acelei chei în 'modal', incluzând ghilimelele:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Salvați modificările.

Schimbarea aspectului unui produs integrat

Un aspect orizontal pentru un produs integrat plasează imaginea lângă detaliile produsului, în loc de deasupra lor. Pentru a comuta la acest aspect, editați codul încorporat al butonului de cumpărare în codul HTML sursă al paginii web.

Pași:

  1. Deschideți fișierul HTML al paginii care conține produsul încorporat pe care doriți să îl modificați.
  2. Găsiți obiectul de configurare product.
  3. Adăugați o cheie layout, apoi setați valoarea la 'horizontal'. Asigurați-vă că valoarea include ghilimelele, iar rândul anterior se termină cu o virgulă:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Salvați modificările.

Schimbarea aspectului și comportamentului unui coș încorporat

Pentru a schimba aspectul sau comportamentul unui coș, editați obiectul de configurare cart din codul încorporat.

Pași:

  1. Deschideți fișierul HTML al paginii care conține coșul pe care doriți să îl editați.
  2. Găsiți obiectul de configurare cart din codul dvs. încorporat:
options: {
      cart: {
        startOpen: false
      }
}
  1. Editați o cheie existentă sau adăugați una nouă pentru a schimba aspectul sau comportamentul coșului. Pentru o listă completă de chei configurabile, consultați documentația pentru dezvoltatori.
  2. Salvați modificările.

Ștergerea unui buton de cumpărare, a unei colecții integrate sau a unui coș încorporat

Pentru a elimina un buton de cumpărare, o colecție integrată sau un coș încorporat de pe pagina web, ștergeți codul încorporat al acestuia din codul HTML sursă.

Pași:

  1. Deschideți codul sursă HTML al paginii web care conține butonul de cumpărare, colecția integrată sau coșul încorporat.
  2. Ștergeți întregul cod încorporat din codul HTML sursă, începând cu <script data-shopify-buy-ui> și terminând cu </script>. Mai jos se regăsește un exemplu de cod încorporat pentru un buton de cumpărare:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Salvați modificările.