Join our new community forum for support & discussion

Attributes Fomat spacing and line jumping

Author

Posts
Alf 1 year, 11 months ago

Hello,

Would it be possible for the attributes to be shown in the following way:
– Top line: icon + label
– Below: the different values, if possible: each value on a different line (like a list)

Thank you very much.

Regards,

Alf 1 year, 11 months ago

More info: This was for the Attributes shown in Primary.

Related question: is there a way for the different attributes in Secoundary to be shown in different lines? (no need to separate the icon and heading, just show one attribute under the other)

ihor 1 year, 11 months ago developer

Hi,

1. Sorry, this would require customizing the attributes template part. If you’re familiar with PHP please try overriding the /listing/view/page/listing-attributes-primary.php template part (by placing it inside the child theme’s folder).

2. This may be possible with CSS only:

.hp-listing--view-block .hp-listing__attributes--secondary .hp-col-xs-12 {flex-basis: 100%;max-width: 100%;}

Alf 1 year, 11 months ago

Thank you for that part 1.

Regarding point 1, is there no way to specify at least a line jump between the label and the values of an attribute?

Right now it looks like this: https://snipboard.io/gZYeGD.jpg

In a more generic question: what can go inside the Display Format field (aside from %icon%, %label% and %value%)?

Thank you.

Alf 1 year, 11 months ago

Hello,

I found a way to separate the titles from the different values just by adding <br>:
%icon% %label% <br> %value%

This does the job for now.
I will leave all the values in the same line, at least for now.

Thank you!

gabetu 1 year, 11 months ago

I’m using a CSS & JS solution for this: https://hivepress.io/support/topic/how-to-split-long-comma-delimited-attribute-options-into-nice-list/

ihor 1 year, 11 months ago developer

@Alf You can also use any other listing attribute, for example %listing.something%, mixing different attribute values within the same format. Thanks for sharing the solution with the <br> tag.

Alf 1 year, 11 months ago

Thank you veyr much, gabetu

Your solution looks great. But I am not skilled on JS yet.
Can the code work on Code Snippets? Or do I need a Child Theme and adjust the configuration to run it?

Also, which are the parameters I should customize in the code?
I understand “hp-listing__attribute–your-attribute-1” and similar need to be changed for my attributes. But is there anything else?

Thank you very much!

ihor 1 year, 11 months ago developer

If you mean the CSS snippet above you can add it to Appearance/Customize/Additional CSS field. For PHP snippets, please try using this plugin https://wordpress.org/plugins/code-snippets/ A child theme is not required unless you want to override some template parts by copying them to the child theme folder.

You can target any attribute via CSS using this class:

.hp-listing__attribute--attributename { any styles here }

Replace “attributename” with the attribute slug, for example if you name some attribute “Hourly Rate” its slug will be “hourly-rate”.

Alf 1 year, 11 months ago

Hello,

I meant the JS part of the code Gabetu shares in his linked post: https://hivepress.io/support/topic/how-to-split-long-comma-delimited-attribute-options-into-nice-list/

Do you think what he has done there can be achieved only with CSS?
gabetu 1 year, 11 months ago

Hi @Alf,

You can use the code snippets for testing custom code but for large projects I recommend using a child theme though.

Let’s assume that you have created a select/checkboxes field type attribute called “Features” with “Option 1, Option 2, Option 3, etc.”

1. In attribute Display Format you can use the string something like <h3>Features</h3><div id="<strong>yourdivid</strong>">%value%</div>

2. The CSS code for displaying the list:
```
/* Split string into ul */
ul.features {text-align:left;list-style:none;padding-left:0;margin:10px 0 10px 0;columns:2;-webkit-columns:2;-moz-columns:2;column-gap:5px;}
ul.features li {font-size:14px;color:#000000}
ul.features li::before {padding-right:10px;content:'\2713';color:#1e73be;font-weight:bold}
```
Please note that I’m splitting the list into 2 columns but you can use with:100% instead of columns.

3. The JS code for splitting the string into list (this is a simplified version of the previous post):
```
( function( $ ) {
'use strict';
// First list
$('<strong>#yourdivid</strong>').contents().replaceWith(function(){
    return $('<ul class="features">').append($(this.data.split(",")).map(function() {
        return $('<li>').text(this).get();
    }));
})
// Second list
$('<strong>#otherdivid</strong>').contents().replaceWith(function(){
    return $('<ul class="features">').append($(this.data.split(",")).map(function() {
        return $('<li>').text(this).get();
    }));
})
} ( jQuery ) );
```
Practically you can use this code for multiple attributes by duplicating the JS block for every div id containing the %value% of each attribute.

Hope this will help you.
gabetu 1 year, 11 months ago

Hmmm, I forgot to wrap the JS into code brackets, any chance to edit the post above ?
Alf 1 year, 11 months ago

Thank you very much for your help, Gabetu.

Still not working, though. But I guess we are closer.

I think there are some problems right at the first steps. The Display Format box is re-writen after I save and publish and the result is this:
<h3>Features</h3><div id="<strong>yourdivid</strong>">%value%</div>

I think some coding characters are not recognized within the Display Format box…

As for the brakets, any special way to place them?
I have added the code into a Code Snippet that looks like this:
```
<?php
add_action( 'wp_head', function () { ?>
<script>

	/* JavaScript code here */

</script>
<?php } );
```
Alf 1 year, 11 months ago

I think the forum text editor changed the Display Format phrase and it looks ok again…
in WordPress it looks like this: https://snipboard.io/S35lkj.jpg
gabetu 1 year, 11 months ago

Sorry, the Display Format content should be only:
<h3>Features</h3><div id="yourdivid">%value%</div>
where you can use any name for yourdivid

And the JS should be:
```
( function( $ ) {
‘use strict’;
// First list
$('#yourdivid').contents().replaceWith(function(){
return $('<ul class="features">').append($(this.data.split(",")).map(function() {
return $('<li>').text(this).get();
    }));
})
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

New Reply

This forum has been archived and is no longer accepting new posts or replies. Please join our new community forum for support & discussion.