DEV Community: Evrig_Solutions

Hyva : How to create Read More Read Less Button

Evrig_Solutions — Wed, 18 Dec 2024 09:32:50 +0000

In this tutorial, we’ll walk you through how to easily create a “Read More Read Less” button in your Hyva Magento2 theme using Tailwind CSS and Alpine JS. This functionality enhances user experience by allowing users to toggle content visibility, making your page cleaner and more interactive.

Step-1. You just copy and paste the below code into your PHTML File, CMS block, or CMS Page.

You have two options for implementing the “Read More Read Less” button: with or without specifying height. Choose the approach that best fits your requirements.

Option: 1 WITHOUT height

<div x-data="{ isCollapsed: false, maxLength: 20, originalContent: '', content: '' }"
   x-init="originalContent = $el.firstElementChild.textContent.trim(); content = originalContent.slice(0, maxLength)"
>
   <span x-text="isCollapsed ? originalContent : content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span>
   <button
       @click="isCollapsed = !isCollapsed"
       x-show="originalContent.length > maxLength"
       x-text="isCollapsed ? 'Show less' : 'Show more'"
       class="cursor-pointer uppercase font-bold"
   >
   </button>
</div>

Option: 2 WITH height

<div x-data="{ expanded: false }">
   <div class="relative" x-bind:class="{'max-h-48 overflow-hidden': !expanded}" x-ref="container" x-bind:style="expanded ? 'max-height: ' + ($refs.container.offsetHeight + 20) + 'px; padding-bottom: 40px;' : ''">
       <p class="pb-10" x-bind:class="{'pb-0': expanded}">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       <div class="text-primary-500 text-center cursor-pointer uppercase font-bold absolute left-0 right-0 z-20 mx-auto bottom-0" @click="expanded = !expanded">
           <span x-text="expanded ? 'Read Less' : 'Read More'"></span>
       </div>
   </div>
</div>

Step-2. Run the below commands to see your changes
Once you’ve added the code, you need to run the following commands to see the changes in your Magento2 theme.

1.Clear the cache:

bin/magento cache:clean

2.Build your Tailwind CSS:

npm run build-prod

These commands ensure that the changes take effect on your site.

Advantages to adding the Read More Read Less Button:

Achieve this without adding any external JS/CSS.
Minimal use of Tailwind classes and Alpine.
Customizable: You can change the design to meet your requirements.
Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.
Customers can’t scroll more if they don’t want to read the full content

We hope this tutorial makes it easy for you to integrate a “Read More Read Less” button into your Hyva Magento 2 theme. It’s a simple yet effective way to enhance content visibility and improve the user experience on your site.

At Evrig, we specialize in creating high-quality Magento stores that are both functional and user-friendly. If you’re implementing custom features like the “Read More Read Less” button or need any other Magento development assistance, our team of experts is ready to support you every step of the way.

Get in touch with us today to discuss how we can help you elevate your e-commerce website with custom Magento solutions, tailored design and optimal performance.

Hyva release version: 1.3.10 for performance and User experience

Evrig_Solutions — Fri, 13 Dec 2024 09:39:00 +0000

Hyva Themes continues to lead the way in Magento front-end development with the release of version 1.3.10, focusing on enhanced performance and user experience. This update brings exciting features, including PageBuilder improvements and experimental page transitions, designed to streamline workflows and create dynamic e-commerce experiences.

In this blog, we’ll explore the key enhancements and guide you on how to implement them for your Magento store.

PageBuilder Improvements:

Magento 2 Page Builder is a powerful content creation tool that simplifies the process of designing and managing content pages for Magento stores.

It’s intuitive drag-and-drop interface.
PageBuilder allows users to create dynamic and visual layouts without requiring extensive technical knowledge or coding skills.
PageBuilder allows users a wide range of customizable content types, including banners, sliders, product carousels, and static blocks.
We can integrate directly into the Magento admin panel
Page Builder ensures seamless workflow and real-time previews and op
timizing site performance.

Image SRC

Previously we were unable to add dimensions and Lazy loading in the image src which one upload via PageBuilder. After upgrading to the latest Hyva we can easily add image dimensions and enable Lazy loading from admin configuration. You just need to follow the following steps.

Login to the admin panel and create a new CMS static block.
Drag image from the left panel and upload mobile and desktop images
Enable Lazy Loading.
If you want to use native image dimensions, enable it.
If youwant to use different image height and width just disable Use native image dimensions and add your image dimensions.

Background Image

Previously we were unable to add Lazy loading in the background images which one upload via PageBuilder. After upgrading to the latest Hyva we can easily enable Lazy loading from admin configuration. You just need to follow the following steps.

Login to the admin panel and create a new CMS static block.
Drag row from the left panel and upload background images for mobile and desktop.
Enable Lazy Loading.
After enable you can see below attribute in your background image div data-ba ckground-lazy-load="true"

You can also enable by default to do below configuration from the admin

Login to the admin panel
Store-> Configuration -> Hyvä Themes -> PageBuilder -> Enable lazy-loading by default for background images -> set value Yes

Experimental Page Transitions:

Experimental page transitions are a cutting-edge feature designed to create smooth, immersive navigation experiences on the web. By leveraging technologies like the Page Transition API and advanced animations, these transitions allow developers to animate elements between pages. They can reduce the abruptness of traditional page reloads by blending visual elements or fading content in and out, offering a more dynamic and polished interaction. You just need to follow the following steps to enable it.

Login to the admin panel
Store -> Configuration -> Hyvä Themes -> Experimental -> Enable View Transitions

Ready to upgrade and unlock the full potential of your Magento store? Explore the official Hyva release notes for detailed insights. Need expert assistance?

Contact Evrig today! Our team specializes in Magento development and Hyva implementations, ensuring seamless upgrades and personalized solutions tailored to your business needs.

Let’s transform your e-commerce experience together.

Hyva: Display PDP Sections as Tabs on Desktop and Accordion on Mobile

Evrig_Solutions — Tue, 10 Dec 2024 07:45:56 +0000

In this tutorial, Today We will explain How to make PDP Sections display as Tabs in Desktop View and Accordion in Mobile View instead of Cards.

**Step 1: Add the Code
**You just copy and paste the below code into your PHTML File, CMS block, or CMS Page.

<div x-data="{ tab: 'tab1' }" id="tab_wrapper">
   <div class="text-center border-gray-300 border-b hidden md:flex md:justify-cente`r">
       <div :class="{ 'text-red-800': tab === 'tab1' }" @click.prevent="tab = 'tab1'" class="text-xl mx-4 font-bold text-black cursor-pointer">TAB-1</div>
       <div :class="{ 'text-red-800': tab === 'tab2' }" @click.prevent="tab = 'tab2'" class="text-xl mx-4 font-bold text-black cursor-pointer">TAB-2</div>
   </div>
   <div>
       <div class="md:hidden text-xl font-bold cursor-pointer p-2 text-black bg-gray-100 border border-gray-300"
            @click="tab = 'tab1'"
            :class="{ 'active text-red-800': tab === 'tab1' }">
           TAB-1
       </div>
       <div x-show="tab === 'tab1'" class="p-3">
           <h2>TAB-1 Content</h2>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
       </div>
   </div>
   <div>
       <div class="md:hidden text-xl font-bold cursor-pointer p-2 text-black bg-gray-100 border border-gray-300"
            @click="tab = 'tab2'"
            :class="{ 'active text-red-800': tab === 'tab2' }">
           TAB-2
       </div>
       <div x-show="tab === 'tab2'" class="p-3">
           <h2>TAB-2 Content</h2>
           <p> but also the leap into electronic typesetting, remaining unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
       </div>
   </div>
</div>
```



**Step 2: Run the Commands
**Run the below commands to see your changes
`bin/magento cache:clean`



```
npm run build-prod
```



- Thebin/magento cache:clean command clears your Magento cache.

- The npm run build-prod command builds your Tailwind styles in the theme directory:
 app/design/frontend/Vendor/default/web/tailwind

**Advantages of This Approach
**
- Achieve this without adding any external JS/CSS.
- Minimal use of Tailwind classes and Alpine.
- Customizable: You can change the design to meet your requirements.
- Mobile friendly: It will convert accordion in the mobile view.
- Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.

**_[Get in Touch
](https://www.evrig.com/contact-us/)_**If you’re looking to optimize your PDP for better functionality, speed and user experience, reach out to us today! Whether it’s [Hyva](https://www.evrig.com/magento-2-hyva-theme-development-company/), custom development or performance optimization, we can help you achieve your business goals.

Contact Evrig for a free consultation and see how we can help you create seamless, engaging e-commerce solutions!