How to better display pricing tables in the customer frontend

Answered

Comments

8 comments

  • Official comment
    Avatar
    Amy, Technical Analyst

    Hey Phillip,

    You can include a custom Pricing Table within the summary of your items by using a bit of HTML and CSS.

    Firstly, you'll want to go to the Description tab within each item and add this HTML to the "Summary" field:

    <table style="text-align:center;" class="pricing_table">
    <tbody>
    <tr class="pricing_row">
     <td colspan="2"><strong>Rates<strong>
      </strong></strong>
     </td>
    </tr>
    <tr class="pricing_row">
     <td> Weekday </td>
     <td> $00.00 </td>
    </tr>
    <tr class="pricing_row">
     <td> Weekend </td>
     <td> $00.00 </td>
    </tr>
    </tbody>
    </table>

     

    Then you'll go to Manage > Layout > Booking Page > CSS Editor and paste the following CSS:

    .cf-item-summary br {
    display:none;
    }
    .pricing_table {
      border-collapse: collapse;
      border: 1px solid black;
      width: 100%;
    }
    .pricing_row > td {
      border: 1px solid black;
    }


    Here's an example of how to implement this and the final result: click to view

    I hope this helps! 

     

    Comment actions Permalink
  • Avatar
    Phillip Hullquist

    I noticed that in your example video some of the demo items show a price range in the overlay on the photo. What parameters can I use to show a range like that? That would be a suitable workaround too.

    0
    Comment actions Permalink
  • Avatar
    Ethan Donahue

    Hi Phillip,

    The price range that is displayed on the demo Items is due to there being multiple Parameters with pricing and the 'Range' setting active. (As seen here)

    This will allow you to display the lowest value and highest value out of multiple Pricing Parameters on a single Item.

    I hope you find this helps!

    -1
    Comment actions Permalink
  • Avatar
    Phillip Hullquist

    I tried using Parameters to get it to show a pricing range, but there's just no way to map them to the same pricing tables created by Item Events. I also tried manually entering prices for the new Parameters, but also affected by Item Events so it doesn't display the correct range.

    I'd be happy to use the existing Range functionality, but it seems impossible to use those for displaying weekday/weekend price variations.

    0
    Comment actions Permalink
  • Avatar
    Brittany

    Hi Phillip,

    Item Events applying a price change should influence the range displayed on the given day selected. If you are not finding that this is the case could you please get in touch with us via email at support@checkfront.com?

    Screenshots of your findings, if at all possible, could be beneficial to ensure we understand correctly.

    Much appreciated!

    -1
    Comment actions Permalink
  • Avatar
    Phillip Hullquist

    I was trying to show the range of prices as in the demo video, but it seem there's no way to duplicate that display using the range of pricing defined by Item Events versus by Parameters. My goal is to find a way show the range of potential prices regardless of other factors.

    0
    Comment actions Permalink
  • Avatar
    Dedric Hourde

    While the suggested solution allow for a nice presentation, I think it is important to note that there are many limitations:

    • you have to edit EVERY single item
    • the "price" is effectively HARD CODED, meaning it will not be calculated. This is just a STATIC informative text
    • selected day, coupons, item events, etc will not update the price table in the description (summary)
    • every time you'll need to modify your prices, you'll have to do it twice: in the price tab of the item, and in its summary

    So, since your question was legitimately about dynamically displaying an actual price, the proposed method can not be accepted as a solution, and not even merely as a temporary workaround (since it requires manual edit of all items).

    1
    Comment actions Permalink
  • Avatar
    Phillip Hullquist

    The price range functionality described using parameters doesn't work either. It still only shows the range for the date chosen in the date picker instead of showing the potential range for that Inventory item.

    0
    Comment actions Permalink

Please sign in to leave a comment.