Vinnaren i pepparkakshustävlingen!
2024-04-02, 12:36
  #1
Medlem
Hej!
Har en webbshop där jag integrerat Klarnas Checkout/Postnord med ett Wordpress theme jag skaffat.
Dessvärre fungerar inte mitt theme ihop med Klarna Checkout, detta eftersom checkout sidan för mitt theme är blockbaserat och Klarna Checkout fungerar inte ihop med blocks utan "endast bara" med Woocommerce egna klassiska checkout sida.

Nu vill jag dock fixa så att layouten/sidan ser snyggare ut på denna checkout sida.
Jag är inte superduktig gällande CSS/HTML/JS, men lite kan jag.

Såhär ser checkout sidan ut i dagsläget:
https://ibb.co/j4Xwnky

Önskvärt är att få till designen till något liknande:
https://docs.litium.com/storage/ma/a...298/Klarna.png

Är det något som kan göras enbart med hjälp av CSS eller krävs det att jag går in i mitt themes källkod och editera där?
Någon som har tips och guide på hur man kan anpassa Klarna Checkoout sidan?
Citera
2024-04-03, 16:28
  #2
Medlem
webbutvecklarens avatar
Citat:
Ursprungligen postat av wanh
Hej!
Har en webbshop där jag integrerat Klarnas Checkout/Postnord med ett Wordpress theme jag skaffat.
Dessvärre fungerar inte mitt theme ihop med Klarna Checkout, detta eftersom checkout sidan för mitt theme är blockbaserat och Klarna Checkout fungerar inte ihop med blocks utan "endast bara" med Woocommerce egna klassiska checkout sida.

Nu vill jag dock fixa så att layouten/sidan ser snyggare ut på denna checkout sida.
Jag är inte superduktig gällande CSS/HTML/JS, men lite kan jag.

Såhär ser checkout sidan ut i dagsläget:
https://ibb.co/j4Xwnky

Önskvärt är att få till designen till något liknande:
https://docs.litium.com/storage/ma/a...298/Klarna.png

Är det något som kan göras enbart med hjälp av CSS eller krävs det att jag går in i mitt themes källkod och editera där?
Någon som har tips och guide på hur man kan anpassa Klarna Checkoout sidan?
Antar denna länk borde hjälpa dig något?

https://docs.klarna.com/klarna-check...customization/
Citera
2024-04-03, 16:35
  #3
Medlem
Avayas avatar
Jag tror tyvärr inte du kan använda Klarna tillsammans med WooCommerce blockbaserade tema.

Jag försökte integrera en viss PayPal checkout men fick som svar att jag var tvungen att byta från blockbaserat tema till klassiskt tema för att få det att fungera. Fick också som svar att "de jobbar på att göra checkouten kompitabel" med block-temat men kunde inte ge någon ETA när det blir tillgängligt
Citera
2024-04-04, 06:40
  #4
Medlem
Jenssens avatar
Citat:
Ursprungligen postat av wanh
Hej!
Har en webbshop där jag integrerat Klarnas Checkout/Postnord med ett Wordpress theme jag skaffat.
Dessvärre fungerar inte mitt theme ihop med Klarna Checkout, detta eftersom checkout sidan för mitt theme är blockbaserat och Klarna Checkout fungerar inte ihop med blocks utan "endast bara" med Woocommerce egna klassiska checkout sida.

Nu vill jag dock fixa så att layouten/sidan ser snyggare ut på denna checkout sida.
Jag är inte superduktig gällande CSS/HTML/JS, men lite kan jag.

Såhär ser checkout sidan ut i dagsläget:
https://ibb.co/j4Xwnky

Önskvärt är att få till designen till något liknande:
https://docs.litium.com/storage/ma/a...298/Klarna.png

Är det något som kan göras enbart med hjälp av CSS eller krävs det att jag går in i mitt themes källkod och editera där?
Någon som har tips och guide på hur man kan anpassa Klarna Checkoout sidan?

Hej!

Det ska gå att ta bort "Order review" så Klarna Checkout kan utnyttja hela sidans bredd.
Klistra in koden nedanför i functions.php så ska det fungera. Eller kopiera checkout/review-order.php mallen till ditt "child theme" (om du inte har "child theme" får du skaffa det) och ändra i mallen. Du behöver inte göra båda utan en metod räcker.
Kod:
remove_action'woocommerce_checkout_order_review''woocommerce_order_review'10 ); 

Den här CSS koden tvingar layouten till en kolumn istället för två som är standard.
Kod:
.woocommerce .woocommerce-checkout .col2-set .col-1,
.
woocommerce .woocommerce-checkout .col2-set .col-{
    
width100% !important;
}

.
woocommerce .woocommerce-checkout .col2-set .col-{
    
margin-bottom30px;


Vad har webbshopen för url?
Citera
2024-04-04, 23:05
  #5
Medlem
Citat:
Ursprungligen postat av webbutvecklaren
Antar denna länk borde hjälpa dig något?

https://docs.klarna.com/klarna-check...customization/

Har läst igenom sidan men vet inte riktigt vilken fil jag ska editera i och hur jag ska placera php/java koderna i filen.

Exempelvis så står det att man ska infoga följande rader $orderData['options']['color_button'] = "#ff0000" för att göra en knapp röd.
Men den koden verkar inte går att sätta in i någon php-fil i Wordpress utan att det varnar om fel.
Citera
2024-04-04, 23:17
  #6
Medlem
Citat:
Ursprungligen postat av Jenssen
Kod:
remove_action'woocommerce_checkout_order_review''woocommerce_order_review'10 ); 

I Wocommerce kan man välja att ha Order Review och Klarna Checkout i en enda kolumn eller i 2 kolumner.
Men kan även välja att visa/inte visa Order Review.
Oavsett om jag väljer att ha båda i samma kolumn eller bara visa Klarna Checkout, så nyttjar Klarna Checkout fortfarande inte hela bredden utan är lika "smal".

Så frågan är om man kan använda sig av CSS och använder elementen som nämns https://docs.klarna.com/klarna-check...customization/ för att anpassa Klarna Checkout efter eget behov?
Eller måste allting göras i PHP/Java filerna i pluginet?

Såhär ser det ut när Order Review och Klarna Checkout är i en kolumn:
https://ibb.co/jk9vx9r

Jag lyckades med lite hjälp av CSS få Order review att nyttja hela bredden.
Men kan inte rubba Klarna Checkout alls med enbart CSS...
Citera
2024-04-05, 04:02
  #7
Medlem
Jenssens avatar
Citat:
Ursprungligen postat av wanh
I Wocommerce kan man välja att ha Order Review och Klarna Checkout i en enda kolumn eller i 2 kolumner.
Men kan även välja att visa/inte visa Order Review.
Oavsett om jag väljer att ha båda i samma kolumn eller bara visa Klarna Checkout, så nyttjar Klarna Checkout fortfarande inte hela bredden utan är lika "smal".

Så frågan är om man kan använda sig av CSS och använder elementen som nämns https://docs.klarna.com/klarna-check...customization/ för att anpassa Klarna Checkout efter eget behov?
Eller måste allting göras i PHP/Java filerna i pluginet?

Såhär ser det ut när Order Review och Klarna Checkout är i en kolumn:
https://ibb.co/jk9vx9r

Jag lyckades med lite hjälp av CSS få Order review att nyttja hela bredden.
Men kan inte rubba Klarna Checkout alls med enbart CSS...

Här ser man vilken url Klarnas Checkout iframe har. https://imgur.com/uTKNm9c
Hade det varit samma domän så hade det varit lätt löst.
Citera
2024-04-05, 14:21
  #8
Medlem
Citat:
Ursprungligen postat av Jenssen
Här ser man vilken url Klarnas Checkout iframe har. https://imgur.com/uTKNm9c
Hade det varit samma domän så hade det varit lätt löst.

Jag har URL till mitt Klarnas Checkout iframe här.

Hur hjälper detta menar du?
Det verkar som att folk styr utseendet på Klarna Checkout genom att editera elementen nånstans än via CSS, vilken fil de styr ifrån är dock oklart.
Har försökt med att justera CSS klasserna som visas i developers vyn men det går inte att rubba layouten på Klarna Checkout.
Citera
2024-04-05, 14:30
  #9
Medlem
Att editera i html koden i developer vyn funkar bra, där är det inga problem med att sätta "width:100%" och låta Klarna Checkout nyttja (nästan) hela bredden.
Men jag förstår fortfarande inte hur jag kan styra dessa element i Wordpress, i vilken fil styr man egentligen layouten på Klarna Checkout?

https://ibb.co/9GQngmy
Citera
2024-04-10, 12:17
  #10
Medlem
Jenssens avatar
Citat:
Ursprungligen postat av wanh
Att editera i html koden i developer vyn funkar bra, där är det inga problem med att sätta "width:100%" och låta Klarna Checkout nyttja (nästan) hela bredden.
Men jag förstår fortfarande inte hur jag kan styra dessa element i Wordpress, i vilken fil styr man egentligen layouten på Klarna Checkout?

https://ibb.co/9GQngmy
Här kan du läsa om hur du ändrar CSS innanför en iframe som Klarna Checkout är. Allt du behöver veta står där 😊https://docs.krokedil.com/klarna-che...le-css-changes
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback