0

I created 2 text fields from the custom options

The input from this text fields is used to call a third party js library. Every time that the oniput event is triggered, this library should be called. So I modified the following file:

app/design/frontend/alonoraure/default/template/catalog/product/view/options/type/text.phtml

?>
<?php $_option = $this->getOption(); ?>
<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->escapeHtml($_option->getTitle()) ?></label>
    <?php echo $this->getFormatedPrice() ?></dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
    <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_FIELD): ?>
        <input type="text" onchange="opConfig.reloadPrice()"  oninput="engraver.setText(1,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)"  <?php if ($_option->getMaxCharacters()): ?> maxlength="<?php echo $_option->getMaxCharacters() ?>" <?php endif ?> id="options_<?php echo $_option->getId() ?>_text" class="input-text<?php echo $_option->getIsRequire() ? ' required-entry' : '' ?> <?php echo $_option->getMaxCharacters() ? ' validate-length maximum-length-'.$_option->getMaxCharacters() : '' ?> product-custom-option" name="options[<?php echo $_option->getId() ?>]" value="<?php echo $this->escapeHtml($this->getDefaultValue()) ?>" />
    <?php elseif ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_AREA): ?>
        <textarea id="options_<?php echo $_option->getId() ?>_text" onchange="opConfig.reloadPrice()" class="<?php echo $_option->getIsRequire() ? ' required-entry' : '' ?> <?php echo $_option->getMaxCharacters() ? ' validate-length maximum-length-'.$_option->getMaxCharacters() : '' ?> product-custom-option" name="options[<?php echo $_option->getId() ?>]" rows="5" cols="25"><?php echo $this->escapeHtml($this->getDefaultValue()) ?></textarea>
    <?php endif; ?>
    <?php if ($_option->getMaxCharacters()): ?>
        <p class="note"><?php echo Mage::helper('catalog')->__('Maximum number of characters:')?> <strong><?php echo $_option->getMaxCharacters() ?></strong></p>
    <?php endif; ?>
    </div>
</dd>

as you can see, this is the line in question

oninput="engraver.setText(1,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)

The problem is that I'm calling engraver.setText(1 for the 2 text fields, but the 1 should be the index of the iteration.

So for the first text filed that should be 1, but for the second it should be 2 and so on. My question is: how could I access an index iterator so I can remove the hardcoded 1 and replace it with the iteratior index?

Thanks!

1

It will depend upon how many iterations you want.

If you know how many iteration then:

<?php $numberOfIteration = 5; //you can change this number to any number?>
<?php for($i = 1; $i <= $numberOfIteration; $i++):?>
    <input type="text" onchange="opConfig.reloadPrice()"  oninput="engraver.setText(<?php echo $i;?>,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)" ..... />
<?php endfor;?>

I believe you have $options somewhere in your code. That array will help to find how many iteration you want. You can do like this:

<?php $numberOfIteration = count($options); //$options = $product->getOptions();?>

Hope I understood your qst. Good Luck.

UPDATE 1

Alright, I think workaround is, you have to use sorting. First in product backend, add sorting for each option. Sorting starting from 1.

Now

<input type="text" onchange="opConfig.reloadPrice()"  oninput="engraver.setText(<?php echo $_option->getSortOrder();?>,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)" ..... />

This should give you, whatever sorting number you give in backend.

5
  • That was very helpful Adarsh! The thing is that if I implement a foreach iterator as you say I'll end up having 4 textfields instead of 2. It seems that there is a loop somwere else in Magento, that causes the line <input type="text" onchange="opConfig.reloadPrice()" oninput="engraver.setText(1,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)" ..... /> to be repeated as many times as you define it on the Custom options in the admin panel. Do you know where that loop is implemented, because I believe that I might get the iteration index from there directly. – Alejandro Lozdziejski Jun 28 '17 at 0:00
  • 1
    Plez add app/design/frontend/alonoraure/default/template/catalog/product/view/options/type/text.phtml full code to your qst. – Adarsh Khatri Jun 28 '17 at 0:01
  • How about doing this: <input type="text" onchange="opConfig.reloadPrice()" oninput="engraver.setText(<?php echo $_option->getId();?>,document.getElementById('options_<?php echo $_option->getId() ?>_text').value)" ..... />. And obviously you will need to change your js code. Could you add js code too. – Adarsh Khatri Jun 28 '17 at 0:14
  • well I could do that, but $_option->getId() will return some number like 5331, and I'd like to get the custom option index (1,2,etc). Is there any way to inspect the $_option object, I might be able to find something useful there – Alejandro Lozdziejski Jun 28 '17 at 0:24
  • Check my update. – Adarsh Khatri Jun 28 '17 at 0:31

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.