Hey Guys, Currently im using Twigg / Timber on a website I have inherited and I want to pull the tickets from freshdesk and display them when the user logs into “my account”
I’ve got the system working but the account area isn’t picking up my styling changes (It’s not cache)
Here’s my twig template:
<div class=”info-boxes”>
{% if tickets is not empty %}
<div class=”box ticket-box”>
<h3>Your Support Requests</h3>
<ul>
{% for ticket in tickets %}
<li>
<strong>{{ ticket.subject|e }}</strong> –
{{ ticket.description_text|e|slice(0, 100) }}…
<button onclick=”document.getElementById(‘ticket-{{ loop.index }}’).style.display=’block'”>Details</button>
<div id=”ticket-{{ loop.index }}” class=”details-box”>
{{ ticket.description_text|e }}
<p>Support Agent: {{ ticket.agent_name|e }}</p>
<p>Time Spent: {{ ticket.time_spent|e }}</p>
<form id=”reply-form-{{ loop.index }}” class=”reply-form” data-ticket-id=”{{ ticket.id|e }}”>
<label for=”reply”>Your Reply:</label>
<textarea id=”reply” name=”reply” required></textarea>
<input type=”submit” value=”Reply”>
</form>
<p id=”confirmation-{{ loop.index }}” style=”display:none; color: green;”></p>
<button onclick=”document.getElementById(‘ticket-{{ loop.index }}’).style.display=’none'”>Close</button>
</div>
</li>
{% endfor %}
</ul>
</div>
{% else %}
No tickets found.
{% endif %}
<div class=”box other-info-box”>
<h3>Other Important Information</h3>
<!– Add your additional information here –>
</div>
</div>
And the CSS
/*
*
* Normalize.css is a project by Nicolas Gallagher – u/necolas
* ITCSS architecture by Harry Roberts – u/csswizardry
* BEM should be used to name classes –
*
* – If in doubt, create a component.
* – Only use classes.
* – Nest only to a maximum of 3 layers.
* – Only use ‘!important’ within the Trump Layer.
*
*/
/*#region SETTINGS */
// Variables and base site settings used globally only.
@import “1-settings/global”;
@import “1-settings/colors”;
/*#endregion*/
/*#region TOOLS */
// Mixins and functions which are used globally.
@import “2-tools/mixins”;
/*#endregion*/
/*#region GENERIC */
// General base styling. Not normally changed.
@import “3-generic/normalize”;
@import “3-generic/box-sizing”;
@import “3-generic/reset”;
/*#endregion*/
/*#region ELEMENTS */
// Bare unclassed elements. No classes used.
@import “4-elements/forms”;
@import “4-elements/headings”;
@import “4-elements/images”;
@import “4-elements/page”;
@import “4-elements/tables”;
@import “4-elements/typography”;
/*#endregion*/
/*#region OBJECTS */
// Non-cosmetic design patterns. Classes used.
@import “5-objects/helpers”;
@import “5-objects/layout”;
@import “5-objects/media”;
/*#endregion*/
/*#region COMPONENTS */
// Pieces of user interface. Cosmetic design patterns.
@import “6-components/buttons/buttons”;
@import “6-components/forms/custom-forms”;
@import “6-components/navigation/site-navigation”;
@import “6-components/site-footer/site-footer”;
@import “6-components/slick/slick”;
@import “6-components/tabs/tabs”;
@import “6-components/modules/modules”;
@import “6-components/modules/article-listing”;
@import “6-components/modules/banner”;
@import “6-components/modules/blog-filter-grid”;
@import “6-components/modules/bordered-info-blocks”;
@import “6-components/modules/case-studies-grid”;
@import “6-components/modules/case-studies-slideshow”;
@import “6-components/modules/case-study-page”;
@import “6-components/modules/contact-page”;
@import “6-components/modules/contact-form”;
@import “6-components/modules/contained-modules”;
@import “6-components/modules/fullwidth-overlapping-image-text-block”;
@import “6-components/modules/logo-strip”;
@import “6-components/modules/overlapping-images-background-blocks”;
@import “6-components/modules/paragraph-block-with-image”;
@import “6-components/modules/services-listing-block”;
@import “6-components/modules/tabbed-slideshows”;
@import “6-components/modules/text-icon-strip”;
u/import “6-components/page-type-styles/blog-post”;
u/import “6-components/page-type-styles/basic-content”;
// NEW COMPONENTS GO HERE //
/*#endregion*/
/*#region TRUMPS */
// Overrides and heavy-handed styling.
// u/import “7-trumps/print”; // uncomment if needed
u/import “7-trumps/quick-fix”;
u/import “7-trumps/woocommerce”;
/*#endregion*/
u/import “8-tickets/tickets-style.css”;
​
[ad_2]