Avatar billede Morten Professor
20. juni 2018 - 12:43 Der er 6 kommentarer

li select

Hej Eksperter

Jeg vil høre om der er nogen der kan hjælpe med at få dette her til at virke.

Jeg har en kode som laver en select boks i css og Jquery, men kan ikke for den til at få den rigtig value når jeg ligger i kurv.
Kan godt tage det sidste id i il select boksen. men ikke den jeg selecter.

Her er koderne:
php kode:

<form class="variation" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
      <div class="single_variation_wrap">
                <?php
                    /**
                    * woocommerce_before_single_variation Hook.
                    */
                    do_action( 'woocommerce_before_single_variation' );
   
                    /**
                    * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
                    * @since 2.4.0
                    * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                    * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                    */
                    do_action( 'woocommerce_single_variation' );
   
                    /**
                    * woocommerce_after_single_variation Hook.
                    */
                    do_action( 'woocommerce_after_single_variation' );
                ?>
            </div>
   
            <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
    <?php
$available_variations = $product->get_available_variations();

if( count($available_variations) > 0 ){
?>
    <?php
    $output = '
    <div id="variant" name="variation_id">
    <ul id="variant">
    <li class="init">Vælg størrelse...</li>';
?>
    <?php
    foreach( $available_variations as $variation ){
        if($variation['max_qty'] > 0) {//Finder ud af om der er vare på lager det den kalde variation.
        $option_value = array();
            //Kan finde ud af at få en pris på en variation.
            $variation_id=$variation['variation_id'];
            $variable_product1= new WC_Product_Variation( $variation_id );

            $regular_price = $variable_product1 ->regular_price;
            $sales_price = $variable_product1 ->sale_price;
?>
    <input type="hidden" name="variation_id" value="<?php echo $variation['variation_id']; ?>" />
    <?php
        foreach( $variation['attributes'] as $attribute => $term_slug ){
            $taxonomy = str_replace( 'attribute_', '', $attribute );
            $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
            $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name; // Attribute value term name

            $option_value[] =  $attribute_name.': '.$term_name;
           
        }
        ?>
    <?php
        $option_value = implode( ' | ', $option_value );

        $output .= '
        <li data-value="'.$variation['variation_id'].'">'.$option_value.'</li>';?>
           
        <?php
        }
    }
    $output .= '
        </ul>
        </div>';
?> <?php
    //En if else function til at se om produktet er i variation eller en simpel, hvis den er en variation viser den select. Hvis ikke viser den ikke hvad det er et enkelt produkt.
    if( $product->is_type( 'simple' ) ){
    // No variations to product
} elseif( $product->is_type( 'variable' ) ){
  echo $output;
}
} ?>
    <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />
</form>

Jquery:
jQuery( document ).ready(function() {
jQuery("#variant ul").on("click", ".init", function() {
    jQuery(this).closest("#variant ul").children('li:not(.init)').toggle();
});

var allOptions = jQuery("#variant ul").children('li:not(.init)');
jQuery("#variant ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery("#variant ul").children('.init').html(jQuery(this).html());
    allOptions.toggle();
   
    jQuery("#variant ul").click(function(){
    jQuery('#variant').attr('value', jQuery(this).attr('data-value'));
});
});
    });

CSS:
#variant ul {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 400px;
    border: solid thin lightgray;
    position: relative;
    top: -20px;
    z-index: 9999;
    list-style: none;
    appearance: button;
   
}
#variant ul li {
    position: relative;
    padding: 5px 10px;
    z-index: 9999;
}
#variant ul li:not(.init) {
    position: relative;
    z-index: 9999;
    width: 400px;
    display: none;
    background: lightgray;
}
#variant ul li:not(.init):hover, ul li.selected:not(.init) {
    background: lightgray;
    position: relative;
    z-index: 9999;
}
#variant li.init { cursor: pointer; }

Håber der er nogen der ved hvordan jeg får den valgte "li" til at blive den der kommer i kurven.

Med venlig hilsen
Morten
Avatar billede Slater Ekspert
20. juni 2018 - 15:06 #1
Du har to elementer med samme id. Det er fy-fy og kan forstyrre noget i sig selv.

Men ellers, du har ikke en side man kan se det fungere på, vel? Det vil være en del nemmere end at overskue koden, og det er svært at lave en jsfiddle med det, når det afhænger af Woocommerce.
Avatar billede Morten Professor
20. juni 2018 - 16:23 #2
Hej Slater

Nej desværre, arbejde lige nu localhost på comuteren.

Hvilken 2 id :D

Jeg er blevet lidt rundforvieret i forsøg på at få det til at virke :D

Jeg har fundet ud af at det der nok skal gøres er at få jquery til at hente id og ligge det i input. Fra data-value i "li" bliver vist.
Men ved ikke hvordan, og om det virker??
Avatar billede Slater Ekspert
20. juni 2018 - 16:28 #3
<div id="variant" name="variation_id">
<ul id="variant">

De to har samme id.

Er det et jQuery-plugin du bruger til at lave en <ul> om til en drop down?
Avatar billede Morten Professor
20. juni 2018 - 16:35 #4
her med slettet :D
Ja
Her er kode  i min jquery

jQuery( document ).ready(function() {
jQuery("#variant ul").on("click", ".init", function() {
    jQuery(this).closest("#variant ul").children('li:not(.init)').toggle();
});

var allOptions = jQuery("#variant ul").children('li:not(.init)');
jQuery("#variant ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery("#variant ul").children('.init').html(jQuery(this).html());
    allOptions.toggle();
  jQuery("button").click(function(){
        jQuery("#variant ul").val("#variant li"); <-------- Hvordan gør mand
    });
});
    });

Php koden med ul

<div id="variant">
    <ul>
    <li class="init">Vælg størrelse...</li>';
?>
    <?php
    foreach( $available_variations as $variation ){
        if($variation['max_qty'] > 0) {//Finder ud af om der er vare på lager det den kalde variation.
        $option_value = array();
            //Kan finde ud af at få en pris på en variation.
            $variation_id=$variation['variation_id'];
            $variable_product1= new WC_Product_Variation( $variation_id );

            $regular_price = $variable_product1 ->regular_price;
            $sales_price = $variable_product1 ->sale_price;
?>
    <input type="hidden" name="variation_id" id="variation_id" value="" />
    <?php
        foreach( $variation['attributes'] as $attribute => $term_slug ){
            $taxonomy = str_replace( 'attribute_', '', $attribute );
            $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
            $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name; // Attribute value term name

            $option_value[] =  $attribute_name.': '.$term_name;
           
        }
        ?>
    <?php
        $option_value = implode( ' | ', $option_value );

        $output .= '
        <li data-value="'.$variation['variation_id'].'">'.$option_value.'</li>';?>
           
        <?php
        }
    }
    $output .= '
        </ul>
        </div>';
Avatar billede Morten Professor
21. juni 2018 - 08:43 #5
Så har jeg næsten fået det til at virke:

jQuery( document ).ready(function() {
jQuery("#variant ul").on("click", ".init", function() {
    jQuery(this).closest("#variant ul").children('li:not(.init)').toggle();
});

var allOptions = jQuery("#variant ul").children('li:not(.init)');
jQuery("#variant ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery("#variant ul").children('.init').html(jQuery(this).html());
    allOptions.toggle();
 
    jQuery('input[name="variation_id"]').val("li .init"); <------ Men ved ikke hvilken måde jeg får hentet data-value fra li til den .val
   
});
    });
Avatar billede Morten Professor
22. juni 2018 - 08:08 #6
Lukker tråd, fandt ud af en løsning

jQuery( document ).ready(function() {
jQuery("#variant ul").on("click", ".init", function() {
    jQuery(this).closest("#variant ul").children('li:not(.init)').toggle();
});

var allOptions = jQuery("#variant ul").children('li:not(.init)');
jQuery("#variant ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery("#variant ul").children('.init').html(jQuery(this).html());
    allOptions.toggle();
 
    var data_output = jQuery(this).data("value");
   
    jQuery('input[name="variation_id"]').val(data_output);
   
});
    });
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester