主页 / user-385553

Ann13's questions

Martin Hope
Ann13
Asked: 2020-06-05 15:56:16 +0000 UTC
  • 0

如果您在模板编辑中取消选中“允许指定商品数量”复选框，那么详细页面上的数量将被删除，但我需要仅在产品卡本身上将其删除。在 catalog.element/.default/card/template.php 中，如果我删除了一段代码，那么一般情况下一切都会中断，您无法将产品添加到购物车。请告诉我该怎么办？？

case 'quantity':
   if (!$haveOffers)
   {
      if ($actualItem['CAN_BUY'] && $arParams['USE_PRODUCT_QUANTITY'])
      {
         ?>
         <div class="product-item-info-container product-item-hidden" data-entity="quantity-block">
            <div class="product-item-amount">
               <div class="product-item-amount-field-container">
                  <span class="product-item-amount-field-btn-minus no-select" id="<?=$itemIds['QUANTITY_DOWN']?>"></span>
                  <input class="product-item-amount-field" id="<?=$itemIds['QUANTITY']?>" type="number"
                     name="<?=$arParams['PRODUCT_QUANTITY_VARIABLE']?>"
                     value="<?=$measureRatio?>">
                  <span class="product-item-amount-field-btn-plus no-select" id="<?=$itemIds['QUANTITY_UP']?>"></span>
                  <span class="product-item-amount-description-container">
                     <span id="<?=$itemIds['QUANTITY_MEASURE']?>">
                        <?=$actualItem['ITEM_MEASURE']['TITLE']?>
                     </span>
                     <span id="<?=$itemIds['PRICE_TOTAL']?>"></span>
                  </span>
               </div>
            </div>
         </div>
         <?
      }
   }
   elseif ($arParams['PRODUCT_DISPLAY_MODE'] === 'Y')
   {
      if ($arParams['USE_PRODUCT_QUANTITY'])
      {
         ?>
         <div class="product-item-info-container product-item-hidden" data-entity="quantity-block">
            <div class="product-item-amount">
               <div class="product-item-amount-field-container">
                  <span class="product-item-amount-field-btn-minus no-select" id="<?=$itemIds['QUANTITY_DOWN']?>"></span>
                  <input class="product-item-amount-field" id="<?=$itemIds['QUANTITY']?>" type="number"
                     name="<?=$arParams['PRODUCT_QUANTITY_VARIABLE']?>"
                     value="<?=$measureRatio?>">
                  <span class="product-item-amount-field-btn-plus no-select" id="<?=$itemIds['QUANTITY_UP']?>"></span>
                  <span class="product-item-amount-description-container">
                     <span id="<?=$itemIds['QUANTITY_MEASURE']?>"><?=$actualItem['ITEM_MEASURE']['TITLE']?></span>
                     <span id="<?=$itemIds['PRICE_TOTAL']?>"></span>
                  </span>
               </div>
            </div>
         </div>
         <?
      }
   }

   break;

битрикс
Martin Hope
Ann13
Asked: 2020-05-26 15:10:27 +0000 UTC
  • 0

在js的帮助下，我设计了一个下拉列表而不是选择。但是如果我使用 5 个列表，那么我将不得不使用不同的类编写 5 次 js 代码。

我认为这是不好的做法。

请告诉我如何为所有下拉列表创建一个函数？

function ready() {
    const select = document.querySelector('.select');
    const select_title = select.querySelector('.select_title');
    const select_labels = select.querySelectorAll('.select_label');

    select_title.addEventListener('click', () => {
        if ('active' === select.getAttribute('data-state')) {
            select.setAttribute('data-state', '');
        } else {
            select.setAttribute('data-state', 'active');
        }
    });

    // Close when click to option
    for (let i = 0; i < select_labels.length; i++) {
        select_labels[i].addEventListener('click', (evt) => {
            select_title.textContent = evt.target.textContent;
            select.setAttribute('data-state', '');
        });
    }
    
    ///close outside the element
    $(document).mouseup(function (e) {
        select.setAttribute('data-state', '');
    });
}
    document.addEventListener("DOMContentLoaded", ready);
.select {
    position: relative;
    width: 300px;
    height: 40px;
    margin: 20px 0;
}

.select[data-state="active"] .select_title::before {
    transform: translate(-3px, -50%) rotate(-45deg);
}

.select[data-state="active"] .select_title::after {
    transform: translate(3px, -50%) rotate(45deg);
}

.select[data-state="active"] .select_content {
    opacity: 1;
}

.select[data-state="active"] .select_label + .select_input + .select_label {
    max-height: 40px;
    border-top-width: 1px;
}

.select_title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 8px 16px;
    border-radius: 5px;
    border: solid 1px #c7ccd1;
    cursor: pointer;
    background-color: #38b0ff;
    color: #e9e9e9;
}

.select_title::before, .select_title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    display: block;
    width: 10px;
    height: 2px;
    transition: all 0.3s ease-out;
    background-color: #e9e9e9;
    transform: translate(-3px, -50%) rotate(45deg);
}

.select_title::after {
    transform: translate(3px, -50%) rotate(-45deg);
}

.select_title:hover {
   color: #ffffff;
}

.select_title:hover::before, .select_title:hover::after {
    background-color: #f3fdff;
}

.select_content {
    position: absolute;
    top: 40px;
    left: 3px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 6px);
    background-color: #ffffff;
    border: 1px solid #c7ccd1;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: all 0.3s ease-out;
    opacity: 0;
    z-index: 8;
}

.select_input {
    display: none;
}

.select_input:checked + label {
    background-color: #dedede;
}

.select_input:disabled + label {
    opacity: 0.6;
    pointer-events: none;
}

.select_label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    max-height: 0;
    padding: 0 20px;
    transition: all 0.1s ease-out;
    cursor: pointer;
    overflow: hidden;

}

.select_label + input + .select_label {
    border-top: 0 solid #C7CCD160;
}

.select_label:hover {
    background-color: #38b0ff !important;
    color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select" data-state="">
    <div class="select_title type_request" value="" data-default="">Выберите тип</div>
    <div class="select_content">
        <input id="option0" class="select_input" value="" type="radio" name="singleSelect" />
        <label for="option0" class="select_label">Выберите тип</label>
        <input id="option1" class="select_input type_request" value="1" type="radio" name="singleSelect" />
        <label for="option1" class="select_label">Один</label>
        <input id="option2" class="select_input type_request" value="2" type="radio" name="singleSelect" />
        <label for="option2" class="select_label">Два</label>
        <input id="option3" class="select_input type_request" value="3" type="radio" name="singleSelect" />
        <label for="option3" class="select_label">Три</label>
        <input id="option4" class="select_input type_request" value="4" type="radio" name="singleSelect" />
        <label for="option4" class="select_label">Четыре</label>
    </div>
</div>

javascript