Site logo

[Resolved] blog category and product category on same page

Home Forums Support [Resolved] blog category and product category on same page

Home Forums Support blog category and product category on same page

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2417010
    Magnus

    Hello,

    I use the same category names (e.g. Category “Summer”) in my Blog Posts and in my products (e.g. Category “Summer”). I’m looking for a way to show both category sources on the same page. Any ideas?

    Thanks, Magnus

    #2417064
    Ying
    Staff
    Customer Support

    Hi Magnus,

    Try using a query loop block from GenerateBlocks, you can add a query loop block to show the posts with the summer category, and another query loop block to show the products with the summer category.
    https://wordpress.org/plugins/generateblocks/
    https://docs.generateblocks.com/article/query-loop-overview/

    #2417211
    Magnus

    Hello Ying,

    Thank you for this solution. This works perfect. The downside is, that each new post or product must be added manually. With a growing amount of posts and products it’s an effort I want to prevent. Is there any chance to e.g. modify an category archive page to show product categories as well?

    #2417220
    Ying
    Staff
    Customer Support

    that each new post or product must be added manually.

    The new posts/page should always show automatically, no need to add manually.

    Are you sure you are using a query loop block?

    #2419340
    Magnus

    Hello Ying,

    you are right, I didn’t used a query loop block. Thanks for the note. With this tipp it works very well.

    Two question regarding:

    1. each query loop block is ordered by date. Now only one block is sorted by date, then the other. Is there a way to sort both blocks together?

    2. Is it also possible to sort by individual fields (ACF)?

    Thank you!

    #2419528
    David
    Staff
    Customer Support

    Hi there,

    1. I am not sure what you mean ? Do both blocks have the same order parameters ?

    2. See here on how to order using a custom field:

    https://generatepress.com/forums/topic/query-loop-use-acf-date-field-as-order-by-parameter/#post-2405953

    #2419650
    Magnus

    Hi David,

    thank you for your reply.

    Regarding #1:
    I have two query loop blocks, ordered by date. First Block for example shows posts:

    1) Post A Jan 2022
    2) Post B Feb 2022
    3) Post C Mar 2022

    followed by the second block:

    4) Post D Jan 2022
    5) Post E Feb 2022
    6) Post F Mar 2022

    But it would be nicer if both query loop could be ordered like this

    1) Post A Jan 2022
    2) Post D Jan 2022
    3) Post B Feb 2022
    4) Post E Feb 2022
    5) Post C Mar 2022
    6) Post F Mar 2022

    Hope this clearifies my “problem”

    Regarding #2:
    I’ve implemented the php in the functions.php of my child theme:

    add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
        // apply filter if loop has class: my-class-name
        if (
            ! empty( $attributes['className'] ) &&
            strpos( $attributes['className'], 'order-by-score-value' ) !== false
        ) {
            // merge meta_key my-custom-field into query
            return array_merge( $query_args, array(
                'meta_key' => 'score_value',
                'orderby' => 'meta_value',
                'order' => 'DESC',
            ) );
        }
    
        return $query_args;
    
    }, 10, 2 );

    The grid within the query loop has the additional css class order-by-score-value and the ACF Field has the name score_value. But the order will not work, see my page: https://ride-with-love.bike/ride-with-love-mtb-enduro-touren/ The Order should be DESC of the values “7.5” etc.

    #2425124
    Magnus

    Hello,

    an update from my side:

    The Code for ordering by ACF custom fields does the job

    
    add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
        // apply filter if loop has class: my-class-name
        if (
            ! empty( $attributes['className'] ) &&
            strpos( $attributes['className'], 'order-by-score-value' ) !== false
        ) {
            // merge meta_key my-custom-field into query
            return array_merge( $query_args, array(
                'meta_key' => 'score_value',
                'orderby' => 'meta_value',
                'order' => 'DESC',
            ) );
        }
    
        return $query_args;
    
    }, 10, 2 );
    

    I had a plugin that messed up the order. After deinstalling the plugin the code works perfect!

    For sorting posts and products on the same page I’ve coded a simple Template php file using with a regular blog-post, which runs great

     $args = array(
        'post_type' => array('product', 'post'),
        'tax_query' => array(
            'relation' => 'OR',
            array(
                'taxonomy' => 'category',
                'field'    => 'term_id',
                'terms'    => ['82', '85'],
            ),
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => ['96'],
            ),
        ),
        'posts_per_page' => 999,
        'orderby'        => 'meta_value_num',
        'meta_key'       => 'score_value',
        'order'          => 'DESC',
    );
    

    See my Test-Page: https://ride-with-love.bike/test/

    How can I change the layout of my custom Template PHP into a two column layout?

    Thanks, Mags

    #2425220
    David
    Staff
    Customer Support

    Glad to hear you figured that out 🙂

    2 columns, edit the Query Loop block, inside there is a Grid Block, and inside that is the Post Template block <– select that. In its settings change the Width to 50%

    #2425394
    Magnus

    Hi David,

    thanks for your reply. I call my posts & products completely with a custom-template.php. So I use the WP Editor only to connect an empty post with my custom-template.php. Thes custom-template does the job and is calling & showing the complete content directly.

    I haven’t found an other solution to mix posts and products on one page and order them together.

    So I guess I must use some css oder html code to set-up a two column layout. But I haven’t found a working solution so far.

    Hopefully my answer will help to understand my request.

    #2425992
    Ying
    Staff
    Customer Support

    Try this CSS:

    @media (min-width: 769px) {
    main#main {
        display: flex;
        flex-wrap: wrap;
    }
    
    main#main > .gb-grid-column {
        width: 50%;
    }
    
    main#main > .gb-grid-column:nth-child(odd) {
        padding-right: 25px;
    }
    
    main#main > .gb-grid-column:nth-child(even) {
        padding-left: 25px;
    }
    }
    #2427211
    Magnus

    Hello Ying, works perfect 🙂 Thank you!

    #2427707
    Ying
    Staff
    Customer Support

    No problem 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.