Smart Rules Issue

Developer Support CMS Development
1

I have a problem with the “smart rules” if you can help me please:

I happen to have created a module that fulfills the carousel task, which I made with swiper js. The module works correctly, each slide has 2 columns, on the left an image and on the right text. This is dynamic, you can add as many slides as you want, and you can edit the image and text as you like. Both in the editor, in the preview and in the published page it works correctly. The problem appears when I apply smart rules, for example in my case, I have applied the smart rule of country, then for colombia I want to show some content and in mexico for example I want to show a different content. In the editor it looks correct, in the preview, it also looks good. The problem appears when I publish it, when I go to the public link no content appears. So I inspect the code in the browser and I can see that the structure is displayed (div, classes, id, etc), what I can not see is the content, it is as if it did not exist.
That is the problem that I can’t solve.
Thanks for your help.

2

Hey @Jose10 from what I’ve seen in the past this has been a jQuery issue, are you using jQuery in your HubSpot account? If so, does switching the version to another version alieviate this?

If not, if you could provide a link to your page I can take a deeper look!

3

Thank you very much for your answer and for your intention to help, thank you very much.

I will provide more details of what is happening:

  • Module
    The module is a slider which uses the Swiper library https://swiperjs.com/ and works correctly without smart rules. Each slide consists of 2 columns, the left column is an image and the right column has image and text. These two columns are enclosed in a box which is a slide. These slides have a repeater which allows the user to add as many slides as desired.
  • Things I have managed to discard:
    The problem has nothing to do with either the image or the text. I created another image and text module, but not a slider, and it looks correct, both with and without smart rules.
  • Supposed conclusion.
    The problem is in the slider, because as I mentioned before, the image and text module work correctly, but apparently when the intelligent rule detects the slider there is a conflict.
  • Clarification:
    The slider works correctly when the smart rules are not applied, the error occurs when I apply the smart rule of the country.
    It is true that I would need a VPN to verify if by putting another country different from mine, to be able to view what I have done, but in this case it does not apply because I am just adding the smart rule of my country. And in the case of other countries, I have people in those places who can verify what I am saying and the error continues to occur
    Also clarify that in the HubSpot editor everything is seen correctly and even in the preview, but when I visit the public page, that is where the error is detected.

I will show you the HTML, CSS and JS code, in addition, how I view the error and what I managed to see in the inspector

I could leave the error page, but I would need you to specify the country you are in please to apply the smart rule according to your location.
HTML

{% require_css %}
<style>
 {% scope_css %}

 .testimonial-slider {
 {{ module.style.spacing.desktop.css }}
 }
 .testimonial-slider .swiper-slide {
 grid-template-columns: {{ module.style.column_size.left ~ '%' }} {{ module.style.column_size.right ~ '%' }};
 {% if module.style.add_box_shadow %}
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 {% endif %}
 }

 {# ---- Tablet Breakpoint ---- #}

 @media (max-width: 992px) {
 .testimonial-slider {
 {{ module.style.spacing.tablet.css }}
 }
 }

 {# ---- Mobile Breakpoint ---- #}

 @media (max-width: 700px) {
 .testimonial-slider {
 {{ module.style.spacing.mobile.css }}
 }
 }

 {% end_scope_css %}
</style>
{% end_require_css %}

<div class="testimonial-slider">
 <div class="testimonial-slider__container">
 {% if module.add_text %}
 <div class="testimonial-slider__text"> 
 {{ module.text }}
 </div>
 {% endif %} 
 <div class="testimonial-slider__slides-container">
 <!-- Swiper -->
 <div class="swiper mySwiper testimonial-slider__swiper">
 <div class="swiper-wrapper testimonial-slider__wrapper">
 {% for item in module.add_edit_slides %}
 <div class="swiper-slide testimonial-slider__slide">
 <div class="testimonial-slider__slide-image">
 {% if item.image.image.src %} 
 {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}"' %}
 {% if item.image.image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif item.image.image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ item.image.image.max_width|escape_attr }}" height="{{ item.image.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = item.image.image.loading != 'disabled' ? 'loading="{{ item.image.image.loading|escape_attr }}"' : '' %}
 <img src="{{ item.image.image.src|escape_url }}" alt="{{ item.image.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
 {% endif %}
 </div>
 <div class="testimonial-slider__slide-text">
 {% if item.text.add_image %}
 <div class="testimonial-slider__slide-text-logo">
 {% if item.text.image.src %}
 {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}"' %}
 {% if item.text.image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif item.text.image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ item.text.image.max_width|escape_attr }}" height="{{ item.text.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = item.text.image.loading != 'disabled' ? 'loading="{{ item.text.image.loading|escape_attr }}"' : '' %}
 <img src="{{ item.text.image.src|escape_url }}" alt="{{ item.text.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
 {% endif %}
 </div>
 {% endif %}
 <div class="testimonial-slider__slide-text-content">
 {{ item.text.text }}
 </div>
 {% if item.text.add_name_and_rol %}
 <div class="testimonial-slider__slide-text-name">
 {{ item.text.name_and_rol }}
 </div>
 {% endif %}
 </div>
 </div>
 {% endfor %}
 </div>
 <div class="swiper-pagination"></div>
 </div>
 </div>
 </div> 
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CSS

.testimonial-slider {
 width: 100%;
 padding: 0 20px;
} 

.testimonial-slider__container {
 max-width: 1280px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.testimonial-slider__text * {
 margin: 0;
}

.testimonial-slider .swiper {
 width: 100%;
 height: 100%;
 padding: 20px 20px 90px;
}

.testimonial-slider .swiper-slide {
 min-height: 620px;
 display: grid; 
 border-radius: 20px;
 overflow: hidden; 
}

.testimonial-slider__slide-image img {
 display: block;
 width: 100%;
 height: 100% !important;
 object-fit: cover;
}

.testimonial-slider__slide-text * {
 margin: 0;
}

.testimonial-slider__slide-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 40px;
 padding: 20px 40px;
}

.testimonial-slider__slide-text img {
 max-width: 100px !important;
}

.testimonial-slider__slide-text-name {
 text-align: center;
 color: #0083FF;
 font-weight: 600;
}

.testimonial-slider .swiper-pagination {
 bottom: 40px !important;
}

@media (max-width: 700px) {
 .testimonial-slider .swiper-slide {
 grid-template-columns: 100% !important;
 }
}

JS

var swiper = new Swiper(".mySwiper", {
 spaceBetween: 40,
 loop: true,
 speed: 800,
 autoplay: {
 delay: 10000,
 disableOnInteraction: true,
 },
 pagination: {
 el: ".swiper-pagination",
 clickable: true,
 },
});

Browser.png
Browser.png1119×681 10.5 KB

Hubspot Editor.png
Hubspot Editor.png1260×756 25 KB

Browser 2.png
Browser 2.png1851×753 70.7 KB

4

Hi @Jose10

Thanks for sharing the details but still I was unable to find any issues. As you can see in this loom smart rules are working fine.

“I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!”

5

Hi @Jose10

I can’t say for sure what’s causing this issue. When I tested it on a dummy page then my content was visible if you can share more details like a screenshot of your smart rules or the code of your module it can help us to identify the issue.

“I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!”

6

Thank you very much for your answer and for your intention to help, thank you very much.

I will provide more details of what is happening:

  • Module
    The module is a slider which uses the Swiper library https://swiperjs.com/ and works correctly without smart rules. Each slide consists of 2 columns, the left column is an image and the right column has image and text. These two columns are enclosed in a box which is a slide. These slides have a repeater which allows the user to add as many slides as desired.
  • Things I have managed to discard:
    The problem has nothing to do with either the image or the text. I created another image and text module, but not a slider, and it looks correct, both with and without smart rules.
  • Supposed conclusion.
    The problem is in the slider, because as I mentioned before, the image and text module work correctly, but apparently when the intelligent rule detects the slider there is a conflict.
  • Clarification:
    The slider works correctly when the smart rules are not applied, the error occurs when I apply the smart rule of the country.
    It is true that I would need a VPN to verify if by putting another country different from mine, to be able to view what I have done, but in this case it does not apply because I am just adding the smart rule of my country. And in the case of other countries, I have people in those places who can verify what I am saying and the error continues to occur
    Also clarify that in the HubSpot editor everything is seen correctly and even in the preview, but when I visit the public page, that is where the error is detected.

I will show you the HTML, CSS and JS code, in addition, how I view the error and what I managed to see in the inspector

I could leave the error page, but I would need you to specify the country you are in please to apply the smart rule according to your location.
HTML

{% require_css %}
<style>
 {% scope_css %}

 .testimonial-slider {
 {{ module.style.spacing.desktop.css }}
 }
 .testimonial-slider .swiper-slide {
 grid-template-columns: {{ module.style.column_size.left ~ '%' }} {{ module.style.column_size.right ~ '%' }};
 {% if module.style.add_box_shadow %}
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 {% endif %}
 }

 {# ---- Tablet Breakpoint ---- #}

 @media (max-width: 992px) {
 .testimonial-slider {
 {{ module.style.spacing.tablet.css }}
 }
 }

 {# ---- Mobile Breakpoint ---- #}

 @media (max-width: 700px) {
 .testimonial-slider {
 {{ module.style.spacing.mobile.css }}
 }
 }

 {% end_scope_css %}
</style>
{% end_require_css %}

<div class="testimonial-slider">
 <div class="testimonial-slider__container">
 {% if module.add_text %}
 <div class="testimonial-slider__text"> 
 {{ module.text }}
 </div>
 {% endif %} 
 <div class="testimonial-slider__slides-container">
 <!-- Swiper -->
 <div class="swiper mySwiper testimonial-slider__swiper">
 <div class="swiper-wrapper testimonial-slider__wrapper">
 {% for item in module.add_edit_slides %}
 <div class="swiper-slide testimonial-slider__slide">
 <div class="testimonial-slider__slide-image">
 {% if item.image.image.src %} 
 {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}"' %}
 {% if item.image.image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif item.image.image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ item.image.image.max_width|escape_attr }}" height="{{ item.image.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = item.image.image.loading != 'disabled' ? 'loading="{{ item.image.image.loading|escape_attr }}"' : '' %}
 <img src="{{ item.image.image.src|escape_url }}" alt="{{ item.image.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
 {% endif %}
 </div>
 <div class="testimonial-slider__slide-text">
 {% if item.text.add_image %}
 <div class="testimonial-slider__slide-text-logo">
 {% if item.text.image.src %}
 {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}"' %}
 {% if item.text.image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif item.text.image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ item.text.image.max_width|escape_attr }}" height="{{ item.text.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = item.text.image.loading != 'disabled' ? 'loading="{{ item.text.image.loading|escape_attr }}"' : '' %}
 <img src="{{ item.text.image.src|escape_url }}" alt="{{ item.text.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
 {% endif %}
 </div>
 {% endif %}
 <div class="testimonial-slider__slide-text-content">
 {{ item.text.text }}
 </div>
 {% if item.text.add_name_and_rol %}
 <div class="testimonial-slider__slide-text-name">
 {{ item.text.name_and_rol }}
 </div>
 {% endif %}
 </div>
 </div>
 {% endfor %}
 </div>
 <div class="swiper-pagination"></div>
 </div>
 </div>
 </div> 
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CSS

.testimonial-slider {
 width: 100%;
 padding: 0 20px;
} 

.testimonial-slider__container {
 max-width: 1280px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.testimonial-slider__text * {
 margin: 0;
}

.testimonial-slider .swiper {
 width: 100%;
 height: 100%;
 padding: 20px 20px 90px;
}

.testimonial-slider .swiper-slide {
 min-height: 620px;
 display: grid; 
 border-radius: 20px;
 overflow: hidden; 
}

.testimonial-slider__slide-image img {
 display: block;
 width: 100%;
 height: 100% !important;
 object-fit: cover;
}

.testimonial-slider__slide-text * {
 margin: 0;
}

.testimonial-slider__slide-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 40px;
 padding: 20px 40px;
}

.testimonial-slider__slide-text img {
 max-width: 100px !important;
}

.testimonial-slider__slide-text-name {
 text-align: center;
 color: #0083FF;
 font-weight: 600;
}

.testimonial-slider .swiper-pagination {
 bottom: 40px !important;
}

@media (max-width: 700px) {
 .testimonial-slider .swiper-slide {
 grid-template-columns: 100% !important;
 }
}

JS

var swiper = new Swiper(".mySwiper", {
 spaceBetween: 40,
 loop: true,
 speed: 800,
 autoplay: {
 delay: 10000,
 disableOnInteraction: true,
 },
 pagination: {
 el: ".swiper-pagination",
 clickable: true,
 },
});

Browser.png
Browser.png1119×681 10.5 KB

Hubspot Editor.png
Hubspot Editor.png1260×756 25 KB

Browser 2.png
Browser 2.png1851×753 70.7 KB

7

It sounds like you’ve done a great job setting up your carousel module with Swiper JS, making it dynamic and functional in the editor, preview, and published page—well done! However, the issue with your “smart rules” for country-specific content sounds frustrating. When you apply a smart rule to show different content for Colombia and Mexico, it seems to work perfectly in the editor and preview, but when you publish it, the content disappears despite the structure being present in the code. This suggests that the smart rules might not be properly triggering or rendering the content when the page is live.

One thing to check is whether the smart rules are correctly configured and whether they have any dependencies or conditions that might not be met when the page is live. Ensure that all required data for the smart rules is available and correctly passed in the live environment. Additionally, verify if there are any JavaScript errors or conflicts in the console that might be preventing the content from rendering. Sometimes, discrepancies between the preview environment and the live environment can cause issues like this, possibly due to differences in data availability or script execution. If everything seems correct and the problem persists, it might be helpful to reach out to support for the platform or tool you’re using, as they might have more specific insights or solutions for handling smart rules in live environment

regards, team mybakersfieldrealtor