Boodschapentas toevoegen aan een maatwerk website

U kunt een boodschappentaspictogram aan uw maatwerk website toevoegen met behulp van de winkelextensie Extra boodschappentas. Het pictogram helpt uw klanten te zien hoeveel artikelen ze aan hun bestelling hebben toegevoegd en naar de kassa te gaan.

U kunt ook het uiterlijk van het standaard boodschappentaspictogram wijzigen, de positie ervan op de pagina bepalen, de omleiding naar een maatwerk pagina toepassen of geanimeerde effecten door middel van speciale parameters die aan de integratiecode worden toegevoegd. Door meerdere parameters binnen één integratiecode te combineren kunt u het boodschappentaspictogram maken dat het best bij uw website-ontwerp past.

Standaardboodschappentas toevoegen

Als uw winkel aan een maatwerk website is toegevoegd, kunt u met een klein stukje code een boodschappentas toevoegen. U moet deze code kopiëren en in uw website plakken.

Een boodschappentas toevoegen aan een maatwerk website:

1. Ga in de winkelbeheerder naar Overzicht.
2. In de sectie "Verkopen op uw website", klik op het blok Maatwerk website.
3. Scroll naar Winkelextenties → Extra boodschappentas.
4. Klik op Boodschappentas toevoegen en de boodschappentascode wordt naar uw klembord gekopieerd:
   
5. Log in op het beheerdergedeelte van uw website en open de pagina waar u de boodschappentas wilt weergeven.
6. Plak de gekopieerde winkelwagencode in de broncode van de pagina. Afhankelijk van het platform dat u gebruikt kan dat HTML zijn, een brontabblad of een aparte knop om code toe te voegen. Als u niet zeker weet hoe u aangepaste codes aan uw website kunt toevoegen, neem dan contact op met de websiteontwikkelaar voor meer gedetailleerde instructies.
7. Sla de wijzigingen op en publiceer deze.

Zodra u opslaat en publiceert, verschijnt er een boodschappentaspictogram op uw website.

Lay-out boodschappentas wijzigen

U kunt de standaardlay-out van de boodschappentas wijzigen door de parameter data-layout toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor de parameter data-layout;
STORE_ID is de ID van uw winkel.

De ondersteunde waarden en hoe elk lay-out eruit ziet vindt u in de tabel hieronder.

Value	Lay-out
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

Lege boodschappentas weergeven of verbergen

U kunt de boodschappentas weergeven of verbergen als deze leeg is door middel van de parameter data-show-empty-cart die voor de "ec-cart-widget"-container in de integratiecode opgegeven is, zoals weergegeven in het voorbeeld hieronder:

<div data-show-empty-cart="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"data-fixed="TRUE"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is ofwel TRUE of FALSE;
STORE_ID is de ID van uw winkel.

Boodschappentaspictrogram wijzigen

U kunt het standaardboodschappentaspictogram wijzigen door de parameter data-icon toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor de parameter data-icon;
STORE_ID is de ID van uw winkel.

De ondersteunde waarden en hoe elk pictogram eruit ziet vindt u in de tabel hieronder.

Value	Pictogram
BOODSCHAPPENTAS
WINKELWAGEN
WINKELMAND

De vorm van de rand van de boodschappentas wijzigen

U kunt de vorm van de rand rondom de boodschappentas wijzigen door de parameter data-fixed-shape toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is NONE (geen rand) / RECT (rechthoekige rand) / PILL (afgeronde rechthoekige rand);
STORE_ID is de ID van uw winkel.

Maatwerk boodschappentaspictogram toepassen

Een maatwerk boodschappentaspictogram op uw website gebruiken:

1. Upload uw pictogramafbeelding naar uw hosting of naar een andere afbeeldingshosting waar u een directe link naar de afbeelding krijgt. Of maak een SVG-afbeelding van uw boodschappentaspictogram.
2. Gebruik de volgende code om een boodschappentas aan uw website toe te voegen:

<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

en vervang:
VALUE door ofwel een URL naar het maatwerk pictogrambestand of een SVG-opmaak;
STORE_ID door de ID van uw winkel.

Positie boodschappentas wijzigen

U kunt de positie van de boodschappentas wijzigen door middel van verschillende parameters die toegevoegd worden aan de "ec-cart-widget"-container in de integratiecode.

<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor elke parameter;
STORE_ID is de ID van uw winkel.

De parameters waarmee u de positie van de boodschappentas kunt wijzigen en hun ondersteunde waarden vindt u in de tabel hieronder.

Boodschappentasanimatie weergeven of verbergen

U kunt het animatie-effect weergeven of verbergen wanneer er artikelen aan de boodschappentas worden toegevoegd, door middel van de parameter data-show-buy-animation die voor de "ec-cart-widget"-container in de integratiecode is opgegeven, zoals weergegeven in het voorbeeld hieronder:

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is ofwel TRUE of FALSE;
STORE_ID is de ID van uw winkel.

Hetzelfde boodschappentasontwerp op alle apparaten gebruiken

U kunt de responsiviteit van de boodschappentaswidget uitschakelen, zodat deze er hetzelfde uitziet op verschillende schermformaten, desktop en mobiel. Neem hiervoor de parameter data-responsive op in de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE ofwel TRUE is (de winkelwagen past zich automatisch aan verschillende schermformaten aan) of FALSE (de winkelwagen heeft hetzelfde ontwerp op verschillende schermformaten);
STORE_ID is de ID van uw winkel.