• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 29.01.24, 10:59
  • Opened by: Cedric Casoni

Ticket #25254 - Assistance Required for Customizing Slide Description Position in Alysum AMP Carousel

Hello,

I hope this message finds you well. I am reaching out for assistance with the AMP carousel feature within the Alysum theme. My objective is to place the “Slide Description #1” below the “slide image #1” in the carousel. Currently, when I activate the ‘absolute’ positioning option, the description overlays on the image. Conversely, when I deactivate this option, the description disappears, which leads me to believe it might be hidden behind the image.

I have attempted to adjust the layout using various CSS properties such as margin and padding, but to no avail. I am attaching a screenshot to illustrate the desired outcome clearly. Could you please provide guidance on how to achieve this layout, or if there is a specific class or method within Alysum AMP that I should utilize?

Thank you for your time and assistance.

Cédric

Attachments:

Comments

Fred 29 Jan 2024, 11:45

Hi, Cedric.
It can be a bit tricky because of AMP requirements to the code.
There is a height of carousel that calculated based on image sizes. You need to customise carousel file like this https://take.ms/sgvSi where you can adjust carousel height manually (maybe don't even change image attributes that I show you on the screenshot)

And then add this CSS to move the text below the image

.main-slider .fixedblock.absolute {position: static}
Cedric Casoni 29 Jan 2024, 16:47

Hello Fred, thak you for your quick answer. I will do not touch this. I have another solution.
Do you know if it's possible to add html code ? I would like create a special sticky header.

Thank you

Fred 30 Jan 2024, 09:46

you can add html code to any template files

Cedric Casoni 01 Feb 2024, 12:48

Hello Fred, i need your help.

I have implemented a visually hidden H1 tag containing the primary keyword phrase "Le spécialiste de la vente d'alarme sans fil, Caméra IP, Vidéosurveillance, Equipement de protection, Domotique." for SEO purposes. This tag is placed behind the logo in the header of my AMP pages to maintain a clean design while optimizing for search engines.

However, I encountered a challenge: I would like this H1 tag to appear only on the homepage and switch to an H2 tag on all other pages. This adjustment is aimed at optimizing my site's SEO by having a single H1 tag on each page that accurately represents the page content. Unfortunately, I have been unable to achieve this functionality with the current configuration of the AMP module.

Could you please provide guidance or a solution on how to dynamically change the tag from H1 on the homepage to H2 on other pages within the AMP module?
Thks.

Fred 01 Feb 2024, 21:53

Hi, Cedric.
Try this trick

<{($page == 'index') ? 'h1' : 'h2'}>...</{($page == 'index') ? 'h1' : 'h2'}>
Cedric Casoni 02 Feb 2024, 09:04

Hi Fred,

Following your advice, we attempted to implement the dynamic switching between H1 and H2 tags using the suggested method (<{($page == 'index') ? 'h1' : 'h2'}>…</{($page == 'index') ? 'h1' : 'h2'}>). Unfortunately, this approach did not produce the desired outcome, as it seems the variable or condition did not correctly identify the homepage versus other pages.

Additionally, we tried to utilize the $page_name variable to dynamically render H1 on the homepage and H2 on other pages by incorporating a conditional statement directly within the template. However, it appears that $page_name is not recognized or available in the template's context, as our debug attempts to display the value of $page_name resulted in == $0 across all pages, indicating that the variable might not be set or accessible as expected.

Given these challenges, we suspect there might be a specific approach or additional context required to effectively utilize these variables within the AMP module's templates or that an alternative method might be necessary to achieve the intended functionality.

Could you please provide further guidance or suggest a different approach that could help us achieve the dynamic tag switching based on whether the user is on the homepage or another page? Any additional insights or updates to the module that might address this issue would be greatly appreciated.

Thks
Cédric

Fred 02 Feb 2024, 09:35

try this variable instead of $page

$page.page_name
Cedric Casoni 02 Feb 2024, 10:36

Following your recent advice to dynamically switch between H1 on the homepage and H2 on other pages using the variable $page.page_name, I've attempted to implement the suggested code in the style1.tpl file of the AMP module developed by Alysum for PrestaShop. Unfortunately, the solution doesn't seem to work as expected.

Here's a brief overview of what I tried:

I used the conditional statement directly in Smarty template as follows:
smarty

<header class="m20 general-item style1">

<!-- Dynamic H1 for homepage and H2 for other pages -->
<{{($page.page_name == 'index') ? 'h1' : 'h2'}} class="visually-hidden">
  Le spécialiste de la vente d'alarme sans fil, Caméra IP, Vidéosurveillance, Equipement de protection, Domotique.
</{{($page.page_name == 'index') ? 'h1' : 'h2'}}>

<!-- Rest of the header content -->

</header>
I also tried a more traditional approach with the if statement:
smarty

{if $page.page_name == 'index'}

  <h1 class="visually-hidden">Le spécialiste de la vente d'alarme sans fil, Caméra IP, Vidéosurveillance, Equipement de protection, Domotique.</h1>

{else}

  <h2 class="visually-hidden">Le spécialiste de la vente d'alarme sans fil, Caméra IP, Vidéosurveillance, Equipement de protection, Domotique.</h2>

{/if}
In both cases, the condition doesn't seem to be correctly evaluated, resulting in the tag not dynamically changing between H1 and H2 based on the page.

Could you please provide further guidance on how to properly implement this functionality? Is there a specific way to ensure the $page.page_name variable is correctly recognized and used in the AMP module templates?

Cédric

Fred 03 Feb 2024, 13:04

I don't have permissions to edit files on your server to check, but that works for me when I test it locally

Cedric Casoni 05 Feb 2024, 09:00

Hello Fred, you can give it a try and look with the development tools. The title is in H2 on the home page as on all pages.
it's the title : Le spécialiste de la vente d'alarme sans fil, Caméra IP, Vidéosurveillance, Equipement de protection, Domotique.

Fred 05 Feb 2024, 10:29

I need access to files to debug page variable