Home Support Themes ExpertHive Attributes Fomat spacing and line jumping

Attributes Fomat spacing and line jumping

  • Author
    Posts
  • Alf

    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

    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 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

    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

    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!

    ihor 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

    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 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

    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

    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

    Hmmm, I forgot to wrap the JS into code brackets, any chance to edit the post above ?

    Alf

    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=&quot;<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

    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

    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();
        }));
    })
Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.