41 besökare, 1 medlem är online nu
Loopia

webdesignskolan

WDS medlem (WDS member)

WDS Shop är ett orderformulär som kan kopplas till en befintlig produktsida eller användas tillsammans med publiceringsverktyget WDS CMS.

WDS Shop visar alla butikens produkter i samma orderformulär och passar e-butiker med få produkter. Om du planerar att starta upp en webbshop kan detta vara ett bra alternativ.

 

Exempel: WDS Shop demo

WDS Shop är ett orderformulär som kan kopplas till en befintlig produktsida eller användas tillsammans med publiceringsverktyget WDS CMS.

WDS Shop visar alla butikens produkter i samma orderformulär och passar e-butiker med få produkter. Om du planerar att starta upp en webbshop kan detta vara ett bra alternativ.

Klicka på länken eller bilden nedan för att komma till orderformuläret. OBS! Ingen beställning skickas på riktigt men du kommer att få en orderbekräftelse till den e-postadress du anger.

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

 

Funktioner i WDS Shop

Här är en översikt över funktionerna i WDS Shop:

  • Använd orderformuläret fristående
    Du kan använda orderformuläret som hela din e-butik. Ange detaljerade specifikationer för produkten direkt i orderformuläret.
  • Koppla orderformuläret till befintlig produktsida
    Orderformuläret kan kopplas till dina befintliga produktsidor genom att du länkar en "köp-text" eller "köp-knapp" till orderformuläret. Ange detaljerade specifikationer för produkten i din produktsida och endast en sammanfattning i orderformuläret.
  • Koppla till publiceringsverktyget WDS CMS
    Du kan använda WDS CMS som webbshop och ange produkter i egna produktsidor. Infoga orderformuläret med <?php include ?> i en "beställnings-sida". Se hur det kan fungera i vår egen webbshop Drömvävaren Öppnas i nytt fönster (Open in new window)
  • Ange egna namn på knappar
    Du kan ange dina egna namn på alla knappar i orderformuläret. Använd knappnamn som tex "Köp" eller "Varukorg" istället för "till Kundvagn".
  • Beställningen sker i 4 steg
    Kunden kan se var hon befinner sig och kan backa i orderprocessen eller avbryta köpet i kassan innan "Steg 4". Valda produkter kan ändras i antal eller raderas från kundvagnen.
  • Textfält för specifikation av produktval
    Du kan välja om du vill visa ett textfält där kunden kan ange storlekar, färg eller andra önskemål om den valda produkten.
  • Alla produkter anges i en PHP-fil
    Ingen databas krävs och alla produkter anges i en PHP-fil. För varje produkt kan du ange 7 olika egenskaper (om du lämnar en egenskap tom visas den inte i orderformuläret).
    Här är de egenskaper du kan ange:
    - Bild eller länk. Visar produkt och/eller en länk till produktsidan.
    - Artikelnummer. Visar artikelnummer som även anges i mail till webbshop och kund.
    - Produktnamn. Visar rubrik med namnet på produkten.
    - Beskrivning av produkten. Visar en detaljerad beskrivning av produkten.
    - Pris inklusive moms. Visar priset inklusive moms (pris exklusive moms räknas ut automatiskt).
    - Vikt i gram. Visar vikten i gram för beräkning av fraktkostnad. Du kan välja att inte visa detta för kund.
    - Text om formulärfält ska visas. Visar textfält för specifikation av tex storlek, färg eller andra egenskaper.
  • Frakt med egna val
    Frakten räknas ut enligt Postens portotabell baserat på den vikt du anger för varje artikel. Dessutom kan du ange en extra kostnad för tex emballage. Du kan erbjuda alla produkter eller enbart vissa produkter fraktfritt. Du kan erbjuda fri frakt vid en angiven beloppsgräns. Du kan ange en fast fraktkostnad oavsett orderbelopp eller vikt. Här är de val för frakt du kan välja:
    - Kalkylera fraktkostnad
    - Fast fraktkostnad
    - Fraktfritt enstaka produkter
    - Fraktfritt
    - Fraktfritt vid angivet belopp
  • Betalningsmetoder med egna val
    Du kan ange 5 olika betalningsalternativ och väljer vilka som ska användas i orderformuläret:
    - Kortbetalning med VISA eller MasterCard.
    - Direktöverföring från Swedbank, Handelsbanken, SEB, Nordea eller Payson-konto.
    - Faktura. Välj valfri kostnad för faktureringen).
    - Egen betalningsmetod. Kan tex vara förskottsbetalning till Plusgiro eller Bankgiro.
    - Postförskott. Välj valfri kostnad för Postförskottsbetalningen.
  • VISA, MasterCard och bankövering är integrerad
    Kortbetalningen med VISA eller MasterCard och direktöverföringen från bank sker via Payson. Betalningsmetoden är redan integrerad och du behöver bara öppna ditt eget Payson-konto och ange AgentID och kodnyckel för att använda den i ditt orderformulär.
  • Orderbekräftelse till kund via mail
    Orderbekräftelse skickas via mail till kunden med uppgifter om beställda produkter, pris inklusive och exklusive moms och betalningsmetod. Du kan dessutom själv ange ett eget meddelande som visas i mailet.
  • Beställning från kund via mail
    Alla beställningar skickas till din angivna e-postadress och innehåller all information från orderformuläret.
  • Beställningar sparas i loggfiler
    Alla beställningar sparas i två olika loggfiler så att du kan följa upp ordrar även om din e-post tillfälligt inte fungerar. En av loggfilerna är separerade med filtertecken så att du kan importera den till en egen databas.

 

Förutsättningar för att använda WDS Shop

För att du ska kunna använda WDS Shop måste din webbserver ha PHP 4.3 eller senare version.

För att mailfunktionerna i PHP ska fungera måste din webbserver ha tillgång till ett mailprogram som tex Sendmail, Qmail eller Postfix. Läs mer om mail i guiden Formmail - skicka formulär till epost »

De funktioner som används kräver inga plugins eller andra tillägg för att fungera för användaren eller administratören.

 

Villkor för användning av WDS Shop

Användning för eget bruk
Detta program ingår i tjänsten "WDS medlem 12 månader" och får användas av dig som innehar ett medlemskap. Programmet får användas EN gång per medlemskap. Du som vill använda programmet till flera egna webbplatser måste göra en ny beställning (på samma kundkonto).

Programmen får endast användas under medlemstiden. När medlemstiden utgått måste ett nytt medlemskap beställas för rätten att använda programmen 12 månader framåt.

Privatpersoner och föreningar
Du som hjälper privatpersoner eller ideella föreningar med deras webbplatser måste göra en beställning av tjänsten "WDS medlem 12 månader" för varje webbplats som använder programmet.

Företag och kommersiell verksamhet
Du som gör webbplatser åt kunder, och bedriver kommersiell verksamhet, måste göra en beställning av tjänsten "WDS medlem 12 månader" för varje webbplats som använder programmet.

Använda programmet till fler än EN webbplats
Välj något av alternativen nedan om du vill använda programmet till fler än EN webbplats:

  • Gör en ny beställning från ditt eget kundkonto så utökar du din medlemstid med 12 månader (gäller från ditt aktuella slutdatum).
  • Gör en beställning i uppdragsgivarens namn. Uppdragsgivaren får tillgång till alla Webdesignskolans guider och du ger ett mervärde till den webbplats du skapat.

Användning och anpassning av kod
Vi har valt att göra kod och funktioner tydliga och lätta att överblicka för att du ska kunna ändra och lägga till egna funktioner. Du som är webbutvecklare kan alltså anpassa koden för ditt eget eller dina kunders behov men får inte distribuera eller sälja programkoden vidare.

Programmet får INTE säljas eller erbjudas vidare till egna kunder och besökare.

Copyrightinformationen nedan får inte raderas från filerna:

(C) Copyright www.webdesignskolan.se
Programmet får användas i både privat och kommersiell verksamhet men får INTE vidaredistribueras i någon form. Du får ändra fritt i koden men INTE radera denna information om copyright. Samma villkor gäller gäller för PHP-kod, CSS-mallar och bilder.
You may NOT remove any copyright or other proprietary notices contained in the documents and information

Läs mer om villkor och copyright här »

 

Installation av WDS Shop

Hämta ZIP-filen med WDS Shop (längst ned i denna guide) och packa upp filerna:

OBS! Ändra inte namnen eller ordningen på mappar och filnamn!

Publicera filerna till din webbserver. Använd ett FTP-program » eller liknande funktion i din webbeditor eller hos ditt webbhotell. I vårt exempel har vi lagt filerna i rotmappen.

Så här kan det se ut i FileZilla » där mappen wds_shop placerats i samma mappnivå som våra övriga program:

Mappen wds_shop innehåller filerna enligt nedan:

 

TIPS! Läs mer om hur du väljer webbhotell i guiden Webbhotell och domännamn »

Det är inte svårare än så att komma igång med WDS Shop!

 

 

Inställningar och konfiguration

Alla inställningar gör du i filen config_shop.php

Öppna filen i valfri HTML-editor eller text-editor som tex Notepad++ (läs mer om programmet här ») och gör dina ändringar i PHP-koden. I exemplen nedan visas PHP-filen i programmet Dreamweaver »

Att kodsyntax visas i färg som i Notepad++ är till stor hjälp när du kodar. Om du anger fel tecken eller utelämnar tecken så indikerar färgvisningen att något är fel. Ett exempel är att om ett dubbelt citationstecken "dubbelfnutt" ändras till enkelt citationstecken 'enkelfnutt' så visar färgen i kodsyntax att något är felaktigt.

Här är de ändringar du MÅSTE göra

OBS! Viktigt! Använd enkla citationstecken 'enkelfnuttar' före och efter alla värden. Dubbla citationstecken "dubbelfnuttar" kan du använda men då endast i texten för värden. Om du tar bort eller lägger till enkla citationstecken 'enkelfnuttar' kan detta resultera i att en vit sida visas i webbläsaren.

  1. Ange ditt butiksnamn eller företagsnamn:

  2. Ange URL till ditt eget domännamn, med sökvägen till mappen wds_shop:

  3. Ange den e-postadress som alla beställningar ska skickas till. Visas även i beställningsbekräftelse till kund:

  4. Om du infogar orderformuläret med <?php include ?> i en "beställnings-sida" anger du detta med värdet 1.
    Ange detta om du använder orderformuläret tillsammans med WDS CMS som vi gör i vår egen webbshop Drömvävaren  Öppnas i nytt fönster (Open in new window)

    Om du använder orderformuläret fristående anger du värdet 0. Ange detta om du kopplar orderformuläret till dina befintliga produktsidor genom att du länkar en "köp-text" eller "köp-knapp" till orderformuläret.

    Standardvärdet är 0:

  5. Ange URL till den sida som ska vara startsida i din webbshop. Textlänkarna "tillbaka till butiken" går till denna sida:

Orderformuläret är nu klart att användas!

 

Här är de ändringar du KAN göra

Du kan konfigurera övriga val när du testkör din webbshop. Alla val förklaras i kommentarer ovanför variablerna.

OBS! Viktigt! Använd enkla citationstecken 'enkelfnuttar' före och efter alla värden. Dubbla citationstecken "dubbelfnuttar" kan du använda men då endast i texten för värden. Om du tar bort eller lägger till enkla citationstecken 'enkelfnuttar' kan detta resultera i att en vit sida visas i webbläsaren.

 

 

Infoga orderformuläret med <?php include ?>

Du kan infoga formuläret i en befintlig sida med <?php include ?>

Ange den relativa sökvägen till orderformuläret. Det kan se ut så här om du använder WDS CMS och mappen wds_shop placerats i samma mappnivå som våra övriga program:

<?php include("wds_shop/order.php"); ?>

Om du använder WDS CMS kan du läsa i WDS CMS användarguide » om hur du infogar sidor med <?php include ?>

 

 

URL till orderformuläret

Använd adressen till orderformuläret när du testar din webbshop i webbläsaren.

Sökvägen till orderformuläret är:
wds_shop/order.php
Hela adressen till formuläret i vårt exempel är då:
http://www.dinadress.se/wds_shop/order.php

Om du infogat orderformuläret med <?php include ?> i en befintlig webbplats kan adressen se ut så här: http://www.dinadress.se/bestallning.html

 

 

Lägga till produkter

Produkterna som ska visas i orderformuläret lägger du till i filen config_produkter.php

Öppna filen i valfri HTML-editor eller text-editor som tex Notepad++ (läs mer om programmet här ») och gör dina ändringar i PHP-koden. I exemplen nedan visas PHP-filen i programmet Dreamweaver »

Att kodsyntax visas i färg som i Notepad++ är till stor hjälp när du kodar. Om du anger fel tecken eller utelämnar tecken så indikerar färgvisningen att något är fel. Ett exempel är att om ett dubbelt citationstecken "dubbelfnutt" ändras till enkelt citationstecken 'enkelfnutt' så visar färgen i kodsyntax att något är felaktigt.

OBS! Viktigt! Använd enkla citationstecken 'enkelfnuttar' före och efter alla värden. Dubbla citationstecken "dubbelfnuttar" kan du använda men då endast i texten för värden. Om du tar bort eller lägger till enkla citationstecken 'enkelfnuttar' kan detta resultera i att en vit sida visas i webbläsaren.

För varje produkt kan du ange 7 olika egenskaper:

  1. Bild eller länk
    Visar produkt och/eller en länk till produktsidan.
  2. Artikelnummer
    Visar artikelnummer som även anges i mail till webbshop och kund.
  3. Produktnamn
    Visar rubrik med namnet på produkten.
  4. Beskrivning av produkten
    Visar en detaljerad beskrivning av produkten.
  5. Pris inklusive moms
    Visar priset inklusive moms (pris exklusive moms räknas ut automatiskt).
  6. Vikt i gram
    Visar vikten i gram för beräkning av fraktkostnad. Du kan välja att inte visa detta för kund.
  7. Text här om extra formulärfält ska visas
    Visar textfält för specifikation av tex storlek, färg eller andra egenskaper.

För varje produkt anges egenskaperna i en array (läs mer om array i PHP grunder » )

Så här kan egenskaperna för en produkt anges:

... och så här kan det se ut i orderformuläret:

 

Observera att varje egenskap avslutas med ett kommatecken. Om du inte anger kommatecknet hämtas fel information till orderformuläret. Använd enkla citationstecken 'enkelfnuttar' före och efter alla egenskaper med textinnehåll:

För egenskaper som bara innehåller siffror (pris och vikt) anges INTE citationstecken 'enkelfnuttar':

OBS! Viktigt! Om du INTE vill visa en egenskap måste den ändå anges men med ett tomt innehåll. Du får inte ta bort citationstecknen och kommatecknet.

I exemplet nedan lämnas innehållet tomt inom de enkla citationstecknen (inga blanksteg får användas). Kommatecknet avslutar egenskapen:

 

1. Bild eller länk

Du kan ange en bild, en bild som är länkad till produktsidan eller en text som är länkad till produktsidan. OBS! Använd absoluta sökvägar som innehåller hela domännamnet!

Stoleken på bilderna i orderformuläret i vårt exempel är 100x70 pixlar. I exemplet nedan visas en bild som är länkad till produktsidan:

Använd TITLE om en informationstext ska visas när muspekaren förs över bilden:

Så här kan resultatet se ut i orderformuläret:

Om du vill använda en text istället för en bild kan det se ut så här:

Så här kan resultatet se ut i orderformuläret:

Om du vill använda en text utan länk kan det se ut så här:

Så här kan resultatet se ut i orderformuläret:

 

2. Artikelnummer

Du kan använda produktens riktiga artikelnummer eller ange ett annat ID som identifierare för produkten:

Så här kan resultatet se ut i orderformuläret:

Om du inte vill ha något produktnummer lämnas innehållet tomt inom de enkla citationstecknen (inga blanksteg får användas). Kommatecknet avslutar egenskapen:

 

3. Produktnamn

Produktnamnet används som rubrik för produkten i orderformuläret:

Så här kan resultatet se ut i orderformuläret:

Formatering av produktnamnet sker i CSS-mallen layout.css:

Formateringen har namnet .lista_produkt:

 

4. Beskrivning av produkten

Så här kan produktbeskrivningen se ut:

Så här kan resultatet se ut i orderformuläret:

Formatering av rubrik, artikelnummer och produktbeskrivningen sker i CSS-mallen layout.css:

Formateringen har namnet .produkt_tabellcell_2:

Vill du använda egna format på del av texten kan du använda HTML-formaterad text direkt i produktbeskrivningen och du kan även använda radbrytning <br />

Så här kan en egen formatering direkt i produktbeskrivningen se ut:

Så här kan resultatet se ut i orderformuläret:

 

5. Pris inklusive moms

Ange priset på produkten inklusive moms och använd INTE kommatecken eller citationstecken.
Rätt:

Fel:

Så här kan resultatet se ut i orderformuläret:

 

6. Vikt i gram

Du kan välja 5 alternativ för frakt i filen config_shop.php:

- Kalkylera fraktkostnad
- Fast fraktkostnad
- Fraktfritt enstaka produkter
- Fraktfritt
- Fraktfritt vid angivet belopp

Kalkylera fraktkostnad

Ange produktens vikt i gram. Om produkten väger 1,5 kg så anger du värdet 1500.

I vårt exempel väger produkten 80 gram:

OBS! Viktigt! Även om du inte använder kalkylen för fraktkostnad måste du ändå ange ett värde för vikt. Du kan då tex ange värdet 100 för alla produkter oavsett vad de väger:

Produktens vikt i gram används när fraktkostnaden räknas ut enligt Postens portotabeller enligt tabellen i filen config_shop.php

 

Fast fraktkostnad

I filen config_shop.php anger du att du inte vill använda kalkylen för fraktkostnad. OBS! Välj också att ta bort visningen av frakt i orderformuläret:

I exemplet ovan gäller nu den fasta fraktkostnaden 50.00 och den extra fraktkostnaden 15.00, dvs totalt 65.00 kr.

Fraktfritt enstaka produkter

Du kan välja att sälja vissa produkter helt fraktfritt genom att ange värdet 0 som vikt. I exemplet nedan anges att produkten ska skickas utan fraktkostnad:

Om kunden väljer fler produkter utöver den fraktfria produkten, utgår fraktkostnad för dessa produkter enligt valen ovan.

Fraktfritt

Du kan ange att alla beställningar ska vara helt utan fraktkostnad.

I filen config_shop.php anger du att alla ordrar är fraktfria:

Fraktfritt vid angivet orderbelopp

Du kan ange en ordersumma som ska uppnås för att fri frakt ska gälla.

I filen config_shop.php anger du att fri frakt ska gälla från angiven ordersumma:

 

7. Om extra formulärfält ska visas

Orderformuläret innehåller inga valbara formulärkontroller där du kan ange storlek och färg eller andra specifika val för en produkt. Du kan istället använda ett formulärfält (textfält) där kunden kan ange den storlek eller färg som önskas. Textfältet visas automatiskt om du anger en text i den sista egenskapen för produkten:

Så här kan resultatet se ut i orderformuläret:

Om du INTE vill visa formulärfältet lämnas innehållet tomt. OBS! Inga blanksteg får användas:

Formatering av formulärfältet sker i CSS-mallen layout.css:

Formateringen har namnet .formfield_specifikation:

 

 

Tips om du har många produkter

WDS Shop och orderformuläret är i första hand anpassat för mindre e-butiker med ett begränsat sortiment. Om du lägger till många produkter blir orderformuläret långt och kan vara svårt att överblicka.

Använd det extra formulärfältet

Orderformuläret innehåller inga valbara formulärkontroller där du kan ange storlek och färg eller andra specifika val för en produkt. Du kan istället använda ett formulärfält (textfält) där kunden kan ange den storlek eller färg som önskas. Textfältet visas automatiskt om du anger en text i den sista egenskapen för produkten (se avsnitt ovan).

Produkter med flera egenskaper som tex storlek, färg, mönster eller andra tillval, kan då visas en gång i orderformuläret istället för upprepade gånger. Kunden kan använda det extra formulärfältet för att ange specifikation av produkten. Det är då extra viktigt att du anger vilka val som kan göras i produktbeskrivningen.

Använd "ankare" <A NAME>

När du länkar från en produktsida till orderformuläret kan du ange att länken ska gå till ett angivet ankare i orderformuläret. I exemplet nedan används A NAME i den första egenskapen (bild eller länk):

Länken från produktsidan till orderformuläret kan se ut så här:

http://dromvavaren.se/bestallning.html#titan_germanium

 

 

Layout på orderformulär och webbshop

När du ändrar layouten för orderformuläret använder du CSS-mallen layout.css:

Vilka delar av orderformulär och webbshop som formateringen påverkar kan du se i namnet på formaten samt i kommentarerna före selektorer:

Läs mer om CSS-mallar i guiden CSS - grunder »

 

 

VISA, MasterCard och direktöverföring från bank

Orderformuläret är konfigurerat för att användas med VISA, MasterCard och direktöverföring från bank. Betalningstjänsten utförs av Payson och du måste öppna ett eget Payson-konto för att kunna använda betalningsmetoderna.

Gå till guiden Payson Kortbetalning och direktbetalning » och skapa ett Payson-konto. Använd samma e-postadress som i din webbshop. Du måste även integrera Payson i din egen webbplats genom att gå till "integrationscenter".

När du erhållit ditt eget AgentID och MD5-nyckel kan du gå vidare enligt nedan.

Alla inställningar gör du i filenconfig_shop.php

Ange ditt AgentID och MD5-nyckel :

Övriga parametrar är konfigurerade och behöver inte ändras.

OBS! Om du använder en annan e-postadress till ditt Payson-konto än till din webbshop måste du ändra variabeln $SellerEmail och ange den adress du använde när du öppnade ditt Payson-konto:

 

Om du INTE vill använda Payson

Om du inte vill använda Payson-batlaningarna måste du inaktivera funktionen genom att ange värdet 0 i variablerna för kortbetalning:

Då måste också ändra i den text som visas i orderbekräftelsen via mail:

 

Betalningsbekräftelse

En bekräftelse på utförd betalning visas när Payson-betalningen slutförts:

Du kan ändra format och textinnehåll i filenpayson/payson_betalning_klar.php

 

Loggfiler med beställningar

Alla beställningar sparas i två olika loggfiler så att du kan följa upp ordrar även om din e-post tillfälligt inte fungerar. En av loggfilerna är separerade med filtertecken så att du kan importera den till en egen databas.

Loggfilerna sparas direkt på din webbserver och du använder FTP-programmet för att öppna, läsa och hämta filerna.

 

Felsökning om det inte fungerar!

OBS! Viktigt! Använd enkla citationstecken 'enkelfnuttar' före och efter alla värden. Dubbla citationstecken "dubbelfnuttar" kan du använda men då endast i texten för värden. Om du tar bort eller lägger till enkla citationstecken 'enkelfnuttar' kan detta resultera i att en vit sida visas i webbläsaren.

Om du får problem kan du läsa mer i guiden Felsökning i PHP och MySQL »

 

 

ZIP-filen med filerna till programmet

Klicka på ikonen nedan för att läsa hela guiden och hämta ZIP-filen!

WDS medlem (WDS member)

 

 

OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!

Du kan beställa tjänsten WDS medlem här »

Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!