Een koopknop, ingesloten collectie of ingesloten winkelwagen aanpassen of verwijderen

Je kunt de weergave of het gedrag van een koopknop, ingesloten collectie of ingesloten winkelwagen wijzigen door de invoegcode in de HTML-broncode van je webpagina te bewerken. Je kunt een ingesloten element ook verwijderen door de code van je webpagina te verwijderen.

Een koopknop geeft een product weer met een aankoopknop. Een ingesloten collectie toont meerdere producten. Een ingesloten winkelwagen toont een zelfstandige winkelwagen die klanten op verschillende pagina's kunnen gebruiken.

Invoegcode is het codefragment dat je uit je Shopify-beheercentrum hebt gekopieerd en in de HTML van je webpagina hebt geplakt toen je de koopknop of winkelwagen aanmaakte. De invoegcode is geschreven in JavaScript, de programmeertaal die wordt gebruikt om interactieve functies aan webpagina's toe te voegen.

De invoegcode van de koopknop begrijpen

Elke koopknop is opgebouwd uit afzonderlijke delen die componenten worden genoemd. Een component is een benoemd gedeelte van de invoegcode dat één onderdeel van de koopknopervaring beheert. Als je bijvoorbeeld een product met een winkelwagen aan je webpagina toevoegt, genereert de invoegcode de volgende componenten:

• een product-component, die de productgegevens en de aankoopknop weergeeft
• een cart-component, die de inhoud van de winkelwagen weergeeft
• een toggle-component voor de winkelwagen, die het pictogram weergeeft waarmee de winkelwagen wordt geopend

Als je productcomponent een pop-upvenster met productgegevens opent, genereert de invoegcode nog twee componenten: een modal-component voor de pop-up zelf en een modalProduct-component voor de productgegevens binnen de pop-up.

In het volgende codefragment zijn er afzonderlijke componenten voor de product en de 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'
          }
        }
      }
    }
  });
});

Elke component wordt geconfigureerd via een configuratieobject in de invoegcode. Een object is een gestructureerde groep instellingen, opgemaakt als een lijst van sleutel-waardeparen:

• Een sleutel is de naam van een instelling, zoals buttonDestination.
• Een waarde is waar de instelling op is ingesteld, zoals 'cart'.

Een object is vergelijkbaar met een spreadsheet: elke sleutel komt overeen met een kolomnaam, en elke waarde komt overeen met de inhoud van een cel. Bewerk de sleutels en waarden in de configuratieobjecten om de weergave of het gedrag van je koopknoppen te wijzigen.

Elke component heeft een groot aantal bewerkbare sleutels. Bekijk de documentatie voor ontwikkelaars voor een volledige lijst van bewerkbare sleutels. Voeg de sleutel toe aan het betreffende object om een sleutel te configureren die nog niet in de invoegcode staat. Raadpleeg De opmaak van een ingesloten product wijzigen voor een voorbeeld.

Componentstijlen aanpassen

Elke component heeft een genest styles-configuratieobject dat de weergave van de component beheert. Een genest object is een object dat in een ander object is geplaatst.

Het styles-object gebruikt CSS, de taal die wordt gebruikt om de visuele styling van webpagina-elementen te beschrijven. Elke sleutel op het hoogste niveau in het styles-object vertegenwoordigt een element in de component, zoals de titel of de knop. Binnen die sleutel is elke geneste sleutel een CSS-eigenschap (bijvoorbeeld background-color of border), en is de waarde een CSS-waarde.

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

Elke geldige CSS-eigenschap kan worden toegevoegd aan styles. Zorg ervoor dat eigenschapsnamen met streepjes tussen aanhalingstekens staan.

Raadpleeg de documentatie voor ontwikkelaars voor meer informatie over CSS-aanpassingen.

Componenten van ingesloten collecties

Ingesloten collecties gebruiken dezelfde configuratieobjecten als koopknoppen. Als je de opmaak of andere eigenschappen van producten binnen de collectie wilt bewerken, zoek je het product-configuratieobject en bewerk je dit op dezelfde manier als bij een ingesloten product. Om eigenschappen van de collectie zelf te bewerken, zoals de tekst van de knop Volgende pagina, bewerk je in plaats daarvan het productSet-configuratieobject.

Sommige sleutels, zoals de tekst van een component, worden geconfigureerd via geneste objecten. De tekst voor de knop Volgende pagina staat bijvoorbeeld in het text-object van de productSet-component:

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

De winkelwagenlink van een ingesloten product vervangen door een modaal venster met productgegevens

Een modaal venster met productgegevens is een pop-upvenster dat productinformatie weergeeft. Bewerk de invoegcode van je koopknop in de HTML-broncode van je webpagina om je klant naar een modaal venster met productgegevens te leiden in plaats van naar de winkelwagen.

Stappen:

1. Open de HTML van de pagina met het ingesloten product dat je wilt wijzigen.
2. Zoek het product-configuratieobject.
3. Zoek de sleutel buttonDestination in het object:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

4. Wijzig de waarde van die sleutel in 'modal', inclusief de aanhalingstekens:

options: {
      product: {
        buttonDestination: 'modal'
      }
}

5. Sla je wijzigingen op.

De opmaak van een ingesloten product wijzigen

Een horizontale opmaak van een ingesloten product plaatst de afbeelding naast de productgegevens in plaats van erboven. Bewerk de invoegcode van je koopknop in de HTML-broncode van je webpagina om naar deze opmaak te schakelen.

Stappen:

1. Open de HTML van de pagina met het ingesloten product dat je wilt wijzigen.
2. Zoek het product-configuratieobject.
3. Voeg een layout-sleutel toe en stel de waarde in op 'horizontal'. Zorg ervoor dat de waarde inclusief de aanhalingstekens is en dat de vorige regel eindigt met een komma:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

4. Sla je wijzigingen op.

De weergave en het gedrag van een ingesloten winkelwagen wijzigen

Bewerk het cart-configuratieobject in je invoegcode om de weergave of het gedrag van een winkelwagen te wijzigen.

Stappen:

1. Open de HTML van de pagina met de winkelwagen die je wilt bewerken.
2. Zoek het cart-configuratieobject in je invoegcode:

options: {
      cart: {
        startOpen: false
      }
}

3. Bewerk een bestaande sleutel of voeg een nieuwe toe om de weergave of het gedrag van de winkelwagen te wijzigen. Bekijk de documentatie voor ontwikkelaars voor een volledige lijst van configureerbare sleutels.
4. Sla je wijzigingen op.

Een koopknop, ingesloten collectie of ingesloten winkelwagen verwijderen

Verwijder de bijbehorende invoegcode uit de HTML-broncode om een koopknop, ingesloten collectie of ingesloten winkelwagen van je webpagina te verwijderen.

Stappen:

1. Open de bron-HTML van de webpagina met de koopknop, ingesloten collectie of ingesloten winkelwagen.
2. Verwijder de volledige invoegcode uit de HTML-broncode, beginnend bij <script data-shopify-buy-ui> en eindigend met </script>. Hieronder staat een voorbeeld van de invoegcode van een koopknop:

<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>

3. Sla je wijzigingen op.