0

Good afternoon! I have today wrapped our product custom options inside an accordion to reduce the height of the block for products with multiple categories of options, however the accordion sections only appear to be working in alternates. For example I have here a product with 5 separate categories of custom options available for the customer to choose, however the accordion is only working on option groups 1, 3 and 5. when clicking option groups 2 and 4, nothing happens. Does anyone have any experience with this please? It's driving me insane!

My phtml file is as follows (js at bottom):

<button class="accordion2" type="button"><label class="label" for="select_<?php echo /* @escapeNotVerified */$_option->getId()?>"><span><?php echo $block->escapeHtml($_option->getTitle())?></span>
</label></button>
<div class="field<?php echo /* @escapeNotVerified */$class?> panel2">
    <?php if ($status) : ?>
        <?php if ($type=='gallery') : ?>
            <div class="est_image_<?php echo /* @escapeNotVerified */$_option->getType()?> slideshow-container" id="est_image_<?php echo /* @escapeNotVerified */$_option->getType()?>_<?php echo /* @escapeNotVerified */$_option->getId()?>">
                <?php
                foreach ($_option->getValues() as $_value) {
                    $count++;
                    if ($_value->getImage()) {
                        if($optionNumber) {
                            $imgHtml = $imgHtml . '<div class="mySlides fade est_image_' .$_option->getType().'_'.$_option->getId().'" data-count="'.$count.'"  id="est_type_option_'.$_value->getId().'"><div class="numbertext"><span>'.$count.'/'.count($_option->getValues()).'</span></div><img src="' .$mediaUrl.''.$_value->getImage() . '"  class="option_image_fix est_type_option_' . $_option->getType() . '_' . $_value->getId() . '" /><div class="text"><span>' . $_value->getLable() . '</span></div></div>';
                        } else {
                            $imgHtml = $imgHtml . '<div class="mySlides fade est_image_' .$_option->getType().'_'.$_option->getId().'" data-count="'.$count.'"  id="est_type_option_'.$_value->getId().'"><img src="' .$mediaUrl.''.$_value->getImage(). '"  class="option_image_fix est_type_option_' . $_option->getType() . '_' . $_value->getId() . '" /><div class="text"><span>' . $_value->getLable() . '</span></div></div>';
                        }
                    }
                }
                ?>
                <?php echo /* @escapeNotVerified */$imgHtml?>
            </div>
            <br>
            <?php else: ?>
                <div class="est_image_<?php echo /* @escapeNotVerified */$_option->getType()?> thumbnail" id="est_image_<?php echo /* @escapeNotVerified */$_option->getType()?>_<?php echo /* @escapeNotVerified */$_option->getId()?>" style="display:flex">
                    <?php
                    foreach ($_option->getValues() as $_value) {
                        if ($_value->getImage()) {
                            if ($count <= 4) {
                                $count++;
                                $imgHtml = $imgHtml . '<div class="swiper-slide est_image_' .$_option->getType().'_'.$_option->getId().'" id="est_type_option_'.$_value->getId().'"><img src="' .$mediaUrl.''.$_value->getImage() . '" class="est_type_option_' . $_option->getType() . '_' . $_value->getId() . '" /><br/></div>';
                                $imgModel = $imgModel . '<div class="swiper-slide-more-options est_image_' .$_option->getType().'_'.$_option->getId().'" id="est_modal_option_' .$_value->getId().'"><div class="inner-img"><img src="' .$mediaUrl.''.$_value->getImage() . '" class="est_type_option_' . $_option->getType() . '_' . $_value->getId() . '" /></div><p class="label-text">' . $_value->getLable() . '</p></div>';
                            } else {
                                $count++;
                                $imgModel = $imgModel . '<div class="swiper-slide-more-options est_image_' .$_option->getType().'_'.$_option->getId().'" id="est_modal_option_'.$_value->getId().'"><div class="inner-img"><img src="' .$mediaUrl.''.$_value->getImage(). '" class="est_type_option_' . $_option->getType() . '_' . $_value->getId() . '" /></div>' . $_value->getLable() . '</div>';
                            }
                        }
                    }?>
                    <?php echo /* @escapeNotVerified */$imgHtml?>
                    <?php if ($count > 5) {?>
                     <div class="swiper-slide-more"><button class="swatch-button"><a class="action popup-open action_<?php echo /* @escapeNotVerified */$_option->getType()?>_<?php echo /* @escapeNotVerified */$_option->getId()?>" id="click-me" href="#">Show More</a></button>
                 </div>
             <?php }?>
         </div>
     <?php endif ?>
 <?php endif ?>
 <div class="control">
<?php echo $block->getValuesHtml()?>
<?php if ($_option->getIsRequire()): ?>
        <?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_RADIO || $_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_CHECKBOX): ?>
        <span id="options-<?php echo /* @escapeNotVerified */$_option->getId()?>-container"></span>
    <?php endif;?>
<?php endif;?>
</div>
</div>
<?php if ($type=='modal') : ?>
    <div id="popup-modal" class ="modal_<?php echo /* @escapeNotVerified */$_option->getType()?>_<?php echo /* @escapeNotVerified */$_option->getId()?>" style="display:none">
        <label class="label" for="select_<?php echo /* @escapeNotVerified */$_option->getId()?>">
            <h2><?php echo $block->escapeHtml($_option->getTitle())?></h2>
        </label>
        <div class="swiper-slide-more-options-block" >
            <?php echo /* @escapeNotVerified */$imgModel?>
        </div>
</div>

<?php endif;?>
<?php if ($status) : ?>
    <?php if ($type=='gallery') : ?>
        <script type="text/x-magento-init">
            {
                "*": {
                "EncoreSky_CustomOptionImage/js/option_gallery": {
                "optionType" :"<?php echo /* @escapeNotVerified */$_option->getType()?>",
                "optionId" :"<?php echo /* @escapeNotVerified */$_option->getId()?>"
            }
        }
    }
</script>
<?php else : ?>
    <script type="text/x-magento-init">
        {
            "*": {
            "EncoreSky_CustomOptionImage/js/option_modal": {
            "optionType" :"<?php echo /* @escapeNotVerified */$_option->getType() ?>",
            "optionId" :"<?php echo /* @escapeNotVerified */$_option->getId() ?>",
            "count" :"<?php echo /* @escapeNotVerified */$count ?>",
            "modalType" :"<?php echo /* @escapeNotVerified */$modalType ?>",
            "title" :"<?php echo /* @escapeNotVerified */$title ?>",
            "subTitle" :"<?php echo /* @escapeNotVerified */$subTitle ?>",
            "responsive" :"<?php echo /* @escapeNotVerified */$responsive ?>",
            "innerScroll" :"<?php echo /* @escapeNotVerified */$innerScroll ?>",
            "closeText" :"<?php echo /* @escapeNotVerified */$closeText ?>",
            "marginLeft" :"<?php echo /* @escapeNotVerified */$marginLeft ?>"
        }
    }
}

</script>
<?php endif;?>
<?php endif ?>
<script>
var acc = document.getElementsByClassName("accordion2");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active2");

    /* Toggle between hiding and showing the active panel */
    var panel2 = this.nextElementSibling;
    if (panel2.style.display === "block") {
      panel2.style.display = "none";
    } else {
      panel2.style.display = "block";
    }
  });
}
</script>

And my CSS:

.accordion2 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion2:hover {
  background-color: #ccc;
}

.panel2 {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.accordion2:after {
  content: '\02795'; 
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.