Evrig

+1 512-5822-377

Get in Touch

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

  • December 4, 2024
  • Category: Hyva
No Comments

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.

Copy Code 


<div x-data="{ tab: 'tab1' }" id="tab_wrapper">
   <div class="text-center border-gray-300 border-b hidden md:flex md:justify-center">
       <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

Copy Code 


bin/magento cache:clean
Copy Code 


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
  1. Achieve this without adding any external JS/CSS.
  2. Minimal use of Tailwind classes and Alpine.
  3. Customizable: You can change the design to meet your requirements.
  4. Mobile friendly: It will convert accordion in the mobile view.
  5. Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.
    For a comprehensive walkthrough of this code and to explore various customization options, watch the video below.

Get in Touch

If you’re looking to optimize your PDP for better functionality, speed and user experience, reach out to us today! Whether it’s Hyva, 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!