PrestaShop 1.6.17优惠券输入框添加占位文本求助

Hey there! I totally get why editing the HTML directly via Chrome Dev Tools didn’t stick—PrestaShop dynamically renders pages from server-side templates, so those browser-side changes only last until you refresh. Let’s fix this properly with two reliable methods:

Method 1: Modify the Template File (Recommended) #

This is the cleanest approach since it edits the source template that generates the input field:

1. Locate the right template file:

   • First, check if your theme has overridden the discount module template. Navigate to themes/[your-theme-folder]/modules/discount/discount.tpl.
   • If that path doesn’t exist, copy the core file from modules/discount/discount.tpl to the above theme directory (always use theme overrides to avoid losing changes when updating PrestaShop!).

2. Update the input field:
   Find this line in the template:

   <input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="" />
   

   Add the placeholder attribute to it:

   <input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="" placeholder="Enter voucher code here" />
   

3. Clear PrestaShop’s cache:
   Head to your admin panel → Advanced Parameters → Performance → Click "Clear cache" (make sure caching isn’t disabled temporarily if you’re testing changes).

Method 2: Use JavaScript (If Template Edits Fail) #

Sometimes module scripts or theme JS might reset input attributes. If the first method doesn’t work, try this:

1. Create/Edit a custom JS file:
   Go to themes/[your-theme-folder]/js/ and make a file named custom.js (if it doesn’t exist). Add this code:

   $(document).ready(function() {
       // Target the voucher input and add placeholder text
       const voucherInput = $('#discount_name');
       if (voucherInput.length) {
           voucherInput.attr('placeholder', 'Enter voucher code here');
       }
   });
   

2. Load the JS file in your theme:
   Open themes/[your-theme-folder]/header.tpl and add this line before the closing </head> tag to include the script:

   <script src="{$js_dir}custom.js"></script>
   

3. Clear cache again to ensure the new JS loads properly.

Quick Note on Your Initial Attempt #

When you edit HTML via Dev Tools, you’re only modifying the temporary client-side DOM. PrestaShop rebuilds the page from its server templates every time you load it, so those changes get overwritten instantly on refresh.

内容的提问来源于stack exchange，提问作者franfran00