WOOOCOMMERCE’de istek listesi nasıl eklenir

WooCommerce’a bir arzu eklemek ister misiniz? WooCommerce’in bir arzu listesi işlevine sahip olmadığını belirtmek önemlidir. Bu, kullanıcıların belirli ürünleri işaretlemelerine, gelecekteki referanslar için listeye eklemelerine olanak tanır. Amazon gibi popüler mağazalar, çevrimiçi alıcıların bazı arzu listeleri oluşturmasına izin verir. WOOCOMMERCE’de Wish Liste Nasıl Eklenir Bu öğreticide, Woocommerce için bir arzu listesi işlevi oluşturacağız. Ajax, WordPress Rest API ve SVG grafiğini kullanacağız. Gönderinin sonunda, bir arzu listesi eklentisi oluşturabilirsiniz.
Nasıl başarabileceğinizi görelim. İlk Arzu Listesi eklentisini yaparak, bir eklenti yapısı yapmamız gerekir. Aynı adla “WishList” ve PHP dosyası adlı bir klasör oluşturun. Bundan sonra, PHP dosyasına aşağıdaki görüntüleri ekleyin:
/*
Eklenti Adı: WooCommerce Wish List
Açıklama: Woocommerce için Ajax Wish Liste
Yazar: Njengah
Sürüm: 1.0
*/
if (! Tanımlı (‘abspath’)) {
çıkış; // doğrudan erişilebilirse çıkın
}
Yapıyı eklemek şimdi işlevler ekleme zamanı. Yapacağımız şey bu:
Wooocommerce kancasını kullanarak bir daire ve bir sayfada ürüne bir arzu listesi anahtarı ekleyin
Arzu listesine eklenen ürünü barındırmak için bir arzu listesi kısa kodu oluşturun
Kullanıcı profilinde bir arzu listesi özel seçeneği oluşturun
Tüm eklenti kodlarının eklenti için init eylemine gireceğini belirtmek önemlidir.
Başlamadan önce, WooCommerce eklentisinin etkin olduğundan emin olmalıyız. Eklentinin ayrıntılarından sonra aşağıdaki kodu ekleyin:
Add_action (‘init’, ‘plugin_init’);
function plugin_init () {
if (class_exists (“wooocommerce”))) {// eklenti kodu burada başlar
}
}
Bir sonraki adım, ana eklenti dosyasına aşağıdaki kodu ekleyerek komut dosyası ve eklenti stilimizi sıralamaktır: işlev wishList_plugin_scripts_styles () {)
wp_enqueue_style (‘wishlist style’, eklentiler_url (‘/css/style.css’, __file__), array (), ‘1.0.0’);
wp_enqueue_script (‘wishList-main’, plugins_url (‘/js/main.js’, __file__), dizi (‘jQuery’), ”, true);
WP_LOCALICAL_SCRINK (
‘Oynama’,
‘OPT’,
dizi (
‘Ajaxurl’ => admin_url (‘admin-ajax.php’),
‘Ajaxpost’ => admin_url (‘admin-post.php’),
‘resturl’ => rest_url (‘wp/v2/ürün’),
‘ShopName’ => sendize_title_with_dashes (sendize_title_with_dashes (get_bloginfo (‘ad’)),,
‘Inwishlist’ => ESC_HTML __ (“Zaten WishList”, “Text-Domain”),
‘RemoveWishList’ => ESC_HTML __ (“WishList’ten Kaldır”, “Text-Domain”),,
‘Buttonxt’ => esc_html __ (“detaylar”, “text-alan”),
‘Hata’ => esc_html __ (“Bir şeyler ters gitti, WishList’e ekleyemedi”, “metin-alan”),
‘NowishList’ => ESC_HTML __ (“İstek listesi bulunamadı”, “metin alanı”),
)
);
}
Add_action (‘wp_enqueue_scripts’, ‘wishList_plugin_scripts_styles’);
Bu kod bölümünde, eklentiler için ana stil.css dosyasını ve main.js dosyasını bıraktık. Ayrıca şu şekilde çalışmak için Main.js dosyasına çeşitli parametrelere devam ettik:
Ajaxurl
Ajaxpost
kalıntı
Mağaza adı
Kodu ekledikten sonra bir CSS klasörü oluşturun ve JS oluşturun ve uygun dosyayı CSS klasöründeki style.css ve js klasöründeki main.js klasörüne yerleştirin. Bir geçiş arzusu listesini ilişkilendirme arzusu listesini ilişkilendirin, başlangıçta aşağıdaki kodu ekleyin: // Ürün eylemine istek listesini ekle
Add_action (‘wooocommerce_beefore_shop_loop_item_title’, ‘wishlist_toggle’, 15);
Add_action (‘wooocommerce_single_product_summary’, ‘wishlist_toggle’, 25);
WishList_toggle () işlevi {
Global $ ürün;
echo ”. ESC_ATTR __ (“WishList’e Ekle”, “Text-Domain”). ESC_ATTR ($ ürün-> get_id ()). “” Href = “#” title = “‘. ESC_ATTR __ (” WishList’e ekle “,” text-domain “).” İcon.svg’, __file__)). ‘‘;
}
Yukarıdaki kod, döngüdeki her ürüne ve her bir ürün düzenine bir arzu listesi ekler. Woocommerce_beefore_shop_lop_item_title ve woocommerce_single_product_summary kancaları kullandık.
SVG simgesini ekleyin Bir sonraki adım bir SVG simgesi eklemektir. Eklenti klasöründe bir resim klasörü oluşturun ve aşağıdaki icon.svg’yi yerleştirin:

>
/>

SVG animasyonunun üç durumu vardır:
Varsayılan: Kalp Yolu
İşlem: Yükleme Grubu (G etiketi)
Son: Grubu Kontrol Edin (G etiketi)
Simgeyi düzenlemek için style.css dosyasını açın ve aşağıdaki kodu sopa:
.WishList-Toggle {
Ekran bloğu;
Pozisyon: Mutlak;
Üst: 16px;
Sol: 16px;
Z-endeks: 5;
Genişlik: 24 piksel;
Yükseklik: 24 piksel;
Anahat: Yok;
Sınır: Yok;
}
.WishList-Title {
Görüntü yok;
}
.Entry-Summary. WisList-Toggle {
Pozisyon: göreceli;
Üst: 0;
Sol: 0;
Ekran: satır içi blok;
Dikey-High: Orta;
Marj-Alt: 8px;
}
.Entry-Summary. WishList-Title {
Ekran: satır içi blok;
Dikey-High: Orta;
Marj-sağ: 8px;
Marj-Alt: 8px;
}
.WishList-Toggle: Focus {
Anahat: Yok;
Sınır: Yok;
}
.Wishlist-toggle svg {
Dolgu: #bdbdbd;
Geçiş: 200 ms kolaylık;
}
.WishList-Toggle: Hover SVG,
.Wishlist-toggle.active svg {
Dolgu:#000000;
}
.WishList-Toggle SVG. Yükleme,
.Wishlist-toggle svg .Check {
Opaklık: 0;
}
.Wishlist-toggle.active svg .Check {
Opaklık: 1;
}
.Wishlist-toggle.active svg .Heart {
Opaklık: 0;
}
.Wishlist-toggle.Loading svg. yükleme,
.WishList-Stable.Loading: Önce {
Animasyon: 500ms 0ms yüklenmesi sonsuz normal doğrusal;
Dönüşüm Origin: Merkez;
Opaklık: 1;
}
.Wishlist-toggle.loading svg .Heart {
Opaklık: 0;
}
@keyframes yükleme {
{Dönüşüm: rotate (0deg);} to {dönüşüm: rotate (360deg);}
}
SVG kalp yolumuzu gösterdik. Kullanıcı üzerine tıkladığında, kalp yolunu gizleyeceğiz ve yükleme yolunu göstereceğiz.
Yüklendikten sonra, ürünün istek listesine başarıyla eklendiğini gösteren bir onay işareti görüntüleyeceğiz. Kısa Bir Arzu Kodu Tablosu Oluşturma Şimdi bir WishList Tablosu Kısa Kodu oluşturmamız gerekiyor. Bu kısa kodu herhangi bir sayfaya ekleyebilirsiniz, arzu listesi öğesi görünür. Bunu, Action eklentisine aşağıdaki kodu ekleyerek yapacağız INIT: // WishList Tablo Kısa Kodu
add_shortcode (‘WishList’, ‘WishList’);
Function WishList ($ atts, $ content = null) {
Extract (Shortcode_atts (Array (), $ atts));
Dönüş ‘

</h için bırakıldı.
‘. Esc_html __ (“ad”, “metin-alan”).’
‘. Esc_html __ (“fiyat”, “metin-alan”).’
‘. Esc_html __ (“stok”, “metin alanı”).’
</h için sol.

‘;
}
Bundan sonra bir Arzu Listesi sayfası oluşturmalıyız.
Gösterge tablosundan, “Desire” adlı bir sayfa oluşturun ve içinde kısa kod [arzu listesi] girin. İstek listesi sayfasını açarsanız, boş bir tablo görürsünüz. Bir sonraki adım, Arzu Listesi öğesini düzenlemektir. Bunu başarmak için, style.css open ve aşağıdaki kodu ekleyin: .WishList-master {
Genişlik:%100;
Pozisyon: göreceli;
}
.WishList-Stable.Loading: Sonra {
Ekran bloğu;
Genişlik:%100;
Yükseklik:%100; pozisyon: mutlak;
Üst: 0;
Sol: 0;
İçerik: “”;
Arka plan: #ffffff;
Opaklık: 0.5;
Z-endeks: 5;
}
.WishList-Stable.Loading: Önce {
Ekran bloğu;
Genişlik: 24 piksel;
Yükseklik: 24 piksel;
Pozisyon: Mutlak;
Üst:%50;
Sol:%50;
Marj -Top: -12px;
Marj -sol: -12px;
İçerik: “”;
Arka plan-image: url (‘../ görüntüler/ yükleme.svg’);
Arka Plan-Tekrar: Yenilenmez;
Arka plan boyutu:%100;
Z-endeks: 6;
}
.WishList-Stable TD {
Pozisyon: göreceli;
}
.Wishlist-masa A.Details {
Dolgu: 4px 16px;
Arka plan: #000000;
Renk: #ffffff;
Metin-align: merkez;
Sınır: Yok! Önemli
}
.Wishlist-masa A.Wishlist-Remove {
Ekran bloğu;
Genişlik: 24 piksel;
Yükseklik: 24 piksel;
Pozisyon: Mutlak;
Üst:%50;
Sol:%50;
Marj -Top: -12px;
Marj -sol: -12px;
Arka plan-image: url (‘../ image/ remove.svg’);
Arka Plan-Tekrar: Yenilenmez;
Arka plan boyutu:%100;
Z-endeks: 6;
Sınır: Yok;
Opaklık: 0;
}
.WishList-Table TD: Hover & gt; A.Wishlist-Remove {
Opaklık: 1;
}
Ardından, görüntü klasörüne bir yükleme.svg görüntüsü ekleyin:

Kullanıcı profilindeki özel istek listesi seçenekleri Init eylemine aşağıdaki kodu ekleyin:
// Kullanıcı profilindeki WishList seçeneği
add_ace (‘show_user_profile’, ‘wishList_user_profile_field’);
add_ace (‘edit_user_profile’, ‘wishList_user_profile_field’);
WishList_user_profile_field ($ kullanıcı) işlevi {?>

</hh

<input type = "text" name = "wishlist" id = "wishList" değer = " id);>” class = “normal metin” />

<? Php}
Add_action ('kişisel_options_update', 'save_wishlist_user_profile_field');
add_ace ('edit_user_profile_update', 'save_wishlist_user_profile_field');
Function sour_wishlist_user_profile_field ($ user_id) {
if (! current_user_can ('edit_user', $ user_id) {
yanlış döndür;
}
update_user_meta ($ user_id, 'WishList', $ _Post ['WishList']);
}
Şimdi Güçlendirin Önemli bir parça ekledik, açmaya hazırız. Main.js dosyasını açın ve aşağıdaki kodu girin:
(işlev ($) {
"Katı kullan";
}) (jQuery);
Bir sonraki adım gerekli verileri toplamak ve birkaç değişken yapmaktır: var shopName = opt.shopname+'-WishList',
inwishlist = opt.inwishlist,
restUll = opt.resturl,
Wishlist = yeni dizi,

ls = seansStorage.getItem (ShopName),
Logggeden = ($ (‘gövde’). Hasclass (‘günlüğe kaydedilmiş’))? Doğru yanlış,
userData = ”;
Kullanıcı girerse:
Ajax ile geçerli kullanıcı verilerini alın
Arzu listesini başarıyla güncellerseniz
Arzu Listesi öğesini vurgulayın
Yerel oturumları/depolamayı sil
Geliştiricinin konsolunda bir hata mesajı görüntüleyemezse
if (loggeden) {
// Geçerli kullanıcı verilerini getirin
$ .Ajax ({
Tür: ‘Post’,
URL: Opt.Ajaxurl,
Veri: {
‘Aksiyon’: ‘fetch_user_data’,
‘Datatype’: ‘JSON’
},
Başarı: işlev (veri) {
userData = json.parse (veri);
if (typeof (userData [‘wishList’])! = ‘tanımsız’ && userData [‘wishList’]! = null && userData [‘WishList’]! = “”) {“) {
var userWishList = userData [‘WishList’];
userWishList = userWishlist.split (‘,’);
if (wishlist.length) {
WishList = WishList.cum (UserWishList);
$ .Ajax ({
Tür: ‘Post’,
URL: Opt.AjaxPost,
veri:{
Eylem: ‘USER_WISHLIST_UPDATE’,
user_id: userdata [‘user_id’],
Wishlist: wishlist.jin (‘,’),
}
});
} başka {
WishList = userWishList;
}
WishList = WishList.Unique ();
FightleWishList (WishList, InwishList);
SessionStorage.RemoveItem (ShopName);
} başka {
if (typeof (ls)! = ‘tanımsız’ && ls! = null) {ls = ls.split (‘,’);
ls = ls.unique ();
WishList = LS;
}
$ .Ajax ({
Tür: ‘Post’,
URL: Opt.AjaxPost,
veri:{
Eylem: ‘USER_WISHLIST_UPDATE’,
user_id: userdata [‘user_id’],
Wishlist: wishlist.jin (‘,’),
}
})
.Done (işlev (yanıt) {
FightleWishList (WishList, InwishList);
SessionStorage.RemoveItem (ShopName);
});
}
},
Hata: function () {
console.log (‘Kullanıcı verisi döndürmez’);
}
});
}
Kullanıcı misafirse, yerel oturum/depolama alanından arzuların bir listesini alıyoruz {
if (typeof (ls)! = ‘tanımsız’ && ls! = null) {
Ls = ls.split (‘,’);
ls = ls.unique ();
WishList = LS;
}
}
Şimdi bir çift Ajax ve birkaç yardımcı fonksiyonumuz var. İlk Ajax isteği, WordPress’ten bir kullanıcı kimliği ve kullanıcı arzusu listesi verileri alır. Bunu eklenti kodu dosyasına eklenen özel Ajax eylemi ile başarabilirsiniz: // Geçerli kullanıcı verilerini alın
Fetch_user_data () işlevi {
if (is_user_logged_in ()) {
$ current_user = wp_get_current_user ();
$ current_user_wishlist = get_user_meta ($ current_user-> id, ‘wishList’, true);
echo json_encode (Array (‘user_id’ => $ current_user-> id, ‘wishList’ => $ current_user_wishlist));
}
ölmek ();
}
Add_action (‘wp_ajax_fetch_user_data’, ‘fetch_user_data’);
Add_action (‘wp_ajax_nopriv_fetch_user_data’, ‘fetch_user_data’);
Bir sonraki istek, oturum/local: ffunction update_wishlist_ajax () {{
if (isset ($ _ post [“user_id”]) &&! boş ($ _ post [“user_id”]))))) {
$ user_id = $ _post [“user_id”];
$ user_obj = get_user_by (‘id’, $ user_id);
if (! Is_wp_error ($ user_obj) && is_object ($ user_obj) {
update_user_meta ($ user_id, ‘WishList’, $ _Post [“WishList”]);
}
}
ölmek ();
}
Add_action (‘admin_post_nopriv_user_wishlist_update’, ‘update_wishlist_ajax’);
Add_action (‘admin_post_user_wishlist_update’, ‘update_wishlist_ajax’);
Yardımcı İşlev Olay bölümüne gitmeden önce, yardımcı dizimizin işlevi hakkında daha fazla bilgi edelim.pototip.unique = function () {) {) {
This.filter (fonksiyon (değer, dizin, self) {
Self.Indexof (değer) === dizin;
});
}
İsinArray işlevi (değer, dizi) {return array.indexof (değer)> -1;}
İşlev onwishListComplete (hedef, başlık) {
SetTimeout (function () {
hedef
.Removeclass (‘yükleme’)
.Addclass (‘aktif’)
.attr (‘başlık’, başlık);
}, 800);
}
Function FightleWishlist (WishList, Title) {
$ (‘. WishList-toggle’). Her biri (function () {
var $ this = $ (this);
Var currentproduct = $ this. Data (‘ürün’);
CurrentProduct = currentProduct.Tosting ();
İf (isinArray (currentProduct, WishList)) {
$ this.addclass (‘aktif’). attr (‘başlık’, başlık);
}
});
}
İlk hizmetçi işlevi, kopyayı kaldırarak benzersiz bir dizi yapar. Öte yandan, ikincisi verilen değerin verilen dizide olup olmadığını kontrol eder. Son işlev, öğe arzu listesine eklendiğinde ve son olarak arzu listesindeki öğeleri gösterdiğinde gerçekleştirilir. Ekle Bir sonraki adım, gerçek işlevselliği etkinleştirmek için arzu listesine bir tıklama eklemektir. Mağaza sayfasına giderseniz, tarayıcıyı yenilediyseniz ve herhangi bir istek listesi anahtarını tıklatırsanız, çalıştığını görürsünüz! $ (‘. WishList-toggle’). Her biri (function () {var $ this = $ (this);
Var currentproduct = $ this. Data (‘ürün’);
CurrentProduct = currentProduct.Tosting ();
if (! Loggeden && isinArray (currentProduct, WishList)) {
$ this.addclass (‘aktif’). attr (‘başlık’, inwishlist);
}
$ (this) .on (‘tıklayın’, işlev (e) {
E.preventDefault ();
if (! $ this.hasclass (‘aktif’) &&! $ this.hasclass (‘yükleme’)) {
$ this.addclass (‘yükleme’);
wishlist.push (currentProduct);
WishList = WishList.Unique ();
if (loggeden) {
// Kullanıcı Kimliği Al
if (userData [‘user_id’]) {
$ .Ajax ({
Tür: ‘Post’,
URL: Opt.AjaxPost,
veri:{
Eylem: ‘USER_WISHLIST_UPDATE’,
user_id: userdata [‘user_id’],
Wishlist: wishlist.jin (‘,’),
}
})
.Done (işlev (yanıt) {
onwishListComplete ($ this, inwishlist);
})
.Fail (işlev (veri) {
Uyarı (Opt.Error);
});
}
} başka {
SessionStorage.setItem (ShopName, WishList.Tosting ());
onwishListComplete ($ this, inwishlist);
}
}
});
});
Arzu listesindeki öğelerin listesi Sarma işlevimizin altındaki Main.js’e aşağıdaki kodu ekleyin: setTimeout (function () {if (wishList.Length) {
restUll += ‘? Inslue =’ +wishList.jin (‘,’);
restUll += ‘& per_page =’ +wishList.Length;
$ .Ajax ({
DataType: ‘JSON’,
URL: RESTURL
})
.Done (işlev (yanıt) {
$ (‘. WishList-tables’). Her biri (function () {
var $ this = $ (this);
$ .EACH (yanıt, işlev (dizin, nesne) {
$ this.append (‘
‘+Object.image+’ ‘+object.title »rended”]+’ ‘+object.price+’ ‘+object.stock+’ ‘> ‘+opt.buttontext+’

‘);
});
});
})
.Fail (işlev (yanıt) {
Alert (Opt.NowishList);
})
. Aways (işlev (yanıt) {
$ (‘. WishList-tables’). Her biri (function () {
$ (bu). Removeclass (‘yükleme’);
});
});
} başka {
$ (‘. WishList-tables’). Her biri (function () {
$ (bu). Removeclass (‘yükleme’);
});
}
}, 1000);
Burada API dinlenmesi için iki seçeneğimiz var:
WordPress Rest API’sini Kullanma
WooCommerce API dinlenmesini kullanarak.
Ana eklenti dosyasını açın ve alt kısmın altındaki aşağıdaki kodu ekleyin: // REST FIRCH’ı genişletin
İşlev rest_register_fields () {
Register_rest_field (‘ürün’,
‘Fiyat’,
dizi (
‘get_callback’ => ‘rest_price’,
‘update_callback’ => null,
‘Şema’ => null)
);
Register_rest_field (‘ürün’,
‘Stoklamak’,
dizi (
‘get_callback’ => ‘rest_stock’,
‘update_callback’ => null,
‘Şema’ => NULL
)
);
Register_rest_field (‘ürün’,
‘görüntü’,
dizi (
‘get_callback’ => ‘rest_img’,
‘update_callback’ => null,
‘Şema’ => NULL
)
);
}
Add_action (‘rest_api_init’, ‘rest_register_fields’);
İşlev rest_price ($ object, $ field_name, $ istek) {
Global $ ürün;
$ id = $ ürün-> get_id ();
if ($ id == $ object [‘id’]) {
$ Ürün-> get_pice ();
}
}
İşlev rest_stock ($ object, $ field_name, $ istek) {
Global $ ürün;
$ id = $ ürün-> get_id ();
if ($ id == $ object [‘id’]) {
$ Ürün-> get_stock_status ();
}
}
İşlev rest_img ($ object, $ field_name, $ istek) {
Global $ ürün;
$ id = $ ürün-> get_id ();
if ($ id == $ object [‘id’]) {
$ ürün-> get_image ();
}
}
İşlev maksimum_api_filter ($ query_params) {
$ query_params [‘per_page’] [“maksimum”] = 100;
$ Query_Params Return;
}
add_filter (‘rest_product_collection_params’, ‘maximum_api_filter’);
WishList’ten öğeleri silin Ana.js dosyasındaki sargı işlevinin altına aşağıdaki kodu ekleyin: $ (belge) .on (‘tıklayın’, ‘. WishList-remove’, function () {) {) {) {) {)
var $ this = $ (this);
$ this.closest (‘tablo’). addclass (‘yükleme’);
WishList = [];
$ this.closest (‘tablo’). Bul (‘tr’). Her biri (function () {
if ($ (bu). Veri (‘ürün’)! = $ this. En yakın (‘tr’). Veri (‘ürün’)) {
wishlist.push ($ (bu). Veri (‘ürün’)); if (logeded) {
// Kullanıcı Kimliği Al
if (userData [‘user_id’]) {
$ .Ajax ({
Tür: ‘Post’,
URL: Opt.AjaxPost,
veri:{
Eylem: ‘USER_WISHLIST_UPDATE’,
user_id: userdata [‘user_id’],
Wishlist: wishlist.jin (‘,’),
}
})
.Done (işlev (yanıt) {
$ this.closest (‘tablo’). removeclass (‘yükleme’);
$ this.closest (‘tr’). ();
})
.Fail (işlev (veri) {
Uyarı (Opt.Error);
});
}
} başka {
SessionStorage.setItem (ShopName, WishList.Tosting ());
SetTimeout (function () {
$ this.closest (‘tablo’). removeclass (‘yükleme’);
$ this.closest (‘tr’). ();
}, 500);
}
}
});
});
Sonuç bu:
Sonuç Bu öğreticide, Woocommerce’e istek listesi eklemek için özel bir eklenti yaptık. Bu yazı, arzunun işlevselliğini mağazanıza eklemenize yardımcı olur. Benzer makaleler
WooCommerce’in çıktıktan sonra transferi [Ana Kılavuz]
WooCommerce’in kasadan sonra transferi: Özel bir teşekkür sayfasına aktarın
WordPress Custom Hooks Do_Action & Appl_filters’ı Örneklerle Kullanma Kılavuzu
Tarifsuz TypeError Nasıl Düzeltilir: WP.Template bir işlev değildir
WordPress’e girmiyorsa kullanıcıyı nasıl yönlendirir »sayfa aktarımı
Üst sayfa temasına bir arama kutusu nasıl eklenir
Woocommerce’de mevcut ürün kategorisinin adını nasıl alabilirim
Wooocommerce’de vergi etiketi nasıl gizlenir
Kullanıcının WordPress’e girip girmediğini nasıl kontrol edilir
Programlı Ürünler Nasıl Yapılır Wooocommerce
Wooocommerce ürünlerinin açıklaması ve gösterimi nasıl alınır