How to create a product details slider on post?

admin管理员组

文章数量:1410730

I am using WordPress. I have to display the product details slider on each post with different details.

For example, I have apple post and I have to add a product slider so my slider details are

Product_title   price  desc  link        image
iPhone x       $650   xyz   textt   1.jpg
iPhone 7       $550   abc   textt   2.jpg
iPhone 6s      $450   pqr   textt   3.jpg

These details will not display on another post.

What I am thinking there are two options

1) Create custom post type and add information then create a shortcode and add shortcode to the post.

2) Create the Gutenberg block and add details.

I need to know which is the best and easy? Till now I am not using any plugin. I have created a 30 post.

I am trying to add below fields and once the user clicks on add more then the same filed will display again and can add next details.

Below is the code for the above fields. I refer this link / to generate the fields.

Note: add more button is not working.

function product_details_get_meta( $value ) {
    global $post;

    $field = get_post_meta( $post->ID, $value, true );
    if ( ! empty( $field ) ) {
        return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
    } else {
        return false;
    }
}

function product_details_add_meta_box() {
    add_meta_box(
        'product_details-product-details',
        __( 'Product details', 'product_details' ),
        'product_details_html',
        'productslider',
        'normal',
        'default'
    );
}
add_action( 'add_meta_boxes', 'product_details_add_meta_box' );

function product_details_html( $post) {
    wp_nonce_field( '_product_details_nonce', 'product_details_nonce' ); ?>

    <p>
        <label for="product_details_product_title"><?php _e( 'Product title', 'product_details' ); ?></label><br>
        <input type="text" name="product_details_product_title" id="product_details_product_title" value="<?php echo product_details_get_meta( 'product_details_product_title' ); ?>">
    </p>    <p>
        <label for="product_details_product_price"><?php _e( 'Product price', 'product_details' ); ?></label><br>
        <input type="text" name="product_details_product_price" id="product_details_product_price" value="<?php echo product_details_get_meta( 'product_details_product_price' ); ?>">
    </p>    <p>
        <label for="product_details_product_description"><?php _e( 'Product description', 'product_details' ); ?></label><br>
        <textarea name="product_details_product_description" id="product_details_product_description" ><?php echo product_details_get_meta( 'product_details_product_description' ); ?></textarea>

    </p>    <p>
        <label for="product_details_product_link"><?php _e( 'Product link', 'product_details' ); ?></label><br>
        <input type="text" name="product_details_product_link" id="product_details_product_link" value="<?php echo product_details_get_meta( 'product_details_product_link' ); ?>">
    </p>
    <p>
        <label for="product_details_product_img"><?php _e( 'Product image', 'product_details' ); ?></label><br>
        <input type="file" name="product_details_product_img" id="product_details_product_img" value="<?php echo product_details_get_meta( 'product_details_product_img' ); ?>">
    </p>

    <p>
        <input type="submit" name="product_details_submit" id="product_details_submit" value="Add More">
    </p>

<?php
}

function product_details_save( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( ! isset( $_POST['product_details_nonce'] ) || ! wp_verify_nonce( $_POST['product_details_nonce'], '_product_details_nonce' ) ) return;
    if ( ! current_user_can( 'edit_post', $post_id ) ) return;

    if ( isset( $_POST['product_details_product_title'] ) )
        update_post_meta( $post_id, 'product_details_product_title', esc_attr( $_POST['product_details_product_title'] ) );
    if ( isset( $_POST['product_details_product_price'] ) )
        update_post_meta( $post_id, 'product_details_product_price', esc_attr( $_POST['product_details_product_price'] ) );
    if ( isset( $_POST['product_details_product_description'] ) )
        update_post_meta( $post_id, 'product_details_product_description', esc_attr( $_POST['product_details_product_description'] ) );
    if ( isset( $_POST['product_details_product_link'] ) )
        update_post_meta( $post_id, 'product_details_product_link', esc_attr( $_POST['product_details_product_link'] ) );
}
add_action( 'save_post', 'product_details_save' );

本文标签： How to create a product details slider on post