Dynamic Pages With Custom Objects

[cives]

Hi there, I’m following along this tutorial: Build dynamic pages using CRM objects - HubSpot docs

Here is a link to content staging: https://www-nhada-com.sandbox.hs-sites.com/training/dynamic-slug

So far, I’ve created two modules:

Listing

{% if dynamic_page_crm_object_type_fqn %}{# dynamic listing page #}

 {% set training_events = crm_objects(dynamic_page_crm_object_type_fqn, "limit=200","training_name, category, date, start_time, end_time, featured_image, dynamic_page_slug") %}
 {# To see all of the properties your object during development, print it to the page with the |pprint filter #} 

 {% for event in training_events.results %}

 <a class="pwr-post-item mix {% for tag in event.category %}{{ tag.name }}{% endfor %}" href="{{ request.path }}/{{ event.dynamic_page_slug }}" style="height: 608px;">
 <div class="pwr-3D-box">
 <div class="pwr-post-item__content pwr-3D-box__sensor pwr-3D-box--shaddow-on-hover pwr--colored-box">
 <div class="pwr-post-item__img" style="background-image: url({{ event.featured_image }});background-image: -webkit-image-set(url({{ event.featured_image }}) 1x, url({{ event.featured_image }}) 2x);"></div>
 <div class="pwr-post-item__overlay"></div>
 <div class="pwr-post-item__info-box pwr-3D-box__info-box">
 <div class="pwr-post-item__author" id="hubspot-author_data" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
 <span class="pwr-post-item__name"> {{ event.category }}<br>{{ event.date|datetimeformat('%b %d, %Y') }}</span>
 </div>
 <h2 class="pwr-post-item__title" id="save-the-date-nhada-virtual-2020-business-conference--partner-expo">{{ event.training_name }}</h2>
 <div class="pwr-post-item__desc">

<p class="u-small-text">{{ training_event.description|striptags|truncatehtml(175) }}</p> 
 </div>
 <span class="pwr-post-item__more-link">Learn More & Register<span class="pwr-link-icon pwr--padding-l-sm"><span id="hs_cos_wrapper_module_1547050229694828_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_icon" style="" data-hs-cos-general-type="widget" data-hs-cos-type="icon"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><g id="layer1"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></g></svg></span></span></span>
 </div>
 </div>
 </div>
 </a>
 {% endfor %}
{% endif %}

And single:

{% if dynamic_page_crm_object and !module.training_event %}{# detail page and content creator has not selected an object#}

 {% set training_event = dynamic_page_crm_object %} 
 {# easy variable to access the CRM objects properties from #}
 <div class="pwr-hero pwr-hero--x-small pwr--dark lazyloaded" style="background-color: rgba(34, 84, 254, 1.0)">

 <div class="page-center pwr-hero__info-box pwr-hero__info-box--centered ">

 <h1 class="pwr-hero__title pwr-hero__title--default pwr--toc-ignore aos-init aos-animate" data-aos="fade-in" data-aos-delay="50" id="events">{{training_event.training_name}}</h1>

 </div>

</div>
 {# To see all of the properties your object during development, print it to the page with the |pprint filter #} 

{% else %}{# The page is not a dynamic page or the user selects a specific object, we can get the data from a CRM object field if there is data. #}

 {% set training_event = module.training_event.properties %}
 {# easy variable to access the CRM objects properties from #}
 {# To see all of the properties your object during development, print it to the page with the |pprint filter #} 

 <section aria-label="featured car">
 <div class="carImage">
 <h1>{{training_event.training_name}}</h1>
 </div>
 </section>
{% endif %}

The problem I’m running into is on the Training Event (custom object) single page, I’d like to replace the hero/top banner section with some information more specific to that training. Ideally using a featured image as a background, etc. I’ve been able to create a banner that does this (shown in the screenshot below) but it is confined within the container of the page, and I am unable to hide the “events listing” banner on the single pages.

Has anyone else run into this?

Training Single

Training Listing

I’ve tried placing the training single module above the listing banner, outside of the container in the drag and drop, but nothing seems to work!

All help is appreciated. Thanks,

[Jaycee_Lewis]

Hey, @cives Thanks for reaching out! Let’s see if we can get the converstaion going — @alyssamwilie @Indra @jonchim, do you have any tips you can share with @cives?

Thank you very much! — Jaycee

[alyssamwilie]

Hi @cives ,

There’s two options here.

1. Make a custom template with two dnd areas that are wrapped in the dynamic content if statements. That way the template will know which content is supposed to show on which dynamic page. If you’re using a Marketplace theme though you would have to create a Child theme to be able to add new templates to it. The main content of the template would look something like:

{# Add is_in_editor so you'll be able to see both in the page editor %}
{% if dynamic_page_crm_object_type_fqn || is_in_editor %}
 {% dnd_area "main_page" %}
 {% dnd_section full_width=true %}
 {% dnd_module path="your/hero/module/path" %}{% end_dnd_module %}
 {% end_dnd_section %}

 {% dnd_section %}
 {% dnd_module path="your/listing/module/path" %}{% end_dnd_module %}
 {% end_dnd_section %}
 {% end_dnd_area %}
{% endif %}

{% if dynamic_page_crm_obect || is_in_editor %}
 {% dnd_area "item_page" %}
 {% dnd_section full_width=true %}
 {% dnd_module path="your/hero/module/path" %}{% end_dnd_module %}
 {% end_dnd_section %}

 {% dnd_section %}
 {% dnd_module path="your/item/module/path" %}{% end_dnd_module %}
 {% end_dnd_section %}
 {% end_dnd_area %}
{% endif %}

2. You could create your own hero module with the dynamic if statements to determine which hero to show.

{% if dynamic_page_crm_object_type_fqn %}
 Listing page hero content here
{% elif dynamic_page_crm_obect %}
 Item page hero content here
{% endif %}

To make the module full width on the page you would just click into the Section it’s in > open Alignment and spacing > and click Full width under Content Alignment.

[cives]

Thank you for your response. This seems to be working with the exception of the training_event.training_name not working properly. I opted to create my own header module as you recommended. The banner itself loads, but not the name of the page/event when a dynamic object is clicked. Is something formatted incorrectly on the below:

{% if dynamic_page_crm_object_type_fqn %}
<div class="pwr-hero pwr-hero--x-small pwr--dark lazyloaded" style="background-color: rgba(34, 84, 254, 1.0)">

 <div class="page-center pwr-hero__info-box pwr-hero__info-box--centered ">

 <h1 class="pwr-hero__title pwr-hero__title--default pwr--toc-ignore aos-init aos-animate" data-aos="fade-in" data-aos-delay="50" id="events">Training</h1>

 </div>

</div>
{% elif dynamic_page_crm_obect and !module.training_event %}
 {% set training_event = dynamic_page_crm_object %} 

{% else %}{# The page is not a dynamic page or the user selects a specific object, we can get the data from a CRM object field if there is data. #}

 {% set training_event = module.training_event.properties %}

<div class="pwr-hero pwr-hero--x-small pwr--dark lazyloaded" style="background-color: rgba(34, 84, 254, 1.0)">

 <div class="page-center pwr-hero__info-box pwr-hero__info-box--centered ">

 <h1 class="pwr-hero__title pwr-hero__title--default pwr--toc-ignore aos-init aos-animate" data-aos="fade-in" data-aos-delay="50" id="events">{{training_event.training_name}}</h1>

 </div>

</div>
{% endif %}