dede商品价格跳转如何设置？

1. 点击价格后跳转到商品详情页（最常见、最推荐的方式）

   用户在列表页看到商品价格，点击价格后,进入该商品的详细介绍页面。

   
   （图片来源网络，侵删）
2. 点击价格后跳转到外部购买链接（如淘宝、京东、天猫）

   你的网站可能是一个导购网站，商品数据可能来自其他平台，用户点击价格后,直接跳转到对应商品在外部平台的购买页面。

下面我将针对这两种场景,提供详细的操作步骤和代码示例。

点击价格跳转到商品详情页

这是 DedeCMS 最标准、最规范的做法，价格本身就是商品的一部分,点击它进入详情页是用户最自然的预期。

实现步骤：

第一步：确保你的模型正确绑定了价格字段

在 DedeCMS 中，所有自定义的字段都需要在“模型管理”中进行定义。

1. 登录你的 DedeCMS 后台。
2. 进入【核心】 -> 【内容模型管理】。
3. 找到你商品所在的内容模型（商品模型”），点击后面的【字段管理】。
4. 在字段列表中，确认你已经添加了一个名为 price（或其他你自定义的名字）的字段，并且字段类型为“数字”。
5. 如果没有，请点击【添加新字段】，创建一个，字段名为 price，字段别名为“商品价格”，类型选择“数字”。

第二步：在发布商品时填写价格

在后台发布文章（商品）时，确保你在新添加的“商品价格”字段中填入了具体的价格数字。

第三步：修改商品列表页模板（通常是 list_article.htm）

这是最关键的一步，你需要找到商品列表页模板文件，定位到显示价格的代码，并将其包裹在一个 <a> 标签中。

1. 使用 FTP 或主机管理面板，进入你的 DedeCMS 安装目录。

2. 找到模板文件，通常位于 /templets/你的模板文件夹/ 目录下，商品列表页模板一般是 list_article.htm。

3. 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 list_article.htm。

4. 找到循环输出商品信息的代码块,它通常是这样的结构：

   {dede:arclist titlelen='42' row='10'}
   <li>
     <a href="[field:arcurl/]">[field:title/]</a>
     <span class="price">[field:price/]</span>
   </li>
   {/dede:arclist}

5. 修改代码：将显示价格的 [field:price/] 部分用 <a> 标签包裹起来，并链接到 [field:arcurl/]（文章/商品的详情页链接）。

   修改前：

   <span class="price">[field:price/]</span>

   修改后：

   <a href="[field:arcurl/]" class="price-link">￥[field:price/]</a>

   完整示例：

   {dede:arclist titlelen='42' row='10' channelid='1'}  <!-- channelid='1' 是商品模型的ID，请根据你的实际情况修改 -->
   <li>
     <a href="[field:arcurl/]" class="title">[field:title/]</a>
     <!-- 价格部分，点击后跳转到详情页 -->
     <a href="[field:arcurl/]" class="price">
       ￥[field:price/]
     </a>
   </li>
   {/dede:arclist}

第四步：CSS 样式优化（可选）

为了让价格看起来像一个可点击的链接，你可以在你的 CSS 文件（如 style.css）中添加一些样式。

/* 让价格看起来像一个链接 */
.price {
  color: #ff6600; /* 橙色，常见于价格 */
  font-weight: bold;
  text-decoration: none; /* 默认没有下划线，更像价格 */
  font-size: 16px;
  margin-left: 10px;
}
/* 鼠标悬停时显示下划线 */
.price:hover {
  text-decoration: underline;
}

完成以上步骤后，你的商品列表页中的价格就可以点击,并成功跳转到对应的商品详情页了。

点击价格跳转到外部购买链接

如果你的商品数据是采集或手动录入的，并且每个商品都有一个外部购买链接（比如淘宝客链接）,你可以这样做。

实现步骤：

第一步：在模型中添加“外部链接”字段

1. 和场景一一样，进入【核心】 -> 【内容模型管理】 -> 【字段管理】。
2. 为你的商品模型添加一个新字段。
   • 字段名：建议命名为 link 或 buyurl。
   • 字段类型：选择“单行文本”。
   • 字段说明：填写“外部购买链接”。
3. 保存。

第二步：在发布商品时填写外部链接

在后台编辑商品时，你会多出一个“外部购买链接”的输入框，在这里填入完整的购买 URL，https://item.taobao.com/item.htm?id=123456。

第三步：修改列表页模板

同样是修改 list_article.htm 文件，但这次链接地址不再是 [field:arcurl/]，而是我们刚刚创建的新字段 [field:link/]。

修改前：

<a href="[field:arcurl/]" class="price-link">￥[field:price/]</a>

修改后：

<a href="[field:link/]" target="_blank" class="price-link">￥[field:price/]</a>

关键点解释：

• [field:link/]：调用我们在第一步中创建的“外部购买链接”字段的值。
• target="_blank"：这是一个非常重要的属性，它表示点击链接时，会在新标签页中打开外部网站，而不是在当前页面跳转,这能很好地留住你的网站用户。

完整示例：

{dede:arclist titlelen='42' row='10' channelid='1'}
<li>
  <a href="[field:arcurl/]" class="title">[field:title/]</a>
  <!-- 价格部分，点击后在新标签页打开外部购买链接 -->
  <a href="[field:link/]" target="_blank" class="price">
    ￥[field:price/]
  </a>
</li>
{/dede:arclist}

总结与常见问题

常见问题排查：

1. 为什么点击价格没反应？

   • 检查模板文件是否修改正确，<a> 标签的 href 属性是否正确。
   • 检查 [field:price/] 或 [field:link/] 字段在后台是否有数据。
   • 检查浏览器控制台（按 F12）是否有 JavaScript 错误。

2. 为什么价格显示不出来？

   • 确认模型中 price 字段已添加,并且字段类型正确。
   • 确认在后台发布文章时,已经为该商品填写了价格。

3. 我的列表页不是 list_article.htm 怎么办？

   这个文件名取决于你在后台【频道管理】中设置的列表模板，进入对应频道的“更改选项”，查看“列表模板”设置的是什么,就修改那个文件。

希望这份详细的指南能帮助你解决问题！