Allergének megjelenítése

 Pluginok

A plugin allergének megjelenítésére szolgál WooCommerce termékekhez kapcsolódóan, de bármely jellemző megjelenítéséhez használhatod.

Nincs más dolgod, mint telepíteni a plugint, majd a WooCommerce / Beállítások menüpontban, az “Integráció” fül alatt az “Allergének” oldalon rögzíteni a lehetséges allergéneket. Ezt követően a WooCommerce termékek tulajdonságainál egy új fül áll rendelkezésedre “Allergének” néven, ahol megjelenik minden lehetséges elem.

Válaszd ki azokat az allergéneket, amelyek az adott termékre jellemzőek, majd mentsd el. A kiválasztott allergének a terméknél meg fognak jelenni.

Máshol szeretnéd megjeleníteni?

Semmi gond! Módosítsd témád functions.php-ét az alábbi elven:

// Az alapértelmezett helyen ne jelenjen meg:
remove_action( 'woocommerce_before_add_to_cart_form', 'allergens_list_910_show_allergen_in_product');
add_action( '<ahol te szeretnéd megjeleníteni>', 'allergens_list_910_show_allergen_in_product', 12 );

remove_action( 'woocommerce_after_shop_loop_item_title', 'allergens_list_910_show_allergen_in_product');
add_action( '<ahol te szeretnéd megjeleníteni>', 'allergens_list_910_show_allergen_in_product', 12, 2)

Máshogyan szeretnéd megjeleníteni?

Semmi gond! Módosítsd témád functions.php-ét az alábbi elven:

// Alapértelmezett megjelenítés törlése
remove_filter('allergens_list_html_hook', 'allergens_list_910_render_html');
function my_filter_function($data) {
     // Lásd: plugins/allergens-list/libs/hooks.php
     [... saját kód ...]
	
     return $html;
}
add_filter('allergens_list_html_hook', 'my_filter_function', 11, 1);

Csak szöveget szeretnél előtte megjeleníteni és/vagy középre igazítani? Ezt a kódot másold a functions.php-be:

    function allergens_list_my_modify_display($html) {
        $html = '<div style="text-align:center">Allergének: ' . $html . '</div>';
        return $html;
    }
    add_filter( 'allergens_list_modify_display', 'allergens_list_my_modify_display', 10, 1);

Vigyázz! Ha nem használsz child témát, akkor a téma frissítése után újra bele bell majd írnod ezt a functions.php-be! A téma frissítése felülírja ezt a fájlt.

Shortcode-ra van szükség?

Használhatod az [allergens] shortcode-ot is a megjelenítéshez.

Ha egy termék allergéneit akarod megjeleníteni, így teheted: [allergens id="<$product_id>"]

Szűrőn keresztül jelenítenéd meg?

$html = apply_filters('allergens_list_html_with_id', $product_id);

Vagy:

<?php echo do_shortcode('[allergens id="$product_id"]'); ?>

Gyakori kérdések:

  • Nem szeretném megjeleníteni a képeket, csak a neveket. Lehetséges ez?

    Igen, lehetséges.
    Ehhez a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    remove_filter('allergens_list_html_hook', 'allergens_list_910_render_html');
function my_filter_function($data) {
        $html = array();

        foreach ($data as $key => $item) {
            $html[] = '<span class="allergen-item">'.$item['title'].'</span>';
        }
       
        return implode('&nbsp;|&nbsp;', $html);   
}
add_filter('allergens_list_html_hook', 'my_filter_function', 11, 1);

  • Üzlet oldalon, a termék neve alatt szeretném megjeleníteni. Lehetséges ez?

    Igen, lehetséges.
    Ehhez a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    // Eredeti helyéről leveszi
remove_action( 'woocommerce_after_shop_loop_item_title', 'allergens_list_910_show_allergen_in_product');
// A kívánt helyre beállítja
add_action( 'woocommerce_after_shop_loop_item_title', 'allergens_list_910_show_allergen_in_product', 12, 2);

  • Szeretném a lista elé kiírni, hogy “Allergének:”. Hogyan csináljam?

    Ehhez a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    function allergens_list_my_modify_display($html) {
    $html = '<div>Allergének: ' . $html . '</div>';
    return $html;
}
add_filter( 'allergens_list_modify_display', 'allergens_list_my_modify_display', 10, 1);

  • Szeretném az ikonokat középre igazítani. Hogyan csináljam?

    Ehhez a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    function allergens_list_my_modify_center_display($html) {
    $html = '<div class="allergens-list">' . $html . '</div>';
    return $html;
}
add_filter( 'allergens_list_modify_display', 'allergens_list_my_modify_center_display', 10, 1);

    Hozzá kell adnod a stílus bejegyzésekhez (CSS) az alábbiakat:

    			.allergens-list { text-align: center; }
			/* Ha azt szeretnéd, hogy a termék oldalon viszont balra legyen igazítva, akkor még ez a sor is kell: */
			.summary .allergens-list { text-align: left; }

  • Egymás alatt jelennek meg az ikonok az üzlet oldalon. Hogyan rendezhetem egymás mellé?

    Ehhez a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    function allergens_list_my_modify_center_display($html) {
    $html = '<div class="allergens-list">' . $html . '</div>';
    return $html;
}
add_filter( 'allergens_list_modify_display', 'allergens_list_my_modify_center_display', 10, 1);

    Hozzá kell adnod a stílus bejegyzésekhez (CSS) az alábbiakat:

    			.allergens-list img { display: inline-block; }

  • Az üzlet oldalon csak az ikonokat, de a termék oldalon a cimkéket is meg szeretném jeleníteni.

    Két lépésben tudod megvalósítani. Elsőként a (child) témád functions.php-ben kell elhelyezned az alábbi kódot:

    remove_filter('allergens_list_html_hook', 'allergens_list_910_render_html');
function my_filter_function($data) {
        $html = array();

        foreach ($data as $key => $item) {
            $html[] = '<img src="'.$item['icon'].'" class="allergen-icon" alt="'.$item['title'].'" title="'.$item['title'].'" />' .
                      '<span class="allergen-title">'.$item['title'].'</span>';
			// Itt adtál egy osztályt a cimke megjelenítéshez
            
        }
        
        return implode('&nbsp;', $html);    
}
add_filter('allergens_list_html_hook', 'my_filter_function', 11, 1);

    Ezt követően a (child) téma CSS fájlban helyezd el az alábbi deklarációt:

    /* Általánosságban elrejted a cimkét */
.allergen-title {
    display: none;
}
/* A termék oldalon beállítod, hogy megjelenjen */
.summary .allergen-title {
    display: inline-block;
}

  • Nem jól jelennek meg az ikonok az üzlet oldalon! Mit tegyek?

    A témád lehet, hogy felülírja a megjelenítést. Próbáld meg az alábbi kódot elhelyezni a CSS-ben:

    .woocommerce ul.products li.product a img.allergen-icon {
	width: 24px;
	margin-right: 4px;
}