it-swarm.com.de

Wordpress-Shop: Kunden können die Produktfarbe mithilfe von Miniaturbildern in benutzerdefinierten Feldern auswählen

Ich verwende benutzerdefinierte Wordpress-Felder, um Kunden verschiedene Produktfarbcodes in einer Dropdown-Liste zur Verfügung zu stellen, aber jetzt möchte ich die verschiedenen Farbminiaturen zur einfacheren Auswahl hinzufügen ... ähnlich wie die Farbe auf dieser Site ausgewählt wird: http://www.blackhairspray.com/outre-quick-weave-belinda-outreqsbel.html

Kann mir jemand eine Idee geben, wie dies in WordPress zu tun ist, oder mich auf einen relevanten Tutor hinweisen?

da googeln die waren nicht liefern konnte, halte ich eifrig den Atem für eine SuperUser-Lieferung :-)

1
supayousir

Speichern Sie jedes benutzerdefinierte Feld als durch Kommas getrenntes Paar. So was:

optionsname, Optionsbild-URL

Dann machen wir das (innerhalb der Schleife) ...

$options = array();
foreach( get_post_custom_keys( $post->ID ) as $key )
{
    $a = get_post_meta( $post->ID, $key, true )
    $a_array = explode( ',', $a );
    $options[] = $a_array[0] // first value of each array is the option, add it to another array
    echo '<img src="' . $a_array[1] . '" id="' . $a_array[0] . '"/>'; // display the image with the option name as the id attribute

}

Dann durchlaufen Sie das options-Array:

<select name="your_option">
<?php
foreach( $options as $option )
{
   echo '<option id="' . $option . '" value="' . $option . '">' . $option . '</option>';
}
?>
</select>

Jedes Bild sollte ein ID-Attribut haben, das mit einer der Dropdown-Optionen identisch ist. Sie können dann JavaScript verwenden, um die Optionen zu ändern.

Dieses Javascript wird wahrscheinlich nicht funktionieren, aber es wird Ihnen den Einstieg erleichtern:

jQuery('img').click(function() 
{
    var id = jQuery(this).attr('id');
    jQuery( 'option' ).removeAttr( 'selected' );
    jQuery( 'option #' + id ).attr( 'selected', 'selected');
}
1
chrisguitarguy