Question

是否可以在WooCommerce存档描述中添加更多阅读标签？我找到了一些解决方案，但是它们都用于单个产品页面，例如此solution。在存档页面上也找不到方法来完成此操作。我想在移动设备上获取read more标签，否则会导致内容太长，并且一开始就看不到产品。

这是我目前放置在category.php中的代码

<dependency>
    <groupId>org.apache.tapestry</groupId>
    <artifactId>tapestry-core</artifactId>
    <version>${tapestry-release-version}</version>
</dependency>

<dependency>
    <groupId>org.apache.tapestry</groupId>
    <artifactId>tapestry-hibernate</artifactId>
    <version>${tapestry-release-version}</version>
</dependency>

<dependency>
    <groupId>org.apache.tapestry</groupId>
    <artifactId>tapestry-upload</artifactId>
    <version>${tapestry-release-version}</version>
</dependency>

<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-c3p0</artifactId>
    <version>4.2.0.Final</version>
</dependency>

<dependency>
    <groupId>com.mchange</groupId>
    <artifactId>c3p0</artifactId>
    <version>0.9.5.2</version>
</dependency>

<dependency>
    <groupId>org.apache.tapestry</groupId>
    <artifactId>tapestry-spring</artifactId>
    <version>${tapestry-release-version}</version>
</dependency>

<dependency>
    <groupId>org.apache.tapestry</groupId>
    <artifactId>tapestry-kaptcha</artifactId>
    <version>${tapestry-release-version}</version>
</dependency>

<dependency>
    <groupId>org.got5</groupId>
    <artifactId>tapestry5-jquery</artifactId>
    <version>4.1.1</version>
</dependency>

<dependency>
    <groupId>com.github.lltyk</groupId>
    <artifactId>tapestry-spring-security</artifactId>
    <version>3.0.3</version>
</dependency>

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>4.3.0.RELEASE</version>
</dependency>

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>4.3.0.RELEASE</version>
    <scope>test</scope>
</dependency>

Answer 1

我找到了一个解决方案，对我来说非常好。

我用少量的JQuery修复了它。使用 data-js =“ content” 属性触发应显示更多内容链接的文本。例如

<p data-js="content"> This is the Text where it should appear></p>

使用下面的JQuery，我触发了触发器。因此，它仅在移动设备上显示，并且仅在该段落具有data-js =“ content”属性的位置显示。

if(window.outerWidth < 991) {
// Select all text areas
var textArea = document.querySelectorAll('[data-js=content]'),    
    maxText = 100;

// For each one...
[].forEach.call( textArea, function( el ) {

  var textAreaLength = el.innerHTML.length,
    teaserText = el.innerHTML.substr(0, 100),
    fullText = el.innerHTML,
    showTeaser = false;    

  // Check to see if this text length is more
  // than the max
  if (textAreaLength >= maxText) {
    // Set flag
    showTeaser = true;

    // Set teaser text  
    el.innerHTML = teaserText;
    el.innerHTML += '...';

    // Create button
    var button = document.createElement('button');
    button.innerHTML = 'Mehr anzeigen';
    button.classList.add('button');
    el.appendChild(button);

    // Button click event
    button.onclick = function () {
      if (showTeaser === true) {
        // Update flag
        showTeaser = false;

        // Update button text
        this.innerHTML = 'Weniger anzeigen';

        // Show full text
        el.innerHTML = fullText;

        // Re-append the button
        el.appendChild(this);
      } else {
        // Update flag
        showTeaser = true;

        // Update button text
        this.innerHTML = 'Mehr anzeigen';

        // Show teaser text
        el.innerHTML = teaserText;
        el.innerHTML += '...';

        // Re-append the button
        el.appendChild(this);
      }
      return false;
    };
  } else { 
    // Show full text
    el.innerHTML = fullText;
  }   

});
}

Answer 2

如果您的代码在产品循环中，请尝试删除do_action( 'woocommerce_archive_description' );并将其添加到标题下方。

<a href="<?php echo get_the_permalink(); ?>"><?php _e('read more', 'woocommerce');?></a>

这将显示一个更多的链接，该链接将重定向到您的产品。

WooCommerce中带有更多标签的产品档案描述

2 个答案: