wix etiket ve etiket bulutu nasıl oluşturulur

Merhaba @flyingmouse0. Etiket bulutları oluşturabilmek ve sayfa yönlendirmelerini sağlamak için birden fazla dinamik kategori sayfasını etiket uzantısıyla yayınlamalı (Ör: www.seninsiten.com/arabalar/{ferrariler}/ ya da www.seninsiten.com/arabalar/{teslalar}/ ) ve de ileri denebilecek düzeyde Corvid bilgisine sahip olmalısın.

Etiket bulutları metin öğeleriyle birlikte kullanılabilir ancak aşağıdakine benzer bir kod ile içerik yöneticisi-tekrarlayıcı-tekrarlayıcı öğeleri bağlantı kurabilmelidir. Metin öğesini HTML olarak tanımladık aşağıda.

export function repeater2_itemReady($item, itemData, index) {

 let tags = itemData.tags;
 let tagsHtml = tags.map(tag => 
      `<span style="background: #459fed; 
        border-radius: 5px; 
        padding: 0 3px; 
        color: #fff; 
        font-size: 12px">${tag}</span>`)
      .join(' ');
    $item('#tags').html = tagsHtml;
}

Bununla birlikte sayfa yönlendirmeleri için backend.js de her bir etikete karşılık gelecek bağlantı değeri oluşturmalı ve ön yüzde bu değerleri bir döngü içinde çağırmalısın.

wixLocation.to(`/arabalar/ferrariler/`)

Her etiket değeri için yeni bir sayfa oluşturmak zahmetli bir iş olduğundan etiket bulutlarını sayfa başında kullanarak tekrarlayıcıyı aynı sayfa üzerinde filtrelemek daha kısa süren bir iş olacaktır.

Etiket Bulutuyla Bir Tekrarlayıcı Nasıl Filtrelenir?

Etiket bulutlarıyla tekrarlayıcı filtrelemek de orta düzey Corvid bilgisi gerektirir.

Tekrarlayıcının yer aldığı sayfaya aşağıdakine benzer bir kod yapıştırılır. Aşağıdaki kod tüm işi yapar. Tabiki gerekli değişiklikleri kodda yapmak gereklidir.

import wixData from 'wix-data';

const collectionName = 'recipes';
const fieldToFilterByInCollection = 'tags';

$w.onReady(function () {

	setRepeatedItemsInRepeater();
	loadDataToRepeater();

	$w('#tags').onChange((event) => {
		const selectedTags = $w('#tags').value;
		loadDataToRepeater(selectedTags);
	})
});

function loadDataToRepeater(selectedCategories = []) {

	let dataQuery = wixData.query(collectionName);

	if (selectedCategories.length > 0) {
		dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories);
	}

	dataQuery
		.find()
		.then(results => {
			const itemsReadyForRepeater = results.items;
			$w('#recipes').data = itemsReadyForRepeater;
			const isRepeaterEmpty = itemsReadyForRepeater.length === 0

			if (isRepeaterEmpty) {
				$w('#noResultsFound').show();
			} else {
				$w('#noResultsFound').hide();
			}
		})
}

function setRepeatedItemsInRepeater() {

	$w('#recipes').onItemReady(($item, itemData) => {
		$item('#recipeImage').src = itemData.image;
		$item('#recipeImage').tooltip = itemData.recipeName;
		$item('#recipeName').text = itemData.recipeName
		$item('#chefName').text = 'By ' + itemData.chefName;

	})
}

Canlı örneğine aşağıdaki bağlantıdan ulaşabilirsin.

https://www.wix.com/corvid-examples/selection-tags

Bu konuda İngilizce Corvid topluluğunda paylaşılan çeşitli örneklere de ulaşabilirsin. https://www.wix.com/corvid/forum/news-announcements/new-feature-selection-tags

Kodlama Bilmeden Tekrarlayıcı Nasıl Filtrelenir?

Kodlama bilmeden açılır-düşer (dropdown) kullanıcı girdilerini kullanarak koleksiyonun görünen kısımlarına ulaşabilirsin. Bu konuda sitemizde ulaşabileceğin bir örnek aşağıdaki bağlantıda mevcuttur.

https://tr.bizimuhit.com/groups

Corvid hakkında bilgin yoksa yapmaya çalıştığın şeyi unut ve bunun yerine blog ve blog etiket bulutlarını kullanarak başka bir sistem düşün. 😉

Daha fazla sorun olursa bu mesajın hemen altında yer alan reply tuşunu kullanarak bu mesajı yanıtla, yeni bir yanıt oluşturma. 😁

Web sitene Bizim Muhit'i davet ederek Şubat ayındaki kampanyaya katılım hakkı kazanabilirsin. Davet atabileceğin e-posta adresleri aşağıdaki gibidir.

bizimuhit@gmail.com

support@bizimuhit.com

Sağlıklı günler dileriz,

Bizim Muhit.

#tagclouds #etiketbulutlarıwix #repeaterfiltering