技术问询：jQuery页面重载后变量存储及PrestaShop1.6按钮控制

没问题，我来帮你逐个解决这两个问题！

页面重载后要保留变量，核心是把数据存在浏览器的持久化存储里，常用的有三种方案，我给你分别讲清楚：

• localStorage（持久化存储）：数据会一直保存在浏览器里，除非主动删除，适合需要长期保存的内容。
  示例代码：

  // 存储变量
  localStorage.setItem('username', 'JohnDoe');
  localStorage.setItem('userSettings', JSON.stringify({theme: 'dark', notifications: true}));
  
  // 页面重载后读取变量
  const savedUsername = localStorage.getItem('username');
  const savedSettings = JSON.parse(localStorage.getItem('userSettings'));
  
  // 如果要删除数据
  localStorage.removeItem('username');
  

• sessionStorage（会话级存储）：数据只在当前浏览器标签页的会话中有效，关闭标签页就会清除，适合临时保存的内容。
  示例代码：

  // 存储临时数据
  sessionStorage.setItem('tempCart', JSON.stringify([{id: 1, qty: 2}]));
  
  // 页面重载后读取
  const tempCart = JSON.parse(sessionStorage.getItem('tempCart'));
  

• Cookie：可以设置过期时间，数据会随请求发送到服务器，适合需要和后端交互的场景。用原生JS就能轻松操作：

  // 设置Cookie（有效期7天）
  document.cookie = "preferences=fontSize:16px; expires=" + new Date(Date.now() + 7*24*60*60*1000).toUTCString() + "; path=/";
  
  // 读取Cookie的工具函数
  function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }
  const savedPrefs = getCookie('preferences');
  

注意：存储复杂数据（比如对象、数组）时，要用JSON.stringify()转成字符串，读取时用JSON.parse()转回来。

你的初始按钮已经设置了disabled="disabled"，这一步没问题。接下来我们需要给保存按钮绑定点击事件，同时检查附加字段的内容是否有效，满足条件后再启用「添加到购物车」按钮。

假设你的附加字段是一个文本域（比如id为customization_description），下面是具体的实现代码：

jQuery(document).ready(function($) {
  // 获取页面关键元素
  const saveBtn = $('button[name="saveCustomization"]');
  const addToCartBtn = $('button[name="Submit"]');
  const customField = $('#customization_description'); // 替换成你实际的附加字段选择器

  // 监听保存按钮点击事件
  saveBtn.on('click', function(e) {
    // 先阻止默认提交行为（如果保存按钮是提交类型的话）
    e.preventDefault();

    // 获取附加字段内容，去掉前后空格
    const customContent = $.trim(customField.val());

    // 验证内容是否有效
    if (customContent !== '') {
      // 启用添加到购物车按钮
      addToCartBtn.prop('disabled', false);
      // 可选：添加成功提示
      // alert('自定义内容已保存，现在可以添加到购物车了！');
    } else {
      // 内容为空，保持禁用并提示用户
      addToCartBtn.prop('disabled', true);
      alert('请先输入自定义描述信息！');
    }

    // 如果保存按钮需要提交自定义表单，手动触发提交
    // $(this).closest('form').submit();
  });

  // 可选：用户保存后修改附加字段，自动重新禁用按钮
  customField.on('input', function() {
    addToCartBtn.prop('disabled', true);
  });
});

注意事项： #

• 请把#customization_description替换成你实际的附加字段选择器（比如input的id、class或name）。
• 如果你的保存按钮本身是用来提交自定义表单的，记得在验证通过后手动触发表单提交（代码里注释的部分）。
• PrestaShop 1.6默认加载了jQuery，用jQuery(document).ready(function($) { ... })包裹代码可以避免$符号冲突。

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