Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling

Wordpress öka produktmängd med knappar hjääälp

Svara
2018-05-17, 19:50
  #1
Behappypro
Medlem
Hej!
Jag sitter verkligen i ett problem. Sitter med en sida och jag vill införa quantity knappar, alltså knappar som ökar och minskar mängden av en produkt. Det är en wordpress sida med woocommerce och jag har sökt överallt för att hitta något ajax, javascript, php etc för detta ändamål. Ingenting verkar finnas i form av knappar. Nedan bifogar jag ett exempel på hur jag menar. Är det någon underbar själ som kommit i kontakt med ett vettigt plugin eller kod för en sådan funktion. Jag kan dessvärre inte Javascript och därför har jag problem att skapa ett själv. De plugin som finns på wordpress har jag alla testat och ingen ger det resultat jag söker. Är ni säkra på att ett plugin kan leverera mitt resultatet så länka gärna.

Exempel: https://imgur.com/a/1HcG5fw

Uppskattar verkligen all hjälp eller tips jag kan få!
Citera
2018-05-17, 20:20
  #2
Nich
Medlem
Borde inte vara så svårt. Dock bör nog lösningen implementeras i ditt tema på något sätt. Vad använder du för tema? Kan du länka?
Citera
2018-05-17, 20:29
  #3
Behappypro
Medlem
Citat:
Ursprungligen postat av Nich
Borde inte vara så svårt. Dock bör nog lösningen implementeras i ditt tema på något sätt. Vad använder du för tema? Kan du länka?

Tack för ditt svar och intresse. Temat jag använder heter Bellaria https://themeforest.net/item/bellaria-a-delicious-cakes-and-bakery-wordpress-theme/21010373

Allting som finns på internet är hur man skapar en quantity box där man istället skriver nummer. Jag vill ha knappar och flera på internet har samma problem med ingen lösning.
Citera
2018-05-17, 23:13
  #4
Nich
Medlem
Citat:
Ursprungligen postat av Behappypro
Tack för ditt svar och intresse. Temat jag använder heter Bellaria https://themeforest.net/item/bellaria-a-delicious-cakes-and-bakery-wordpress-theme/21010373

Allting som finns på internet är hur man skapar en quantity box där man istället skriver nummer. Jag vill ha knappar och flera på internet har samma problem med ingen lösning.

Om du redan har ett input-fält, så är det inte allt för svårt att koppla två knappar till det. Så här kan en enkel lösning se ut:

HTML-kod: 
<button onclick="changeQuantity(-1);">-</button>
<input type="number" id="quantity" min="0" max="10" value="1">
<button onclick="changeQuantity(1);">+</button>

Kod: 
function changeQuantity( change ) {

  var quantity = document.getElementById( 'quantity' );
  var new_quantity = parseInt( quantity.value ) + change;
  
  if( new_quantity >= quantity.min && new_quantity <= quantity.max  ) {
  	
    quantity.value = new_quantity;
    
  }
  
}

Livedemo: https://jsfiddle.net/q9k6xLj3/
Citera
2018-05-20, 03:07
  #5
Behappypro
Medlem
Citat:
Ursprungligen postat av Nich
Om du redan har ett input-fält, så är det inte allt för svårt att koppla två knappar till det. Så här kan en enkel lösning se ut:

HTML-kod: 
<button onclick="changeQuantity(-1);">-</button>
<input type="number" id="quantity" min="0" max="10" value="1">
<button onclick="changeQuantity(1);">+</button>

Kod: 
function changeQuantity( change ) {

  var quantity = document.getElementById( 'quantity' );
  var new_quantity = parseInt( quantity.value ) + change;
  
  if( new_quantity >= quantity.min && new_quantity <= quantity.max  ) {
  	
    quantity.value = new_quantity;
    
  }
  
}

Livedemo: https://jsfiddle.net/q9k6xLj3/

Tusen tack för ditt svar!
Jag har suttit en dag nu för att försöka importera det med woocommerce och wordpress men det verkar inte vilja fungera. Jag har istället kommit med en lösning med hjälp av två plugin "Themes Zone WC Ajax Quantity" samt "quantity-field-on-shop-page-for-woocommerce". Tillsammans har jag lagt ihop denna kod: https://codeshare.io/5Db0LZ .

Sidan ser nu ut på detta vis: http://karamellfarbrorn.se/product-category/losgodis/

Mitt problem är att som du ser så läggs quantity boxen över all text. Knapparna har jag lyckats få ner och om jag tar ner boxen via denna css kod:
HTML-kod: 
.woocommerce .quantity .input-text {
	margin-top: 120px;
}
så ändras den även på produktsidan vilket förstör produktsidan. Hur ska jag lösa detta? Hur får jag knapparna och quantity boxen att hamna under all text men samtidigt få den normal position på produktsidan?

Tack på förhand!
Citera
Svara

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in