[Resolved] How to handle SELECT field on front end …

[Author]

Posts

[gordonW-2]

Hi.

I have a REPEATING GROUP that contains a SELECT FIELD and a NUMBER FIELD

Select Field:
field slug = ib-black-bar-item-selector
values:
Color
Finish
Option
Texture
Size

Number Field:
field slug = ib-black-bar-item-value

the admin can chose any of those options as applicable and then supply a number value

for this example lets say we select:
Color and a enter a value of 18
Finish and enter a value of 2
Size and enter a value of 9

in a view, if I type this:

[types field='ib-black-bar-item-value' format='FIELD_VALUE'][/types] [types field='ib-black-bar-item-selector' output='raw'][/types][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) eq 'Finish') )"]es[/wpv-conditional][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) neq 'Finish') )"]s[/wpv-conditional] 

it outputs:

18 Colors

2 Finishes

9 Sizes

how can I get it so that it displays these values INLINE like so along with the pipe character separating the values:

18 Colors | 2 Finishes | 9 Sizes

thx!

[Jamal]

Hello and thank you for contacting the Toolset support.

Repeatable field groups are displayed using a view, you will need to make sure that you use inline elements inside of the view's loop instead of block elements.
For example, wrap that code inside of a <span> elementor instead of a <div> element.

You will also need to use the wpv-item shortcode to omit the pipe symbol for the last item in the RFG. Something like:

<wpv-loop>
		[wpv-item index=other]
		   <span> [types field='ib-black-bar-item-value' format='FIELD_VALUE'][/types] [types field='ib-black-bar-item-selector' output='raw'][/types][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) eq 'Finish') )"]es[/wpv-conditional][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) neq 'Finish') )"]s[/wpv-conditional] </span>
                |
		[wpv-item index=last]
                    		   <span> [types field='ib-black-bar-item-value' format='FIELD_VALUE'][/types] [types field='ib-black-bar-item-selector' output='raw'][/types][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) eq 'Finish') )"]es[/wpv-conditional][wpv-conditional if="( ( $(wpcf-ib-black-bar-item-selector) neq 'Finish') )"]s[/wpv-conditional] </span>
	</wpv-loop>

Read more about the wpv-item shortcode here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-item

I hope this helps. Otherwise, I'll need to check the view closely. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[gordonW-2]

ok.

so I entered the code directly into the view block (instead of adding a Fields & Text block)

But this still splits all the content into separate DIVs

see screenshot ... here is the code in my browser:

<div class="wp-block-toolset-views-view-editor">
                                                <div id="wpv-view-layout-1457-TCPID378" class="js-wpv-view-layout js-wpv-layout-responsive js-wpv-view-layout-1457-TCPID378" data-viewnumber="1457-TCPID378" data-pagination="{"id":"1457","query":"normal","type":"disabled","effect":"fade","duration":500,"speed":5,"pause_on_hover":"disabled","stop_rollover":"false","cache_pages":"enabled","preload_images":"enabled","preload_pages":"enabled","preload_reach":1,"spinner":"builtin","spinner_image":"<em><u>hidden link</u></em>","callback_next":"","manage_history":"enabled","has_controls_in_form":"disabled","infinite_tolerance":"0","max_pages":0,"page":1,"base_permalink":"/ibs/staging/2412/product/bits-pieces/?wpv_view_count=1457-TCPID378&wpv_paged=WPV_PAGE_NUM","loop":{"type":"","name":"","data":[],"id":0}}" data-permalink="/ibs/staging/2412/product/bits-pieces/?wpv_view_count=1457-TCPID378">
                                                    <div class="js-wpv-loop-wrapper">
                                                        <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="8e762c9406659062e224ab08d783849c">
                                                            <p></p>

                                                            <p>2 Finishes |</p>

                                                            <p>
                                                            <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="8e762c9406659062e224ab08d783849c">
                                                                <p></p>

                                                                <p>9 Sizes |</p>

                                                                <p>
                                                                <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="8e762c9406659062e224ab08d783849c">
                                                                    <p></p>

                                                                    <p>18 Colors </p>
                                                                </div>
                                                            </div>

                                                            <p></p>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

this still puts each iteration of the loop into it's own DIV so that it looks like

VALUE FIELD

VALUE FIELD

VALUE FIELD

instead of VALUE FIELD | VALUE FIELD | VALUE FIELD

the view in the block editor ... and the output are attached

[Jamal]

Thank you for sharing these screenshots. You are actually using the blocks editor, and the code that I shared is to be used in the legacy editor.

Inside the blocks editor, do not use a Shortcode block, because it will generate an HTML "Block(vs Inline)" element. You can customize its display with CSS, but that's just a workaround.
I would suggest, that you use a "Column" or "Grid" block, and use the shortcode blocks inside of it.

Or you can use a Fields&Text block and put your code(shortcodes) inside of it.

If you still encounter issues to achieve what you desire, allow me temporary access to your website to help you with it. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Hello Gordon, my apologies for the late reply, but I do not work on Wednesdays and Thursdays as you can see on my profile page
https://toolset.com/forums/users/jamal-b/

I worked on this a bit and the only way I could make it work is using custom CSS code.
First, I added a class to the view's loop block to be able to target it with CSS. Check this screenshot hidden link
Then, I targeted it with the following CSS, check this screenshot hidden link

.wp-block-toolset-views-view-template-block.my-inline-loop {
    display: inline;
}

.wp-block-toolset-views-view-template-block.my-inline-loop:not(:last-child):after {
    content: ' | ';
}

.wp-block-toolset-views-view-template-block.my-inline-loop .tb-fields-and-text {
    display: inline;
}

With this CSS solution, we won't need to use wpv-item. We used the :not(:last-child):after CSS selector to add the "|" separator for all items except the last one. We'll also need to use display: inline; style for the loop item and its child "Fields&Text" block.

I hope this helps. Let me know if you have any questions.