Share
Hva du skal skapeFor de som er kjent med WooCommerce, kan du også være klar over salgs-flash-funksjonaliteten. Dette brukes først og fremst når et element er til salgs.
I denne veiledningen vil vi se på hvordan vi kan tilpasse og forbedre WooCommerce-salgs-flash-skjermen for å vise effektiv rabattprosent og endre farge på etiketten basert på prosentandelen.
WooCommerce sälj-flash visualiseres i arkivene og enkeltsidene for salgsprodukter, det vil si produktene som har en salgspris lavere enn vanlig pris.
I dagens system kan brukerne ikke oppfatte Dimensjon-eller kvaliteten på rabatten.
For eksempel er en 70% rabatt mer attraktiv enn en 15% en, men de vises begge av WooCommerce med en enkel salg-flash på produktbildet. For å løse dette problemet vil vi modifisere algoritmen som styrer salg-flashen slik at innholdet (Salg) blir overskrevet av den effektive rabattprosent.
Filen som genererer sale-flash ligger i følgende mappe:
your-site / wp-content / plugns / woocommerce / templates / sløyfe / salg-flash.php
Vanligvis er det ikke en god idé å endre plugin-filer fordi alle endringene vil gå tapt under den første oppdateringen, og deaktivere oppdateringer er ikke et alternativ.
Heldigvis kan vi lage så mange endringer som vi liker på WooCommerce-malene uten å kompromittere integriteten til pluginet, bare ved å kopiere filen i en undermappe av vårt tema som vi vil ringe woocommerce. I vårt tilfelle kopierer vi salg-flash.phpfil, som ligger i:
your-site / wp-content / yourtheme / woocommerce / sløyfe / salg-flash.php
Hver fil i WooCommerce-mappen har prioritet over de opprinnelige malfilene til plugin. På denne måten kan vi være sikre på at ved å oppdatere WooCommerce, mister vi ikke noen av endringene våre.
Merk at hvis du bruker et barntema, må filen kopieres i samme undermappe av barnetemaet.
Vær også oppmerksom på at hvis temaet ditt allerede har en fil yourtheme / woocommerce / sløyfe / salg-flash.php så er det svært sannsynlig at det allerede endrer den opprinnelige oppførselen til salg-flash. I dette tilfellet er det to løsninger:
La oss ta en titt på salg-flash.php fil:
Accentsconagua
is_on_sale ()):?> '. __ ('Salg!', 'Woocommerce'). '', $ post, $ produkt); ?> Koden er veldig enkel: den genererer en span merk med teksten "SALG"Hver gang et objekt er til salgs. Alt vi trenger å gjøre er å gjøre følgende endringer i koden:
is_in_stock ()) tilbake; $ sale_price = get_post_meta ($ produkt-> id, '_pris', sant); $ regular_price = get_post_meta ($ produkt-> id, '_regular_price', true); hvis (tomt ($ regular_price)) // så er dette et variabelt produkt $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variasjon = nytt WC_Product_Variation ($ variation_id); $ regular_price = $ variasjon -> regular_price; $ sale_price = $ variasjon -> sale_price; $ sale = ceiling ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ salg. '%', $ post, $ produkt); ?>
Det første vi må gjøre er å beregne rabatten, og for å gjøre det trenger vi Vanlig pris og Salgs pris. For enkle produkter og grupperte produkter kan vi få denne informasjonen ved å bare bruke de to metafeltene: _pris og _vanlig pris(se rad 5 og 6).
Hvis den oppnådde Vanlig pris er tom, så snakker vi om et variabelt produkt, og i dette tilfellet må vi gjøre som følger:
På dette punktet, alt vi trenger å gjøre er å bruke en enkel formel for å beregne rabatten ved å bruke Vanlig pris og Salgs pris. For å gjøre det enklere kan vi unngå å bruke decimaler ved å avrunde nummeret til nærmeste heltall ved hjelp av ceil (num) funksjon, som i eksempelet jeg nettopp har vist deg, eller ved å avkorte til nærmeste mindre nummer ved hjelp av etasje (num) funksjon.
Vi kan legge til litt farge på løsningen vår ved å bruke en kromatisk skala for å representere rabattprosenten. Grønn er 0% og rød er 100%.
De to farger har følgende RGBkoder:
Med disse enkle formlene kan vi legge til den røde kanalen og ta fra den grønne kanalen.
Den blå kanalen forblir uendret; det vil alltid være null.
R = (255 * salg) / 100G = (255 * (100-salg)) / 100B = 0Når vi har de røde og grønne verdiene, kan vi endre salg-flash bakgrunn ved å legge regelen direkte til span stikkord.
Den fulle koden er følgende:
is_in_stock ()) tilbake; $ sale_price = get_post_meta ($ produkt-> id, '_pris', sant); $ regular_price = get_post_meta ($ produkt-> id, '_regular_price', true); hvis (tomt ($ regular_price)) // så er dette et variabelt produkt $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variasjon = nytt WC_Product_Variation ($ variation_id); $ regular_price = $ variasjon -> regular_price; $ sale_price = $ variasjon -> sale_price; $ sale = ceiling ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ salg. '%', $ post, $ produkt); ?>
Og resultatet:
For de som har fulgt med, kan du spørre hvorfor vi setter bakgrunn: ingen før du setter inn bakgrunnsfarge?
I dette spesielle tilfellet hadde stilarket en regel for bakgrunneiendom som alltid hadde prioritet over bakgrunnsfarge. Den riktige måten å gjøre dette på, ville ha vært å endre stilarket og overskrive eller avbryte regelen som angir bakgrunnen til salg-flash.
Generelt sett bør du velge proprietene og stilreglene som du vil overstyre eller endre med verktøy som Firebug. Når du forstår hvor og hva du skal endre, må du prøve å ikke bruke inline-stiler. I stedet prøver du å bruke et eksternt stilark.
I dette tilfellet har vi et unntak fra regelen. RGBkoden beregnes gjennom en veldig enkel algoritme, og du kan alltid endre algoritmen ved å endre noen få linjer med PHP-kode i stedet for å endre hundrevis av CSSklasser.
På dette tidspunktet er tilpasningen av salg-flash gjort. Vi har endret malen som gjør visualiseringen av den aktuelle etiketten.
I stedet for å endre den opprinnelige filen som finnes i plugin-mappen, brukte vi en kopi i vår temamappe for å sikre de endringene vi nettopp har gjort i tilfelle oppdateringer av plugin-modulen.
Vanligvis er dette en regel som gjelder for alle filene i malmappen til WooCommerce-plugin. Jeg håper du har funnet denne opplæringen nyttig, ikke bare for å forbedre salget-flashens oppførsel, men også for å bedre forstå hvordan noen av WooCommerce-mekanismene jobber.
