Een koopknop of ingesloten winkelwagen bewerken of verwijderen

Let op

Dit is een uitgebreide tutorial en deze wordt niet ondersteund door Shopify. Hiervoor is kennis van een webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. Als je hulp nodig hebt, kun je een Shopify-partner inhuren.

Koopknoppen en winkelwagens worden gegenereerd vanuit de codefragmenten die je kopieert vanaf je Shopify-beheercentrum en plakt in de bron-HTML van je webpagina. Deze codefragmenten worden ook wel invoegcode genoemd. Als je het uiterlijk of de werking van een knop of winkelwagen wilt wijzigen, moet je de bijbehorende invoegcode bewerken.

Opmerking

Deze instructies zijn van toepassing op de invoegcode van de koopknop die je na 26 september 2016 hebt gegenereerd. Als je invoegcode wilt wijzigen die je vóór deze datum hebt gegenereerd, moet je de eerdere instructies volgen. Je kunt je invoegcode ook opnieuw maken met het verkoopkanaal Koopknop.

Als je niet zeker weet welke versie van de invoegcode je hebt, controleer of deze begint met <script data-shopify-buy-ui>. Als dat het geval is, heb je de nieuwste versie. Als deze begint met <div data-emebd_type=... of een ander type <div>-tag, heb je de oudere versie.

Een koopknop, ingesloten collectie of ingesloten winkelwagen verwijderen

Stappen:

1. Open de bron-HTML van de webpagina die de koopknop, ingesloten collectie of ingesloten winkelwagen bevat.
2. Verwijder de volledige invoegcode uit de bron-HTML, vanaf <script data-shopify-buy-ui> tot en met </script>. Voor een koopknop ziet de invoegcode eruit als de volgende code:

<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. Sla je wijzigingen op.

De koopknop, ingesloten collectie of ingesloten winkelwagen wordt niet meer weergegeven op je webpagina.

Een koopknop bewerken

Bewerk de invoegcode die je aan je bron-HTML hebt toegevoegd als je het uiterlijk of de instellingen van een bestaande koopknop wilt wijzigen.

Elke koopknop is opgebouwd uit afzonderlijke componenten in de invoegcode. Als je bijvoorbeeld een product met een winkelwagen aan je webpagina toevoegt, wordt met de invoegcode een product-component, een cart-component en een winkelwagencomponent toggle gegenereerd:

.

Als je wilt dat met je productcomponent een modaal met productdetails wordt geopend, wordt met de invoegcode een modal-component en een modalProduct-component gegenereerd:

.

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

Deze componenten worden afzonderlijk geconfigureerd via configuratie_objecten_ in de invoegcode. Je kunt het uiterlijk of gedrag van je koopknoppen wijzigen door de configuratie-objecten in de invoegcode te bewerken.

Tip

In JavaScript is een object een set sleutel-waardeparen in de notatie {key: value}. Je kunt het vergelijken met een spreadsheet: de sleutel is de kolomnaam en de waarde is de inhoud van een cel.

Elke component heeft veel attributen die je kunt bewerken. Zie onze documentatie voor ontwikkelaars voor een volledige lijst met bewerkbare opties. Voeg de juiste sleutel toe aan het juiste object (zie het voorbeeld) als je een optie wilt configureren die nog niet in je invoegcode wordt weergegeven.

De stijl van een component bewerken

Elke component heeft een genest styles-configuratieobject, dat je kunt bewerken of toevoegen om het uiterlijk van de component te wijzigen. Deze stijlen zijn op dezelfde manier opgemaakt als CSS. Elke sleutel op het hoogste niveau in het styles-object geeft een element aan in de component, zoals de titel of de knop. Binnen dit object is elke sleutel een CSS-eigenschap (bijvoorbeeld 'achtergrondkleur' of 'rand') 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. Denk eraan dat eigenschapnamen met streepjes tussen aanhalingstekens moeten staan.

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

Voorbeeld: link naar winkelwagen vervangen door modaal van productdetails

In dit voorbeeld kun je je huidige invoegcode wijzigen om je klant door te verwijzen naar een modaal met productdetails in plaats van de winkelwagen:

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

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

1. Wijzig de waarde van deze sleutel in 'modal' (zorg ervoor dat je de aanhalingstekens opneemt):

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

1. Sla je wijzigingen op.

Voorbeeld: de opmaak van je productinsluiting wijzigen

In dit voorbeeld kun je de indeling van je productinsluiting wijzigen, zodat de afbeelding aan de zijkant wordt weergegeven in plaats van bovenaan:

1. Open de HTML-code van de pagina met de productinsluiting die je wilt wijzigen.
2. Zoek het product-configuratieobject.
3. Voeg een layout-sleutel toe en stel de waarde in op 'horizontal':

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

<aside class="note">
<h4>Opmerking</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

1. Sla je wijzigingen op.

De winkelwagen van je website bewerken

Bewerk het cart-configuratieobject in je invoegcode als je het uiterlijk of de werking van de winkelwagen van je website wilt 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
      }
}

1. Bewerk de eigenschap die je wilt wijzigen of voeg deze toe. Zie de documentatie voor ontwikkelaars voor een volledige lijst met configureerbare eigenschappen.
2. Sla je wijzigingen op.

Een ingesloten collectie bewerken

Het bewerken van een ingesloten collectie is vergelijkbaar met het bewerken van een product of winkelwagen. Als je de eigenschappen van de producten in de collectie wilt bewerken (bijvoorbeeld de opmaak van elk product), zoek het product-configuratieobject en bewerk dit op dezelfde manier als een productinsluiting. Als je de eigenschappen van de collectie zelf wilt bewerken (bijvoorbeeld de tekst van de knop Volgende pagina), bewerk in plaats hiervan de productSet-sleutel.

Sommige eigenschappen, zoals de tekst van een component, worden geconfigureerd via geneste objecten. Dit zijn objecten die binnen andere objecten worden weergegeven. De tekst voor de knop Volgende pagina wordt bijvoorbeeld weergegeven binnen het text-object van de productSet-component:

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