Hjælp
Log ind

Tilpasning eller fjernelse af en Køb-knap, en integreret kollektion eller en integreret indkøbskurv

Du kan ændre udseendet eller adfærden for en Køb-knap, en integreret kollektion eller en integreret indkøbskurv ved at redigere integreringskoden i websidens HTML-kildekode. Du kan også slette en integrering ved at fjerne koden fra din webside.

En Køb-knap viser et produkt sammen med en købsknap. En integreret kollektion viser flere produkter. En integreret indkøbskurv viser en fritstående indkøbskurv, som kunder kan bruge på tværs af sider.

En integreringskode er det kodestykke, du kopierede fra din Shopify-administrator og indsatte i din websides HTML, da du oprettede din Køb-knap eller indkøbskurv. Integreringskoden er skrevet i JavaScript, som er det programmeringssprog, der bruges til at tilføje interaktive funktioner til websider.

På denne side

Forstå integreringskoden til Køb-knappen

Hver Køb-knap er bygget af separate dele, der kaldes komponenter. En komponent er et navngivet afsnit i integreringskoden, der styrer en del af oplevelsen med Køb-knappen. Når du f.eks. tilføjer et produkt med en indkøbskurv til din webside, genererer integreringskoden følgende komponenter:

  • en product-komponent, som viser produktoplysningerne og købsknappen
  • en cart-komponent, som viser indkøbskurvens indhold
  • en toggle-komponent til indkøbskurven, som viser det ikon, der åbner indkøbskurven

Hvis din produktkomponent åbner et pop op-vindue med produktoplysninger, genererer integreringskoden to yderligere komponenter: En modal-komponent til selve pop op-vinduet og en modalProduct-komponent til produktoplysningerne inde i pop op-vinduet.

I følgende kodestykke er der separate komponenter for product og 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'
          }
        }
      }
    }
  });
});

Hver komponent konfigureres via et konfigurationsobjekt i integreringskoden. Et objekt er en struktureret gruppe af indstillinger, der er formateret som en liste over nøgleværdipar:

  • En nøgle er navnet på en indstilling, f.eks. buttonDestination.
  • En værdi er det, indstillingen er angivet til, f.eks. 'cart'.

Et objekt svarer til et regneark: Hver nøgle svarer til et kolonnenavn, og hver værdi svarer til indholdet i en celle. Hvis du vil ændre udseendet eller adfærden for dine Køb-knapper, skal du redigere nøglerne og værdierne i konfigurationsobjekterne.

Hver komponent har mange redigerbare nøgler. Se dokumentationen for udviklere for at få en komplet liste over redigerbare nøgler. Hvis du vil konfigurere en nøgle, der ikke allerede findes i din integreringskode, skal du tilføje nøglen til det relevante objekt. Du kan finde et eksempel under Skift layout for en produktintegrering.

Tilpas styling af komponenter

Hver komponent har et indlejret styles-konfigurationsobjekt, der styrer komponentens udseende. Et indlejret objekt er et objekt, der er placeret inde i et andet objekt.

Objektet styles bruger CSS, som er det sprog, der bruges til at beskrive, hvordan websideelementer formateres visuelt. Hver nøgle på øverste niveau i styles-objektet repræsenterer et element i komponenten, f.eks. titlen eller knappen. Inden for denne nøgle er hver indlejret nøgle en CSS-egenskab (f.eks. background-color eller border), og værdien er en CSS-værdi.

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

Enhver gyldig CSS-egenskab kan tilføjes til styles. Sørg for, at egenskabsnavne med bindestreger er omgivet af anførselstegn.

Du kan få mere at vide om CSS-tilpasning i udviklerdokumentationen.

Komponenter for integreret kollektion

Integrerede kollektioner bruger de samme konfigurationsobjekter som Køb-knapper. Hvis du vil redigere layoutet eller andre egenskaber for produkter i kollektionen, skal du finde product-konfigurationsobjektet og redigere det på samme måde, som du ville redigere en produktintegrering. Hvis du vil redigere egenskaber for selve kollektionen, f.eks. teksten på knappen Næste side, skal du i stedet redigere productSet-konfigurationsobjektet.

Nogle nøgler, f.eks. teksten i en komponent, konfigureres via indlejrede objekter. Teksten til knappen Næste side findes f.eks. i text-objektet for productSet-komponenten:

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

Et modalvindue til produktoplysninger er et pop op-vindue, der viser produktoplysninger. Hvis du vil lede din kunde videre til et modalvindue med produktoplysninger i stedet for til indkøbskurven, skal du redigere integreringskoden til Køb-knappen i din websides HTML-kildekode.

Trin:

  1. Åbn HTML-koden for den side, der indeholder den produktintegrering, du vil ændre.
  2. Find product-konfigurationsobjektet.
  3. Find nøglen buttonDestination i objektet:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Skift værdien for den pågældende nøgle til 'modal', inklusive anførselstegnene:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Gem ændringerne.

Skift layout for en produktintegrering

Et horisontalt layout for produktintegreringen placerer billedet ved siden af produktoplysningerne i stedet for over dem. Hvis du vil skifte til dette layout, skal du redigere integreringskoden til din Køb-knap i websidens HTML-kildekode.

Trin:

  1. Åbn HTML-koden for den side, der indeholder den produktintegrering, du vil ændre.
  2. Find product-konfigurationsobjektet.
  3. Tilføj en layout-nøgle, og angiv derefter værdien til 'horizontal'. Sørg for, at værdien inkluderer anførselstegnene, og at den foregående linje slutter med et komma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Gem ændringerne.

Skift udseende og adfærd for en integreret indkøbskurv

Hvis du vil ændre udseendet eller adfærden for en indkøbskurv, skal du redigere cart-konfigurationsobjektet i din integreringskode.

Trin:

  1. Åbn HTML-koden for den side, der indeholder den indkøbskurv, du vil redigere.
  2. Find cart-konfigurationsobjektet i din integreringskode:
options: {
      cart: {
        startOpen: false
      }
}
  1. Rediger en eksisterende nøgle, eller tilføj en ny, for at ændre udseendet eller adfærden for indkøbskurven. Du kan se en komplet liste over konfigurerbare nøgler i dokumentationen for udviklere.
  2. Gem ændringerne.

Slet en Køb-knap, en integreret kollektion eller en integreret indkøbskurv

Hvis du vil fjerne en Køb-knap, en integreret kollektion eller en integreret indkøbskurv fra din webside, skal du slette den tilhørende integreringskode fra HTML-kildekoden.

Trin:

  1. Åbn HTML-kildekoden til den webside, der indeholder Køb-knappen, den integrerede kollektion eller den integrerede indkøbskurv.
  2. Slet hele integreringskoden fra HTML-kildekoden. Start med <script data-shopify-buy-ui>, og slut med </script>. Følgende er et eksempel på integreringskoden til en Køb-knap:
<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. Gem ændringerne.